VueJS 2 + ASP.NET MVC 5

Question

VueJS 2 + ASP.NET MVC 5

asp.netasp.net-mvcvue.jsvuejs2router

13

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

我按照教程进行操作，结果很好。

但是当我创建一个.vue页面来测试VueJS2 Routes时，浏览器不理解"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>

非常感谢！

- Johnson

可能是在已有的多页面.NET MVC应用程序中使用VueJS 2替换jQuery的最佳方法的重复问题。 - Bert

是的！我看到了@Bert，我正在做“极其基础”的教程。但是当我尝试第二个教程时，我不理解他谈到这部分时的最后一部分：“<Target Name =”RunWebpack“> <Exec Command =”npm install“/> <Exec Command =”webpack“/> </ Target> <Target Name =”BeforeBuild“DependsOnTargets =”RunWebpack“> </ Target>”我不知道该把它放在哪里。 - Johnson

你需要编辑你的项目的.csproj文件并添加这些行。 - Bert

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- exclsr · Accepted Answer

欢迎来到Vue.js开发！是的，你说得对，你需要一些工具将导入语句转换为浏览器可以处理的JavaScript代码。最流行的工具是webpack和browserify。

你还使用了一个.vue文件，这需要通过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 文件，可以帮助我们完成这个目标：

我们的目标是使用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文件。

请注意，在此问题的示例中，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'
    }
});

就这样了！如果你有任何问题，请告诉我。