VueJS 2 + ASP.NET MVC 5
Posted
技术标签:
【中文标题】VueJS 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，我在做“非常基础”的教程。但是当我尝试第二个时。但是当他谈到这部分时，我没有理解最后一部分：“欢迎来到 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 扩展。以上是关于VueJS 2 + ASP.NET MVC 5的主要内容，如果未能解决你的问题，请参考以下文章
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 14. ASP.NET Core Identity 入门
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 25. 过滤器
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 17. 基于Claim和Policy的授权 上