.Net Core+Vue.js+ElementUI 实现前后端分离

Tags: Vue

架构

前端采用：Vue.js、Element-UI、axios
后端采用：.Net Core Mvc
本项目是基于Vue.js的多页应用，由于是后端开发对不擅长Node.js开发并且希望使用传统的方式进行权限管控及生产发布，所以.Net Core Mvc 承担了所有的页面路由管控及页面级权限控制，Vue.js只是作为视图渲染及页面交互使用。

准备工作

Node安装及配置

• 安装方法参考地址

• 安装完成后cmd控制台执行以下语法查看node版本验证时候安装成功

node -v

• 配置淘宝npm镜像

# 临时使用
npm --registry https://registry.npm.taobao.org install express

# 永久使用
npm config set registry https://registry.npm.taobao.org

# 配置后可通过下面方式来验证是否成功
npm config get registry

客户端实现

搭建vue脚手架

• 使用npm全局安装vue-cli脚手架构建工具
  vue-cli 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

npm install -g vue-cli

• 创建一个基于 webpack 模板的新项目

# vue-multiple为自定义名称，注意项目名称不能大写
vue init webpack vue-multiple

# 初始化配置中 Install vue-router? 选择 no， 不使用vue-router，其他配置项默认即可

执行初始化命令后需要输入以下内容：

1. Project name (my-project) # 项目名称（我的项目）
2. Project description (A Vue.js project) # 项目描述一个Vue.js 项目
3. Author 作者（你的名字）
4. Install vue-router? (Y/n)# 是否安装Vue路由，也就是以后是spa（但页面应用需要的模块）
5. Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代码？ （Y [ yes ] / N [ no ]）
6. Pick an ESLint preset (Use arrow keys) # 选择一个预置ESLint（使用箭头键） Setup unit tests with
7. Karma + Mocha? (Y/n) # 设置单元测Karma + Mocha？ （Y/ N） Setup e2e tests
8. with Nightwatch? (Y/n) # 设置端到端测试，Nightwatch？ （Y/ N）

• 安装项目所需要的依赖

cd vue-multiple

# 本地安装npm依赖包，保存至 ./node_modules目录

npm install

chromedriver@2.38.3 install:

node install.js

1.全局安装 chromedriver
npm install chromedriver -g

2.指定淘宝镜像安装
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

• 运行项目

#运行dev命令 启动server服务器，并监听8080端口，开发环境测试使用

npm run dev

#看到  I  Your application is running here: http://localhost:8080 并且能够成功访问  http://localhost:8080   表示项目创建成功

修改项目模板目录

build/                       #webpack打包配置
build.js                 #构建生产代码
check-versions.js        #检测node及npm版本
vue-loader.conf.js       #处理Vue文件中的样式 vue开发环境的wepack相关配置文件，主要用来处理各种文件的配置
utils.js                 #额外的通用方法
webpack.base.conf.js     #默认的webpack配置
webpack.dev.conf.js      #本地开发的webpack配置
webpack.prod.conf.js     #构建生产的webpack配置
config/   配置文件
dev.env.js
index.js                 #定义开发环境和生产环境中所需要的参数
pord.env.js
test.env.js
src/
assets/                  #放资源
components/              #公共组件
views/                   #页面模块
home/                #子页面
index.html       #模版页面
index.js         #js入口
// 注意，这里的html和js的文件名要一致，如上面就是index
dist/                        #最后打包生成的资源

修改webpack打包配置以支持多页应用开发 webpack中文

• 修改build/utils.js文件，添加以下代码：

const glob = require('glob')
// 页面模板
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 取得相应的页面路径，因为之前的配置，所以是src文件夹下的views文件夹
const PAGE_PATH = path.resolve(__dirname, '../src/views')
// 用于做相应的merge处理
const merge = require('webpack-merge')

// 多页面入口配置，通过glob模块读取views文件夹下所有对应文件夹下的js后缀文件，作为入口文件处理
exports.entries = function () {
var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
var entries = {},
basename,
tmp,
pathname;
entryFiles.forEach((entry) => {
basename = path.basename(entry, path.extname(entry));
tmp = entry.split("/").splice(-3);
pathname = tmp.splice(1, 1) + "/" + basename; // 正确输出js和html的路径
entries[pathname] = entry;
})
return entries
}
// 多页面输出配置,与上面的多页面入口配置相同，读取views文件夹下的对应的html后缀文件，然后放入数组中
exports.htmlPlugin = function () {
let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
let htmlentries = []
let basename,
tmp;
entryHtml.forEach((filePath) => {
basename = path.basename(filePath, path.extname(filePath));
tmp = filePath.split("/").splice(-3);
let filename = tmp.splice(1, 1) + "/" + basename; // 正确输出js和html的路径
let conf = {
// 模板来源
template: filePath,
// 文件名称
filename:  filename + '.html',
// 页面模板需要加对应的js脚本，如果不加这行则每个页面都会引入所有的js脚本
chunks: ['manifest', 'vendor', filename],
inject: true
}
if (process.env.NODE_ENV === 'product') {
conf = merge(conf, {
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
})
}
htmlentries.push(new HtmlWebpackPlugin(conf))
})
return htmlentries
}

• 修改webpack.base.conf.js：配置多个页面的js入口

module.exports = {
entry: utils.entries(), //设置多个页面的js入口
...
}

• 修改webpack.dev.conf.js：本地开发的多页面配置

plugins: [
...
// 注释HtmlWebpackPlugin相关配置
// new HtmlWebpackPlugin({
//   filename: 'index.html',
//   template: 'index.html',
//   inject: true
// }),
...
].concat(utils.htmlPlugin()) //添加Html模板集合

• 修改webpack.prod.conf.js：构建生产的多页面配置

plugins: [
...
// 注释HtmlWebpackPlugin相关配置
// new HtmlWebpackPlugin({
//   filename: process.env.NODE_ENV === 'testing' ?
//     'index.html' :
//     config.build.index,
//   template: 'index.html',
//   inject: true,
//   minify: {
//     removeComments: true,
//     collapseWhitespace: true,
//     removeAttributeQuotes: true
//     // more options:
//     // https://github.com/kangax/html-minifier#options-quick-reference
//   },
//   // necessary to consistently work with multiple chunks via CommonsChunkPlugin
//   chunksSortMode: 'dependency'
// }),
...
].concat(utils.htmlPlugin())  //添加Html模板集合

如何去除js、css文件名hash值

// 删除filename中的contenthash配置去除css文件名hash
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].css'),
allChunks: true,
})

// 删除filename和chunkFilename中的chunkhash配置去除js文件名hash
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
}

• 执行npm run build 指令测试打包是否成功

打包成功生成以下目录及文件
dist\
home\
index.html
static
css
home
index.css
js
home index.js
manifest.js
vender.js

github地址：https://github.com/chubin518/vue-multiple.git

服务端实现

• 打开VS创建Web应用，项目创建成功后删除不必要的js、css引用等。
• 将生成的dist目录拷贝纸wwwroot文件加下
• _layout.cshtml 模板页添加 vender.js 、 manifest.js 引用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - NetCoreVueMultiple</title>
<link href="~/dist/static/css/main/index.css" rel="stylesheet" />
@RenderSection("Styles", required: false)
</head>
<body>
@RenderBody()
<script src="~/dist/static/js/manifest.js"></script>
<script src="~/dist/static/js/vendor.js"></script>
<script src="~/dist/static/js/main/index.js"></script>
@RenderSection("Scripts", required: false)
</body>
</html>

element-ui的引入方式参考官网
本实例使用webpack一起打包进了vendor.js中

• 修改Index.cshtml 如下：

@{
ViewData["Title"] = "Home Page";
}
@section Styles{
<link href="~/dist/static/css/home/Index.css" rel="stylesheet" />
}
<div id="app">
</div>
@section Scripts{
<script src="~/dist/static/js/home/Index.js"></script>
}

• 编译项目运行

github地址：https://github.com/chubin518/NetCoreVueMultiple.git

• 也可将前后端项目合并，将vue项目相关文件复制到MVC项目根目录，修改config/index.js

build: {
// 输出打包后的文件至wwwroot下的dist文件夹，执行npm run build 会自动生成js至wwwroot/dist下
assetsRoot: path.resolve(__dirname, '../wwwroot/dist'),
}

• 如果项目中已经已经以script的方式引入vue.js /element-ui 等框架时，再次引用manifest.js，vendor.js文件可能会引起js框架版本冲突等问题

此时可通过配置设置不打包公共组件，具体操作如下：

• 修改webpack.base.conf.js，不打包的文件

let exten = {};
if (process.env.NODE_ENV === 'testing') {
// key 为应用的第三方库的名称，value为在项目中起的别名
exten = { //不打包的文件
jquery: 'jQuery',
'element-ui': 'ElementUI',
vue: "Vue",
vuex: 'Vuex',
axios: 'axios',
moment: 'moment'
}
}
module.exports = {
entry: utils.entries(), //设置多个页面的js入口
externals: exten,
...
}

• 复制 webpack.prod.conf.js 并重命名为 webpack.test.conf.js，修改webpack.test.conf.js配置

// 注释 CommonsChunkPlugin 不生成manifest.js，vendor.js文件

// new webpack.optimize.CommonsChunkPlugin({
//   name: 'vendor',
//   minChunks(module) {
//     // any required modules inside node_modules are extracted to vendor
//     return (
//       module.resource &&
//       /\.js$/.test(module.resource) &&
//       module.resource.indexOf(
//         path.join(__dirname, '../node_modules')
//       ) === 0
//     )
//   }
// }),

// new webpack.optimize.CommonsChunkPlugin({
//   name: 'manifest',
//   minChunks: Infinity
// }),

// new webpack.optimize.CommonsChunkPlugin({
//   name: 'app',
//   async: 'vendor-async',
//   children: true,
//   minChunks: 3
// }),

• 复制 build.js 并重命名为 build.test.js，修改build.test.js配置

// 设置环境变量为testing
process.env.NODE_ENV = 'testing'
// 加载webpack.test.conf.js配置
const webpackConfig = require('./webpack.test.conf.js')
// 设置静态输出目录为test
config.build.assetsSubDirectory = "test"

• 修改 build/utils.js 修改静态文件输出目录为test

exports.assetsPath = function (_path) {
const assetsSubDirectory = process.env.NODE_ENV === 'production' ?
config.build.assetsSubDirectory :
process.env.NODE_ENV === 'testing' ?
"test" : config.dev.assetsSubDirectory

return path.posix.join(assetsSubDirectory, _path)
}

• 修改package.json 添加test环境编译指令

"scripts": {
....
"build": "node build/build.js",
"build:test": "node build/build.test.js"
},

• 编译打包测试配置修改是否OK