VueJS 2 + ASP.NET MVC 5

Question

我对 VueJS 很陌生。我必须在 ASP.NET MVC5.

中构建单页应用程序

我遵循了本教程并且效果很好 -> TUTORIAL

但是当我创建一个 .vue 页面来测试 VueJS2 路由时，浏览器不理解 "Import"，我读到我必须使用像 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开发！是的，你是对的，你需要一些东西来将导入语句翻译成浏览器可以处理的 JavaScript 。最受欢迎的工具是 webpack 和 browserify。

您还在使用 .vue file, which needs to be converted (with 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'
       }
     ]
   }
}

这个配置表示，"start in app.js, replace import statements as we come across them, and bundle it into a dist.js file. When webpack sees a .vue file, use the vue-loader module to add it to 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 文件。

注意在这个问题的例子中，router 在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

VueJS 2 + ASP.NET MVC 5

asp.net

asp.net-mvc

router

vue.js

vuejs2