.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