AspNetCore MVC + Vue.Js 项目搭建

时间：2017-11-07 14:22:23 阅读：2395 评论：0 收藏：0 [点我收藏+]

标签：www auth 接口 pre template pts name rip web

1.准备

全文重点在于搭建环境，其他相关知识点请百度。

VS2017 升级到最新的版本
安装 net core 2.0
安装 npm (npm相关使用请百度或咨询前端小伙伴)
全局安装 webpack （webpack相关使用请百度或咨询前端小伙伴）
vue 的使用（推荐看一下vue创建的webpack项目模板）
axios的使用，vue中用于调用后端接口的方法

2.创建AspNetCore MVC项目

技术分享

3.清空项目

技术分享

删除不必要的文件后，项目文件结果如下：

技术分享

4.初始化项目

4.1 在项目web层执行npm init 命令，然后一直回车，最终项目会生成package.json文件

技术分享

4.2 修改package.json文件，内容如下，修改完成之后，在项目下执行“npm i”命令安装npm包。PS：了解npm的package.json作用是啥，scripts，dependencies，devDependencies 这三个节点有啥用。一定要知道安装的每个包是干啥用的

{
  "name": "tcbase.aspnetcore.vuejs.template",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^7.1.2",
     
    "vue": "^2.4.2",
    "vue-loader": "^13.0.4",
    "vue-router": "^2.7.0",
    "vue-template-compiler": "^2.4.2",
    "vuex": "^2.3.1",
    "axios": "^0.16.2",
    "css-loader": "^0.28.7",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9"
  },
  "devDependencies": {
    "webpack": "^3.5.2"
  }
}

4.3 创建 webpack.config.js 配置文件。PS：一定要知道下面每个节点的用途，下面给出的配置是最基础的配置

var path = require(‘path‘)
const webpack = require(‘webpack‘)
module.exports = {
    entry: {
        app: ‘./src/main.js‘
    },
    output: {
        path: path.resolve(__dirname, ‘./wwwroot‘),
        filename: ‘[name].js‘
    },
    resolve: {
        extensions: [‘.js‘, ‘.vue‘],
        alias: {
            ‘vue$‘: ‘vue/dist/vue.esm.js‘,
            ‘@‘: path.resolve(__dirname, ‘./src‘)
        }
    },
    module: {
        rules: [{
            test: /\.vue$/,
            loader: ‘vue-loader‘,
            options: {
                sourceMap: true,
                loaders: {
                    scss: ‘style-loader!css-loader!sass-loader‘,
                    sass: ‘style-loader!css-loader!sass-loader?indentedSyntax‘,
                },
            }
        },
        {
            test: /\.css$/,
            loader: "style-loader!css-loader"
        },
        {
            test: /\.less/,
            loader: ‘style!css!autoprefixer!less‘
        },
        {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: ‘url-loader‘
        },
        {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: ‘url-loader‘
        },
        ]
    },
    devtool: ‘#source-map‘
}