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

相关文档.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表单参数方法及示例代码


推荐文档