.Net Core+Vue.js+ElementUI 实现前后端分离
.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
