ASP.NET Core使用Vue.js的项目配置及组合输出方法

前端开发使用Vue.js有很多可用组件，开发起来很简单快捷。后端可以的选择也很多，本文主要介绍ASP.NET Core中，使用Vue.js配置使用，以及前端文件输出方法。

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的模板可以使用。

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 = falseVue.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:

6) 修改Index.cshtml视图

            - asp.net core 2.1 - vue.js        Loading...

ASP.NET Core使用Vue.js的项目配置及组合输出方法

Hello World!

I an what I an