VueJS 2 + ASP.NET MVC 5答案

【问题标题】：VueJS 2 + ASP.NET MVC 5VueJS 2 + ASP.NET MVC 5
【发布时间】：2018-02-12 21:47:39
【问题描述】：

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

我遵循本教程并且效果很好 -> 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>

非常感谢！！

【问题讨论】：

Best approach when replacing jQuery with VueJS 2 in multi-page existing .NET MVC application的可能重复
是的！我看到了@Bert，我在做“非常基础”的教程。但是当我尝试第二个时。但是当他谈到这部分时，我没有理解最后一部分：“" 我不知道该放在哪里。
您必须为您的项目编辑 .csproj 文件并添加这些行。

标签： asp.net asp.net-mvc vue.js vuejs2 router

【解决方案1】：

欢迎来到 Vue.js 开发！是的，你是对的，你需要一些东西来将导入语句翻译成浏览器可以处理的 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'
    }
});

应该是这样的！如果您有任何问题，请告诉我。

【讨论】：

感谢您的回答，我做了您所看到的一切，dist.js 文件创建成功。所以我尝试在 Visual Studio 2015 上构建我的 _Layout.cshtml，并且有很多关于“缺少参数的 JSDoc '...'”的错误我该如何编译这个？谢谢！
好的，很好。你认为这些错误是由 linter 引起的吗？ ESLint 或类似的东西（如 Visual Studio TypeScript 编译器）？构建它可能取决于您的特定设置...您可能必须告诉 Visual Studio 忽略 node_modules 文件夹？
我不知道为什么这个错误出现在我面前，我试图“包含在项目中”节点模块文件夹，但没有工作...... =（我有下载一些 Visual Studio 扩展吗？我有一个 Typescript 扩展，我将卸载并重试。
是的，如果可以，请尝试关闭 Visual Studio TypeScript 编译器。它应该可以在没有任何特殊扩展的情况下工作......最终，您可能希望获得 NPM Task Runner 和 WebPack Task Runner 扩展，以便在您保存文件时自动构建您的 webpack。
是的，为了编译（在通过这个 postcss.d.ts 之后），我建议查看 WebPack Task Runner Visual Studio 扩展。