Vue-后台管理笔记

创建2021-03-11更新2021-09-16阅读时间19m

开始vue项目笔记
目标：快速构建，明确需求，整理实用组件和工具库

学习链接

vue-element-admin文档学习
登录篇
后台基础模板

文档总结

跟着思路来写总结！

介绍
布局
路由和侧边栏
权限验证
快捷导航
新增页面
样式
服务端交互
Mock Data
引入外部模块
构建发布

介绍

这里内容是集成的后台管理系统，内容很多，按需获取。

  1. 功能
    登录/ 注销

  2. 权限验证
    页面权限/指令权限/权限配置/二步登录

  3. 全局功能
    国际化多语言/动态换肤/动态侧边栏/动态面包屑/标签页/svg sprite图标
    mock数据/Screenfull全屏/自适应收缩侧边栏

  4. 编辑器
    富文本/Markdown/Json等

  5. Excel
    导出excel/导入excel/前端可视化excel/导出zip

  6. 错误页面
    401/404

布局

  1. 项目结构，了解项目内容
    build-构建相关
    mock-模拟数据
    plop-templates-基本模板
    public-静态资源-favicon图标，html模板
    src——核心
    api-所有请求
    assets-主题，字体等静态资源
    components-全局公用组件
    directive-全局指令
    filters-全局filter
    icons-项目svg icons
    lang-国际化language
    layout-全局layout
    router-路由表
    store-全局store管理
    utils-全局公用方法
    vendor-公用vendor
    views-核心页面
    App.vue-入口页面
    main.js-入口文件、加载组件、初始化
    permission.js -权限管理
    tests
    .env.xxx
    .eslintrc.js
    .babelrc
    .travis.yml-自动化CI配置
    vue.ocnfig.js
    postcss.config.js
    package.json

  2. Layout
    包含导航、侧边栏、面包屑、标签页及内容
    路由渲染的时候，内容写入一级路由就可以，子路由也会带上。

  3. app-main
    外部包裹了一层keep-alive，为了缓存router-view，配合tabs-view使用的

  4. router-view
    默认情况下这两个页面切换时并不会触发 vue 的 created 或者 mounted 钩子
    可以简单的在 router-view 上加上一个唯一的 key，来保证路由切换时都会重新渲染触发钩子了。

路由和侧边栏

关键核心部分
在侧边栏动态生成路由
根据路由里面的配置项来生成
meta
roles-路由权限设置
title-设置路由在侧边栏和面包屑中的名字
icon-设置该路由的图标
noCache-是否被缓存
breadcrumb-是否在面包屑中显示
affix-固定
activeMenu-点击高亮

路由：
constantRoutes-默认设置的路由
asyncRoutes-需要动态判断的路由-利用addRoutes动态加载

侧边栏：
基于el-menu、submenu和el-menu-item

权限验证

获取用户的权限，比对路由表
通过router.addRoutes动态挂载到router上

前端格局roles去向后端请求可访问的路由表

逻辑修改的地方在permissio.js中

用v-permission来实现按钮级别的权限判断-通过按钮改变权限

快捷导航

运用keep-alive和router-view结合

来说router-link，点击跳转

监听路由$route的变化，判断当前页面是否需要重新加载或以被缓存

这样的是有问题的，两者的name一定要一样，才能关联，这不符合要求
可利用localStorage来进行缓存处理

新增页面

需要先添加路由

需要二级路由才会有内容，不然只有layout组件

如果只有一个路由，就没有下拉箭头，这是可以判断的

如果有多级路由，一定要在二级路由的根文件下添加router-view，用来渲染

新增路由，要在views文件夹下创建对应的文件夹，可在里面创建自己的utils或components文件
自己维护自己，私有/公有

最后在api文件下创建本模块对应的api服务

！！！拆分组件的最大好处不是公用而是可维护性，学的人也能看得懂

也可以在自己文件夹设置样式，请加上scoped

样式

所有的全局样式都写在styles目录下面，每个页面自己对应的样式都写在自己的文件中
添加scoped

自定义element-ui样式
添加命名空间

想修改添加了scoped的子组件
>>> 或sass的/deep/

服务端交互

一个完整的前端UI交互到服务器处理流程

  1. UI 组件交互操作；
  2. 调用统一管理的 api service 请求函数；
  3. 使用封装的 request.js 发送请求；
  4. 获取服务端返回；
  5. 更新 data；

统一把请求放在api文件夹中

request.js是放在公共工具中的
基于axios的封装，统一处理get、post请求
封装了全局request拦截器、response拦截器、统一的错误处理、统一超时设置、baseURL设置

设置多个baseURL
通过环境变量来设置，从而请求不同的api地址

从mock直接切换到服务器请求

Mock Data

Mock数据是前端必不可少的，是前后分离的关键，模拟服务器连接的接口，模拟请求数据甚至逻辑

swagger，一个rest apis文档生成工具

在本地启动mock-server来模拟数据，我们的 mock 是完全基于webpack-dev-serve来实现的，
所以在你启动前端服务的同时，mock-server就会自动启动

如果你不想使用mock-server的话只要在vue.config.js中移除webpack-dev-server中proxy和after这个Middleware就可以了。

如果想添加 mock 数据，只要在根目录下找到mock文件，
添加对应的路由，对其进行拦截和模拟数据即可。

待后端完成接口后，逐步替换掉原先 mock 的接口。
只要在mock/role/index.js找到对应的路由，之后将它删除即可。

现在在mock/index.js也封装了一个纯前端 mock 的方法，你只需要在src/main.js中：

1
2
import { mockXHR } from '../mock'
mockXHR()

引入外部模块

引入依赖
npm install vue-count-to --save
加上 –save 参数会自动添加依赖到 package.json 中去。

使用：
全局注册-在main.js中，引入，使用

1
2
import countTo from 'vue-count-to'
Vue.component('countTo', countTo)--这样就可以在组件中使用了

局部注册
三步走
import components < countTO…

第三方库使用
挂载到vue原型上，大家都可以使用了

1
2
import moment from 'moment'
Object.defineProperty(Vue.prototype, '$moment', { value: moment })

也可以直接封装一个组件–待学习
只要在合适的生命周期里面初始化它就好了。一般在 mounted中，可正常使用了

构建发布

构建，一般只有一行命令就可以了

1
2
3
4
5
# 打包正式环境
npm run build:prod

# 打包预发布环境
npm run build:stage

构建打包成功之后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件，通常是 .js 、.css、index.html 等静态文件。

环境变量
所有测试环境或者正式环境变量的配置都在 .env.development等 .env.xxxx文件中。
它们都会通过 webpack.DefinePlugin 插件注入到全局。
环境变量必须以VUE_APP_为开头。如:VUE_APP_API、VUE_APP_TITLE

分析构建文件体积
可以通过 webpack-bundle-analyzer 命令构建并分析依赖模块的体积分布，从而优化你的代码。
npm run preview -- --report
强烈建议开启 gzip

发布
只需要将最终生成的静态文件，也就是通常情况下 dist 文件夹的静态文件发布到你的 cdn 或者静态服务器即可
其中的 index.html 通常会是你后台服务的入口页面

部署时可能会发现资源路径不对 ,只需修改 vue.config.js 文件资源路径即可。

前端路由与服务端的结合
前端路由使用的是 vue-router，所以你可以选择两种方式：browserHistory 和 hashHistory。
hashHistory 是以 # 后面的路径进行处理，通过 HTML 5 History 进行前端路由管理，
而 browserHistory 则是类似我们通常的页面访问路径，并没有 #，但要通过服务端的配置

环境变量
.env # 在所有的环境中被载入
.env.[mode] # 只在指定的模式中被载入

环境变量必须以VUE_APP_为开头。如:VUE_APP_API、VUE_APP_TITLE

除了一些写在.env的环境变量之外，还有一些构建和部署相关的变量都是需要在vue.config.js中配置的。

进阶

跨域问题

两种
cors 全称为 Cross Origin Resource Sharing（跨域资源共享）–工作量基本在后端

推荐的原因是：只要第一次配好了，之后不管有多少接口和项目复用就可以了，一劳永逸的解决了跨域问题，
而且不管是开发环境还是正式环境都能方便的使用。详细 MDN 文档

proxy-通过搭建一个中转服务器来转发请求规避跨域的问题。-纯前端

Eslint

代码规范
eslint+vscode 来写 vue–标红不符合 eslint 规则的地方，同时还会做一些简单的自我修正。
自动修复npm run lint -- --fixeslint 会自动修复一些简单的错误。

风格指南

重要！！！推荐vue官方风格指南。。
所有的Component文件，都以大写开头

@/components/BackToTop/index.vue
@/components/Charts/Line.vue
@/views/example/components/Button.vue

所有的.js文件都遵循横线连接

@/utils/open-window.js
@/views/svg-icons/require-icons.js
@/components/MarkdownEditor/default-options.js

在Views文件下
代表路由的.vue文件都使用横线连接 -需要和component进行区分
页面的url 也都是横线连接的，比如https://www.xxx.admin/export-excel

@/views/svg-icons/index.vue
@/views/svg-icons/require-icons.js

路由懒加载

const Foo = () => import(‘./Foo.vue’)

图表

推荐 ECharts，功能齐全，社区 demo 也丰富
ECharts 本身并不是自适应的
需要手动调用它的 .resize()
建议按需引入

1
2
3
4
5
6
7
8
9
10
// 按需引入 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/bar')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

//全部引入
var echarts = require('echarts')

CDN

很多文章说使用 CDN 引入的方式能大大减小代码的体积，这是不可能的。虽然打包完的 bundle小了，
但那部分代码只是被你拆出去，用CDN的方式引入罢了。你想减小体积，最高效的方案是启用GZIP。

使用CDN引入的方式等于一些第三方依赖的版本你是通过package.json来控制的，
一些依赖则需要手动维护，增加了一些维护成本。

更换主题

，所以你想在某个view里面覆盖它的样式就不能加 scoped，
但你又想只覆盖这个页面的 element 样式，你就可在它的父级加一个 class，
以用命名空间来解决问题。或者使用深度作用选择器

1
2
3
4
5
6
7
/* 你的命名空间 */
.article-page {
  /* element-ui 元素 */
  .el-tag {
    margin-right: 0px;
  }
}

动态换肤

这里需要获取 element-ui 的版本号，从而锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。

国际化

集合了国际化 i18n 方案。通过 vue-i18n而实现。

错误处理

页面
页面级的错误处理由 vue-router 统一处理，所有匹配不到正确路由的页面都会进 404页面。

请求
项目里所有的请求都会走@/utils/request.js里面创建的的 axios 实例，它统一做了错误处理
根据response拦截器中的状态码来处理

代码
通过eslint处理

Webpack指南

这里分享的是链接：写完看完它！！！

个人实践

开始自己做一遍！
第一步，建立gitee仓库，可以线上演示。
创建vue项目，现在本地运行初始化，可以运行。上传gitee
遇到问题：404
把项目打包，配置vue.config.js里面的路径需要配置，dist目录生成
参考地址

可以在线上点开了，第二步，搭建环境
清空初始化文件
下载依赖包-按照作者的版本下载，可以减少问题
安装好，开始配置，写入main.js
写入normalize.css，启动element-ui
可以运行基本element-ui组件。

第三步，创建内容-创建文件夹。。

  1. 创建组件-根据作者结构来-基本内容OK
  2. 创建路由表-根据需求来
  3. 创建全局样式-全局公共样式抽离

组件基本结构，一个主要的，其他组件在主要文件中引入。
公共组件名字大写！！！
公共组件放入components中

先写layout组件，作为后台管理系统的核心部分，几乎每一个页面都要用到
index.vue里面引入了layout自身的组件

Layout里面的组件有侧边栏、导航栏、主页面
侧边栏用动态加载路由来配置，需要传递值-Vuex

创建完Layout基础部分，设置store里面内容
出现问题，如何import { Navbar, Sidebar, AppMain } from './components'
需要一个index.js文件

1
2
3
export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar'
export { default as AppMain } from './AppMain'

问题总结

打包后报404

卡在了webpack打包上面….gitee上面运行不出来..