1､使用dotnet new命令配置创建Vue.js项目
需创建一个空文件夹，然后在该文件夹中运行以下命令
1) 查看可用模板列表
dotnet new
2) 安装Microsoft.AspNetCore.SpaTemplates模板
dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
3) 创建一个Vue项目
dotnet new vue
注意：除了Vue模样，还有Aurelia，Angular，Knockout和React的模板可以使用。
相关文档：.net core 3.0 (windows、linux、mac)安装配置
2､手动配置项目
1) 设置npm配置文件(package.json)
示例内容如下：
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"gulp": "^3.9.1",
"laravel-elixir": "^6.0.0-14",
"laravel-elixir-vue-2": "^0.2.0",
"laravel-elixir-webpack-official": "^1.0.2",
"vue": "^2.0.1",
"vue-resource": "^1.0.3",
"vuex": "^2.1.1"
}
}
2) 安装npm软件包
进入项目根目录，安装package.json文件中配置的npm软件包，使用如下命令：
npm install
3) 配置webpack
项目根目录下添加webpack.config.js，配置webpack将Vue,js,scss等文件编译输出到指定目录
var path = require('path')
var webpack = require('webpack')
const bundleOutputDir = './wwwroot/dist'; ///////输出目录
module.exports = {
context: __dirname,
entry: { main: './MyApp/index.js' }, ////////////vue.js程序根目录
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
}
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},output: {
path: path.join(__dirname, bundleOutputDir),
filename: '[name].js',
publicPath: 'dist/'
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
4) 添加.babelrc文件
项目根目录下,添加.babelrc文件，用于解析ES6方法。
{
"presets": [
["env", { "modules": false }],
"stage-3"
]
}5) 创建Vue文件
项目根目录新建MyApp文件夹，并新建如下文件：
index.js:
import Vue from 'vue'
import VueRouter from 'vue-router' //导入路由插件的包
import App from './App.vue' //导入根组件
Vue.config.productionTip = false
Vue.use(VueRouter) //安装路由模块
const routes = [
{
path: '/',
component: App
}
]
const router = new VueRouter({ //创建路由对象
routes,
mode: 'history'
})
new Vue({
el: '#app',
render: h => h(App),
router //挂载路由对象到 VM 实例上
})
app.vue:
<template>
<div id="home">
<h1>Hello World!</h1>
<h1>I an what I an</h1>
</div>
</template>
<script>
export default { }
</script>
<style lang="scss">
</style>
6) 修改Index.cshtml视图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>- asp.net core 2.1 - vue.js</title>
<script src="~/dist/main.js" asp-append-version="true"></script>
</head>
<body>
<div id='app'>Loading...</div>
</body>
</html>
相关文档：ASP.NET Core Action接收VUE中Axios提交Form表单参数方法及示例代码