vue 撸后台笔记一

前言

本文是以 花裤衩 大佬的 vue-element-admin 项目为模板、结合公司需求开发的后台管理系统的学习笔记。

原项目地址：vue-element-admin
参考文章：手摸手用 vue 撸后台系列

安装与配置

新建 vue-cli 项目，相关安装及配置不多做介绍，有需要可自行搜索。接着是安装项目依赖。

基本依赖库：

• Vue-Router Vue.js 官方的路由管理器
• Axios 基于promise 的 HTTP 库
• Element-UI 为开发者、设计师和产品经理准备的基于 Vue2.0 的桌面端组件库
• Vuex 专为 Vue.js 应用程序开发的状态管理模式

扩展依赖库：

• node-sass css 扩展语言
• normalize.css 为默认的 HTML 元素样式上提供跨浏览器的高度一致性
• js-cookie 轻量级的 js 操作 cookie 的插件
• i18n Vue.js 的国际化插件，它可以轻松地将一些本地化特性集成到 Vue 中
• driver.js 轻量级、无需依赖但功能强大的原生 JavaScript，兼容所有主流浏览器，可帮助你将用户的注意力集中在页面上
• NProgress 细长的全站进度条
• SVG sprite loader 用于根据导入的 svg 文件自动生成 symbol 标签并插入 html
• Sortable 轻量级的拖放排序列表的 js 插件
• ECharts 功能强大的图表和可视化库
• screenfull 全屏插件
• mockjs 可以帮助前端独立于后端开发的数据模拟工具
• xlsx 各种电子表格格式的解析器和编译器

项目结构

├── build                   // 构建相关
├── config                  // 配置相关
├── disk                    // 打包文件
├── node_modules            // 依赖项
├── src                     // 源代码
│   ├── api                 // 所有请求
│   ├── assets              // 主题 字体等静态资源
│   ├── components          // 全局公用组件
│   ├── directive           // 全局指令
│       ├── waves           // 水波纹指令
│   ├── icons               // 项目所有 svg icons
│   ├── lang                // 国际化 language
│   ├── mock                // 项目 mock 模拟数据
│   ├── roter               // 路由
│   ├── store               // 全局 store 管理
│   ├── styles              // 全局样式
│   ├── utils               // 全局公用方法
│   ├── views               // views 所有页面
│       ├── dashboard       // 功能主页
│       ├── errorPage       // 错误页面
│       ├── layout          // 整体布局
│       ├── login           // 登录页面
│       ├── redirect        // 重定向页面
│       ├── statistics      // 数据统计页面
│   ├── App.vue             // 入口页面
│   ├── errorLog.js         // 错误日志
│   ├── main.js             // 入口文件 加载组件 初始化等
│   ├── permission.js       // 权限管理
├── static                  // 第三方不打包资源
├── .babelrc                // babel-loader 配置
├── .eslintrc.js            // eslint 配置项
├── .gitignore              // git 忽略项
├── favicon.ico             // favicon 图标
├── index.html              // html 模板
├── package.json            // 依赖项目录
├── README.MD               // 说明文档

几个主要文件夹与功能模块

api 与 views

根据项目的业务划分 views 页面展示部分，并将 api 接口请求与 views 一一对应，有利于迭代更新与后期维护。

components

将全局公用的模块与组件存放在 components 文件夹中，页面级的的组件建议还是放在各自的 views 文件夹下。

store

在 index 入口文件引入 modules 对象，独立封装各个模块状态。

axios

在 axios 配置档设置基础 URL，根据环境变量动态切换 api，需要在 config/dev.env.js 文件中配置接口路径。

后端对每次的请求都带上了 token 权限验证，所以我们需要在拦截器中自定义一个头部。

在跨域请求中，非简单请求（不是 get 、 post 或存在 多余的头部 ）时，浏览器会首先进行一次 OPTIONS 请求，这个请求来询问跨域是否被允许。 Access-Control-Request-Headers 就属于这个请求。其中的 cookiex 即我们自定义的头部，需在后端加入到 Access-Control-Request-Headers 中。

lang

将中英文语言包各自封装。

并在入口 index.js 配置导入。

在 main.js 使用 i18n。