非常基本的
我所知道的在 ASP.NET 中使用 Vue 的最基本方法就是在项目中包含 Vue 脚本。您可以使用 vue.js Nuget 包，它将 Vue 脚本添加到您的 Scripts 目录中，并且只在您的 MVC 视图中包含开发版本或缩小版本。
<script src="~/Scripts/vue.min.js"></script>
然后在你的视图cshtml中，添加一个脚本块即可。
<script>
new Vue({
el: "#app",
data: {
message: "Hello from Vue"
}
})
</script>
其中#app 指的是您视图中的元素。如果你想使用一个组件，只需将它添加到你的脚本块中。
<script>
Vue.component("child", {
template:"<h1>I'm a child component!</h1>"
})
new Vue({
el: "#app",
data: {
message: "Hello from Vue"
}
})
</script>
并修改您的 Vue 模板。
<div id="app">
{{message}}
<child></child>
</div>
如果您发现自己构建了很多组件（您可能会这样做），请将它们提取到 vue.components.js 文件或类似文件中，在其中定义所有组件，并将其包含在 vue 之外的视图中脚本。
使用单个文件组件
为了使用单文件组件，您需要将单文件组件的 node.js 构建过程集成到您的 ASP.NET MVC 构建过程中。
安装node.js。 node.js安装好后，全局安装webpack。
npm install webpack -g
将 package.json 添加到您的项目中。这是我使用的。
{
"version": "1.0.0",
"name": "vue-example",
"private": true,
"devDependencies": {
"babel-core": "^6.23.1",
"babel-loader": "^6.3.2",
"babel-preset-env": "^1.1.8",
"css-loader": "^0.26.1",
"style-loader": "^0.13.1",
"vue-loader": "^11.1.0",
"vue-template-compiler": "^2.1.10",
"webpack": "^2.2.0"
},
"dependencies": {
"vue": "^2.2.1"
}
}
我通常在我的项目中创建一个文件夹来保存我的 Vue 脚本和名为 Vue 的 .vue 文件。添加一个文件作为 Vue 构建过程的入口点。我们可以调用这个 index.js（或任何你想要的）。
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
创建 App.vue。
<template>
<div id="app">
{{msg}}
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
将 webpack.config.js 添加到您的项目中。这是我使用的。
module.exports = {
entry: "./Vue/index.js",
output: {
path: __dirname,
filename: "./Vue/bundle.js",
},
module: {
loaders: [
{ test: /\.vue$/, loader: 'vue-loader' },
],
}
}
此配置指定 index.js 作为 webpack 的入口点，以找出 bundle.js 文件中包含的内容，该文件将被编译并放入 Vue 文件夹中。
为了在项目构建时编译 bundle.js 文件，我修改了项目文件以包含以下内容。
<Target Name="RunWebpack">
<Exec Command="npm install" />
<Exec Command="webpack" />
</Target>
<Target Name="BeforeBuild" DependsOnTargets="RunWebpack"></Target>
这将安装必要的 npm 包，然后运行 webpack 来构建 bundle.js。如果您在构建服务器上构建项目，这是必要的。
现在您只需将 bundle.js 文件包含在一个视图中，该视图具有一个带有 #app 的元素。你确实不需要包含 vue.js 或 vue.min.js。那将在捆绑包中。
编译单个文件组件
我们发现有时我们想使用单个文件组件，但不想将其全部捆绑到单个脚本中。为此，您主要只需要修改 webpack.config.js。
const fs = require("fs");
const path = require("path");
// build an object that looks like
// {
// "filename": "./filename.vue"
// }
// to list the entry points for webpack to compile.
function buildEntry() {
const reducer = (entry, file) => { entry[file.split(".").shift()] = `./Vue/${file}`; return entry; };
return fs.readdirSync(path.join(__dirname, "Vue"))
.filter(file => file.endsWith(".vue"))
.reduce(reducer, {});
}
module.exports = {
entry: buildEntry(),
output: {
path: path.join(__dirname, "Vue"),
filename: "[name].js",
library: "[name]"
},
module: {
loaders: [
{ test: /\.vue$/, loader: 'vue-loader' },
],
}
}
此 webpack 配置将为每个单独的文件组件构建一个脚本文件。然后，您可以将该脚本包含在使用上述“非常基本”技术的页面上，并通过全局公开或作为 Vue 的一部分在 Vue 中使用该组件。例如，如果我有一个 Modal.vue，我会在 ASP.NET MVC 视图中包含 Modal.js，然后通过
将其公开给 Vue
Vue.component("Modal", Modal);
或
new Vue({
...
components:{
"Modal": Modal
}
})
Webpack 是非常可配置的，因此您可能希望采用不同的方法并为每个页面构建一个单独的包。
最后，你可以在开发和运行的时候打开命令行
webpack --watch
直接在您的项目中，您的包或单个组件将在您每次保存时构建。