说明
这是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint,这些搭建后台必要的东西。
目前版本为 v4.0+
基于 vue-cli
进行构建,若你想使用旧版本,可以切换分支到tag/3.11.0,它不依赖 vue-cli
。
工程目录结构
├── build # 自动化构建脚本
├── mock # 项目mock 模拟数据
├── node_modules # 加载的所有依赖
├── public # 静态资源
│ │── favicon.ico # favicon图标
│ └── index.html # html模板
├── src # 源代码
│ ├── api # 所有axios请求
│ ├── assets # 主题 字体等静态资源
│ ├── components # 全局公用组件
│ ├── directive # 全局指令
│ ├── filters # 全局 filter
│ ├── icons # ElementUI图标 项目扩展图标
│ ├── lang # 国际化 language
│ ├── layout # 全局 layout
│ ├── router # 路由
│ ├── store # 前端存储 store管理
│ ├── styles # 全局样式
│ ├── utils # 全局公用方法
│ ├── vendor # 公用vendor
│ ├── views # views 所有页面
│ ├── App.vue # vue的入口页面
│ ├── main.js # 应用程序的脚本入口文件 加载组件 初始化等
│ └── permission.js # 权限管理
├── tests # 测试
├── .env.xxx # 环境变量配置
├── .eslintrc.js # eslint 配置项
├── .babelrc # babel-loader 配置
├── .travis.yml # 自动化CI配置
├── vue.config.js # vue-cli 配置
├── postcss.config.js # postcss 配置
└── package.json # package.json
工程搭建
-
进入工作区
-
搭建基础环境
# 克隆项目 git clone https://gitee.com/PanJiaChen/vue-admin-template.git # 进入项目目录 cd vue-admin-template # 安装依赖 npm install # 建议不要直接使用 cnpm 安装依赖,会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=https://registry.npm.taobao.org # 启动服务 npm run dev
浏览器访问: http://localhost:9528
-
修改项目文件夹名称
-
修改项目信息
配置
package.json
-
修改端口号
配置
vue.config.js
-
修改浏览器地址栏标题
配置
src/settings.js
-
修改浏览器地址栏图标
将自己制作好的图标命名为
favicon.ico
覆盖掉public/favicon.ico
文件 -
设置国际化:中文
配置
src/main.js
-
修改登录页面相关
配置
src/views/login/index.vue
-
修改首页标题
配置
src/router/index.js
-
修改首页用户下拉列表
配置
src/layout/components/Navbar.vue
-
修改首页面包屑根标签
配置
src/components/Breadcrumb/index.vue
-
配置首页左侧导航栏
见配置路由相关内容。构建路由的同时,首页左侧导航栏根据构建路由的信息自动构建。
配置语法检查
1. ESLint介绍
JavaScript是一个动态的弱类型语言,在开发中比较容易出错。因为没有编译程序,为了寻找JavaScript 代码错误通常需要在执行过程中不断调适。
ESLint是一个语法规则和代码风格的检查工具[可以用来保证写出语法正确、风格统一的代码。让程序员在编码的过程中发现问题而不是在执行的过程中。
2. ESLint语法规则
ESLint内置了一些规则,也可以在使用过程中自定义规则。
本项目的语法规则包括:
- 两个字符缩进,必须使用单引号,不能使用双引号
- 语句后不可以写分号
- 代码段之间必须有一个空行
3. 安装ESLint插件
-
安装插件
-
开启ESLint校验
点击右下角ESLint —> Allow Everywhere
-
开启自动修复
点击左下角齿轮 —> settings —> Extensions —> ESLint —> Edit in settings.json
从
2.0.4
版本开始,ESLint扩展就移除了autoFixOnSave配置项。因为保存自动修复成为了vscode的Code Action on Save的一部分,需要在editor.codeActionsOnSave配置项中进行配置。
配置自定义组件
1. 创建自定义组件
-
在
src/views
目录下创建自定义组件目录(建议为项目名) -
在
src/views/afterlives
目录下创建自定义组件子目录(建议为模块名) -
在
src/views/afterlives/user
目录下创建自定义组件
2. 自定义组件结构
配置路由
-
进入
src/router/index.js
-
路由配置位置
{ path: '*', redirect: '/404', hidden: true }
必须放在最后,表示如果没有路由匹配,就跳转404。
-
构建路由
- 如果父组件的 path: '/user',子组件的 path: 'list'。那么只有'/user/list'才能访问到该子组件。
- redirect: '/user/list' 表示父组件的 path: '/user' 被请求时,默认跳转到 '/user/list' 。
- 任何组件的name不能重复。
- hidden: true 表示该子组件不显示在左导航,但是可以链接进入页面。
- import('@/views/afterlives/user/List') 引入组件时,不需要加组件的文件后缀名".vue"。
配置API
1. 配置后台API
-
编辑
.env.development
-
在
vue.config.js
中配置proxyproxy: { [process.env.VUE_APP_BASE_API]: { target: process.env.VUE_APP_BASE_API, changeOrigin: true, //配置跨域 pathRewrite: { ['^' + process.env.VUE_APP_BASE_API]: '' } } }
-
在
vue.config.js
中将open属性改为false -
在
vue.config.js
中注释掉mock.js注入 -
在
package.json
的启动命令中加上 --open -
在
main.js
中注释mock生成数据
2. 创建API
-
在
src/api
目录下创建目录(建议为模块名) -
在
src/api/user
目录下创建API集合(建议为实体名) -
API内容配置
3. 调用API
配置图标
1. 图标获取
将vue-element-admin
项目中src/icons/svg
路径下所有svg
图标文件拷贝到本项目的src/icons/svg
中。
2. 自定义引入图标
-
进入
src/icons/svg
查看当前项目有哪些图标 -
在组件需要处中引入图标
icon-class="link" 直接配置图标的文件名。
3. 导航栏引入图标
进入src/router/index.js
修改路由的icon属性引入图标
icon: 'link' 直接配置图标的文件名。