Vue后台项目的学习

一、项目的创建

该项目的创建采用可视化的创建方式，创建好文件夹，在该文件的url地址输入cmd：

打开好窗口后输入：

vue ui

会收到一个地址，将该地址在浏览器打开，就可以看到可视化的面板：

选择好自己的存放路径，点击底部的在此创建项目，填写好自己的项目名称，选择好相应的包管理器，或者默认也行，按需打开填写git，点击下一步，选择好相应的预设，这里包含了vue2的和vue3两个预设，这里介绍手动配置预设：

功能区域，我们需要bable、Router、Vuex（看个人需求）、Linter/Formatter、使用配置文件。这几个选项，后续还可以自己添加，这里主要是引用相关的：

配置选项，这里需要选择vue的版本号、选择是否需要history模式，一般是否即可，linter选择ESLint+Standard config即可，最后一项默认即可：

预设的保存，这里就看自己的喜好了，这里我选择了放弃保存直接创建项目：

这样我们的项目就创建完成了：

当我们需要使用element UI 的时候，我们就可以使用插件的选项，点击添加插件，搜索：vue-cli-plugin-element点击，安装即可

安装好了之后，我们需要对element UI进行配置，需要在How do you want to import Element?选择第二项即可

我们在项目还需要使用axios，这时候我们需要在依赖的选项选择添加依赖，在运行依赖搜索axios，点击选择安装：

在配置选项，可以对Cli和ESLint进行一些约束

在任务一栏可以运行项目，同时也可以直接打包项目，关于打包，在本文的后续会介绍

点击运行项目后点击启动app就会打开窗口，看到hello world了

二、less的安装

在项目中不免需要使用less来简化使用，我们可以在可视化的依赖选项进行安装，也可以在VScode 的终端进行安装使用，但是我们需要注意使用对应的版本号来安装：

npm i less@2.7.3 --save
npm i less-loader@4.1.0 --save

三、vue-table-with-tree-grid的使用

在一些后台的表格里面需要植入一些树状的关系，自带的element UI解决不了，需要使用vue-table-with-tree-grid来解决：

我们需要安装引入使用：

npm i vue-table-with-tree-grid@0.2.4 --save

在项目的入口文件引入：

// 引入插件
import TreeTable from 'vue-table-with-tree-grid'

Vue.component('tree-table', TreeTable)

使用实例：

<tree-table border :show-row-hover="false" :expand-type="false" show-index index-text="#" :selection-type="false" :data="cateList" :columns="columns">
        <!-- 1 -->
        <template slot="isOk" slot-scope="{ row }">
          <i v-if="row.cat_deleted === false" class="el-icon-success" style="color: lightgreen"></i>
          <i v-else class="el-icon-error" style="color: red"></i>
        </template>
        <!-- 2 -->
        <template slot="order" slot-scope="{ row }">
          <el-tag v-if="row.cat_level === 0" size="mini">一级</el-tag>
          <el-tag v-else-if="row.cat_level === 1" type="success" size="mini">二级</el-tag>
          <el-tag v-else type="warning" size="mini">三级</el-tag>
        </template>
        <!-- 3 -->
        <template slot="opt">
          <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
        </template>
      </tree-table>

官网的地址：<MisterTaki/vue-table-with-tree-grid: A table (with tree-grid) component for Vue.js 2.0. (Its style extends @iView) (github.com)>其本质还是作用域插槽。

四、富文本编辑器vue-quill-editor的使用

在有的项目中需要使用富文本的编辑器vue-quill-editor，我们需要下载引入，使用：

npm i vue-quill-editor@3.0.6 --save

引入：

// 引入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
// 引入富文本css
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 注册
Vue.use(VueQuillEditor)

使用：

// 使用的方式以标签形式使用，v-model绑定值
 <quill-editor v-model="data"></quill-editor>

官网地址：<vue-quill-editor - npm (npmjs.com)>

五、时间过滤

在一些后台传来的数据是个时间戳，我们需要对数据进行格式化，我们也可以使用第三方的npm包来格式化，这里介绍函数解决，在入口文件定义好过滤器，注意：在vue3中弃用了过滤器，希望我们使用计算属性来解决；定义好过滤函数全局注册：

Vue.filter('dataFormat', (originVal) => {
  const dt = new Date(originVal)
  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDate() + '').padStart(2, '0')

  const hh = (dt.getHours() + '').padStart(2, '0')
  const mm = (dt.getMinutes() + '').padStart(2, '0')
  const ss = (dt.getSeconds() + '').padStart(2, '0')
  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

使用的时候，只需要在需要格式化的时间戳后面加上| dataFormat即可

六、项目的打包

配置开发和生产文件

在项目的开发和生产的版本，因为生产版本需要一定的速度优化，我们需要将main.js，也就是入口文件进行复制，在项目的开发版本使用main-dev.js，在生产版本使用main-prod.js，在我们使用npm run serve的时候让脚手架去配置指定main-dev.js，在使用npm run build的时候通知脚手架去使用main-prod.js，配置的方法是在vue.config.js文件下添加代码：

module.exports = {
  lintOnSave: false, // 关闭eslint检查
  chainWebpack: (config) => {
    // 发布
    config.when(process.env.NODE_ENV === 'production', (config) => {
      config.entry('app').clear().add('./src/main-prod.js')
    })
    // 开发
    config.when(process.env.NODE_ENV === 'development', (config) => {
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }
}

开启cdn加速

使用cdn去请求浏览器的资源加速网站的响应速度，我们需要在vue.config.js中的发布区域添加代码：

    // 发布
    config.when(process.env.NODE_ENV === 'production', (config) => {
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: 'lodash',
        echarts: 'echarts'
        // nprogress: 'nprogress' // 这个cdn也没有找到
        // 'vue-quill-editor': 'VueQuillEditor' // 这个cdn地址我没有找到
      })

      config.entry('app').clear().add('./src/main-prod.js')
    })

同时在public文件夹下的index.html文件可以添加cdn加速的代码：

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
  <title>管理系统</title>

    <!-- <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" /> -->
    <!-- 富文本编辑器 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />

    <!-- element-ui 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" />

    <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
    <!-- <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script> -->
    <!-- 富文本编辑器的 js 文件 -->
    <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script> -->

    <!-- element-ui 的 js 文件 -->
    <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
</head>

<body>
  <div id="app"></div>

</body>

</html>

修改html的版本控制

如果使用上面的方法，如果我们是开发版本也会同样去请求cdn，这也是不可取的，所以我们还需要在vue.config.js去配置一些代码：

// vue.config.js完整代码
module.exports = {
  lintOnSave: false, // 关闭eslint检查
  chainWebpack: (config) => {
    // 发布
    config.when(process.env.NODE_ENV === 'production', (config) => {
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: 'lodash',
        echarts: 'echarts'
        // nprogress: 'nprogress'
        // 'vue-quill-editor': 'VueQuillEditor'
      })

      config.entry('app').clear().add('./src/main-prod.js')

      config.plugin('html').tap((args) => {
        args[0].isProd = true
        return args
      })
    })
    // 开发
    config.when(process.env.NODE_ENV === 'development', (config) => {
      config.entry('app').clear().add('./src/main-dev.js')

      config.plugin('html').tap((args) => {
        args[0].isProd = false
        return args
      })
    })
  }
}

html完整代码：

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
  <title>
    <%= htmlWebpackPlugin.options.isProd?'':'dev-' %>管理系统
  </title>

  <% if(htmlWebpackPlugin.options.isProd){ %>
    <!-- <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" /> -->
    <!-- 富文本编辑器 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />

    <!-- element-ui 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" />

    <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
    <!-- <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script> -->
    <!-- 富文本编辑器的 js 文件 -->
    <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script> -->

    <!-- element-ui 的 js 文件 -->
    <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>

    <% } %>
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>

因为使用了cdn的方式使用，所以main-prod.js的一些需要应用的部分代码可以注销了：

import Vue from 'vue'
import App from './App.vue'
// import './plugins/element.js'
// 引入全局样式表
import './assets/css/config.css'
// 导入字体图标
import './assets/fonts/iconfont.css'
// 引入插件
import TreeTable from 'vue-table-with-tree-grid'
// 引入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
// 引入富文本css
// import 'quill/dist/quill.core.css'
// import 'quill/dist/quill.snow.css'
// import 'quill/dist/quill.bubble.css'
...

七、报告生成

在项目完成的时候需要对项目进行优化，我们需要通过对项目的代码大小进行优化，需要通过日志进行分析

方法一

我们需要在package.json的script添加代码：

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "report": "vue-cli-service build --report",
    "lint": "vue-cli-service lint"
  },

在终端运行：npm run report的命令生成的dist文件夹就会包含另外的html文件，打开就可以看到项目的大小

方法二

这个方法也是推荐的

我们的项目是用可视化创建的，在项目的任务区域，运行好项目之后就可以看见项目的大小了

八、开启gzip压缩

打包好的项目需要在服务器进行部署使用，在部署的时候需要开启开启gzip压缩进行压缩，先将打包好的dist文件夹放到目录下

下载相应的包：

npm i compression@1.7.4 --save

系列代码：

const express = require('express')
// 开启gzip压缩
const compression = require('compression')

const app = express()
// 使用
app.use(compression()) // 写在托管之前
// 配置静态文件
app.use(express.static('./dist'))

app.listen(80, () => {
  console.log('http://127.0.0.1')
})

使用node app.js运行代码，在浏览器输入：http://127.0.0.1浏览项目

九、pm2管理应用

项目通过在终端运行node .\app.js打开网站 关闭了终端就不能打开了 要想还能打开就要用pm2管理工具

我们需要全局安装：

npm i pm2 -g

报错就使用以管理员身份运行cmd窗口

安装好了之后，在服务器项目文件夹下运行代码：

pm2 start .\app.js --name <自定义文件名>
// 例如
pm2 start .\app.js --name demo

就会出现：

可能画面不太一样，总体差距不大，id是唯一的，后续我们直接使用id即可，比如：

启动项目: pm2 start脚本–name自定义名称
查看运行项目:pm2 ls
重启项目: pm2 restart 自定义名称
停止项目: pm2 stop 自定义名称
删除项目: pm2 delete 自定义名称

这个自定义的名称是自己取的，我们简单的就直接使用id即可，因为id是惟一的

这下我们就算关闭了小黑窗，在网站输入http://127.0.0.1依旧可以浏览项目了。