Question

我对VueJS很新。我必须在ASP.NET MVC5中构建单个页面应用程序。

我遵循本教程并且运作良好 - ＆gt; TUTORIAL

但是当我创建一个.vue页面来测试VueJS2路由时，浏览器不理解“导入”，我读到我必须使用像Babel这样的转换器，有人知道我是如何解决的吗？

App.VUE

    <template>
    <div id="app">
        {{msg}}
    </div>
</template>

<script>
    export default {
      name: 'app',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
</script>

App.JS

    import Vue from 'vue'
import App from './App.vue'


new Vue({
    el: '#app',
    router,
    render: h => h(App),
    data: {
        message: 'Hello Vue! in About Page'
    }
});

_Layout.cshtml

<div class="container-fluid">
        @RenderBody()

        <div id="app">
            { { message } }
        </div>
    </div>


    <script src="~/Scripts/essential/jquery-3.1.1.min.js"></script>
    <script src="~/Scripts/essential/bootstrap.min.js"></script>
    <script src="~/Scripts/essential/inspinia.js"></script>
    <script src="~/Scripts/essential/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.0.1/vue-router.js"></script>

    <script src="~/Scripts/app.js"></script>
    <script src="~/Scripts/plugin/metisMenu/jquery.metisMenu.js"></script>
    <script src="~/Scripts/plugin/pace/pace.min.js"></script>
    <script src="~/Scripts/plugin/slimscroll/jquery.slimscroll.min.js"></script>

非常感谢!!

Answer 1

欢迎来到Vue.js开发！是的，你是对的，你需要一些东西将import语句翻译成浏览器可以处理的JavaScript。最受欢迎的工具是webpack和browserify。

您还使用.vue file，需要在浏览器获取之前进行转换（使用vue-loader）。我将介绍如何执行此操作，并设置webpack，其中包含几个步骤。首先，我们正在使用的HTML看起来像这样：

<html>
   <head>
   </head>
   <body>
      <div class="container-fluid">
        <div id="app">
            { { message } }
        </div>
      </div>
      <script src="./dist.js"></script>
   </body>
</html>

我们的目标是使用webpack将App.vue和app.js捆绑/编译成dist.js.这是一个webpack.config.js文件，可以帮助我们做到这一点：

module.exports = {
   entry: './app.js',
   output: {
      filename: 'dist.js'
   },
   module: {
     rules: [
       {
         test: /\.vue$/,
         loader: 'vue-loader'
       }
     ]
   }
}

这个配置说，“从app.js开始，在遇到它们时替换import语句，并将其捆绑到dist.js文件中。当webpack看到.vue文件时，使用vue-loader模块将其添加到dist.js。“

现在我们需要安装可以实现这一目标的工具/库。我推荐使用Node.js附带的npm。安装npm后，可以将这个package.json文件放在目录中：

{
  "name": "getting-started",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack"
  },
  "dependencies": {
    "css-loader": "^0.28.7",
    "vue": "^2.4.2",
    "vue-loader": "^13.0.4",
    "vue-resource": "^1.3.3",
    "vue-router": "^2.7.0",
    "vue-template-compiler": "^2.4.2",
    "webpack": "^3.5.5"
  }
}

并执行以下操作：

运行npm install以获取所有软件包。
运行npm run-script build以通过webpack生成dist.js文件。

请注意，在此问题的示例中，路由器在app.js中未定义，但这是一个固定文件：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

var router = new VueRouter();

new Vue({
    el: '#app',
    router,
    render: h => h(App),
    data: {
        message: 'Hello Vue! in About Page'
    }
});

那应该是它！如果您有任何问题，请告诉我。

VueJS 2 + ASP.NET MVC 5

1 个答案: