前言
本文是以 花裤衩 大佬的 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 一款全屏插件
项目结构
├── 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 所有页面
│ ├── account // 账户管理
│ ├── court // 法院管理
│ ├── dashboard // 功能主页
│ ├── device // 设备管理
│ ├── errorPage // 错误页面
│ ├── layout // 整体布局
│ ├── login // 登录页面
│ ├── redirect // 重定向页面
│ ├── statistics // 数据统计页面
│ ├── versions // 版本管理页面
│ ├── writs // 文书管理页面
│ ├── 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 // 说明文档简单讲下 src 文件夹
api 与 views
根据项目的业务划分 views 页面展示部分，并将 api 接口请求与 views 一一对应，有利于迭代更新与后期维护。
components
将全局公用的模块与组件存放在 components 文件夹中，页面级的的组件建议还是放在各自的 views 文件夹下。
store
在 index 入口文件引入 modules 对象，独立封装各个模块状态。
axios
在 axios 配置档设置基础 URL，根据环境变量动态切换 api，需要在 config/dev.env.js 文件中配置接口路径。
lang
将中英文语言包各自封装
并在入口 index.js 配置导入
在 main.js 使用 i18n。
