了解vue-element-admin
目标
了解和熟悉通用的基于vue技术栈的后台系统社区解决方案 vue-element-admin
方案介绍
是开发后台管理系统的一个比较完备的前端解决方案:
- 基于 vue 和 element-ui实现
- 内置了 i18 国际化解决方案,动态路由,权限验证
- 提炼了典型的业务模型
- 提供了丰富的功能组件
- 内部集成了PC项目中很多的业务场景和功能
它可以帮助你快速搭建企业级中后台产品原型,
本地运行体验
把这份项目代码拉到本地运行一下,查看效果。
# git clone https://github.com/panjiachen/vue-element-admin.git # 从github上拉取代码
$ git clone https://gitee.com/mirrors/vue-element-admin.git # 从码云上拉取
$ cd vue-element-admin # 切换到具体目录下
$ npm install # 安装所有依赖
$ npm run dev # 启动开发调试模式 查看package.json文件的scripts可知晓启动命令
注意
:
- 如果git clone 速度过慢或者报错,可以:直接下载代码的压缩包运行(gitee.com/mirrors/vue…)
- 如果安装依赖特别慢,可以使用淘宝镜像:
npm config set registry https://registry.npm.taobao.org
如果使用yarn下载安装包,就请一直使用yarn,而不要与npm 混在一起使用
运行效果
下载安装包完成之后,通过npm run dev
来启动项目。
小结
vue-element-admin
内置了后台管理业务场景下大部分的解决方案,我们可以在左侧的导航栏里看到它们。这些方案不是每一个项目都需要的,如果我们实际的业务中需要,可以拿来参考,所以它起到的作用更多的是一个参考价值,而不适合直接使用进行二次开发
如果要回乡开个小卖店创业,是选择参考沃尔玛超市,还是便利蜂?
了解 vue-admin-template
vue-element-admin是一个非常全面的系统,提供了很多现成的方案,我们可以在写项目的时候过来参考,但是也有缺点:不太好进行二次开发,因为要删减的东西太多了。
我们可以采取另外一个子系统,叫做vue-admin-template ,它提供了最基础的模板,非常方便来做二次开发。
在线运行效果:panjiachen.gitee.io/vue-admin-t…
目标
下载熟悉 vue-admin-template (官方文档)
运行体验
$ git clone https://gitee.com/panjiachen/vue-admin-template.git # 从码云拉取代码
$ cd vue-admin-template #切换到具体目录下
$ npm install #安装所有依赖
$ npm run dev #启动开发调试模式 查看package.json文件的scripts可知晓启动命令
如果npm install 总是出错,看官网说明
预览效果如下
小结
vue-admin-template
是在vue-element-admin
的基础上做了大量的删减,只保留了后台管理系统最关键的框架部分,非常适合我们在此基础上做二次开发- 市面上使用vue技术栈开发的PC后台管理项目很大一部分都是基于
vue-admin-template
进行的二次开发,我们的人资项目也基于它来实现。 - 克隆仓库代码时,可能网络不好,可以直接CV
创建本地项目并关联远程仓库
目标
将vue-admin-template项目改成我们自己的项目,并关联到远程仓库进行管理
本地项目初始化
由于我们前边下载的项目是直接从 vue-admin-template **克隆
**而来,里面拥有原项目的提交记录,为了避免冲突,我们要先删除掉之前的提交,再做初始化。
步骤有三步:
-
先将vue-admin-template下原来的 **
.git
**文件夹删除掉 (这个文件夹默认情况下是隐藏的,如果你看不到这个文件夹,则需要去设置一下显示隐藏文件夹) -
修改项目信息
- 重命名项目文件夹,把vue-admin-template的改成vue-hr(或者其它的名字)
- 修改package.json中的说明。
-
项目进行git初始化
$ git init # 初始化项目, 这句命令会新建一个.git文件夹 $ git add . # 将修改添加到暂存 $ git commit -m "人资项目初始化" # 将暂存提到本地仓库
经过上面的步骤,它就变成我们自己的项目了
建立远程仓库
在gitee上创建一个与本地同名的、 空的 、公开的远程仓库。
推送到远程仓库
有两句命令(并不需要记忆,在gitee空仓库中会有具体的提示)
- 建立关联
$ git remote add origin <远程仓库地址> #添加远程仓库地址
# git remote add origin https://gitee.com/用户名/项目名.git
- 推送master分支到远程仓库
$ git push -u origin master
#将master分支推送到origin所代表的远程仓库地址
检查效果
去你自己的gitee上看一下,是否有刚才提交的代码。
小结
- 二次开发:把别人做的半成品改成自己的项目。
- 删除git提交记录
- 修改项目信息
-
关联远程仓库:
- 创建同名的、空的、公共的远程仓库
- 运行两句命令
认识vue-admin-template的目录
背景
一般进入公司后,会有一段时间(1周左右)来熟悉项目。
目标
认识vue-admin-template的目录
目录结构
本项目已经生成了一个基本的开发框架,提供了涵盖中后台开发的各类功能和现成目录,下面是整个项目的目录结构
├── build # 构建相关
├── mock # 项目mock 模拟数据,在接口服务器没有就绪时,临时充当接口
├── public # 静态资源
│ ├── favicon.ico # favicon图标
│ └── index.html # html模板
├── src # 源代码
│ ├── api # 所有请求
│ ├── assets # 主题 字体等静态资源 不会参与打包 直接直出
│ ├── components # 全局公用组件 和业务不相关 上传组件
│ ├── icons # 项目所有 svg icons
│ ├── layout # 全局 layout 负责搭建项目的整体架子结构 html结构
│ ├── router # 路由
│ ├── store # 全局 store管理 vuex管理数据的位置 模块化开发 全局getters
│ ├── styles # 全局样式
│ ├── utils # 全局公用方法 request.js
│ ├── vendor # 公用vendor
│ ├── views # views 所有页面 路由级别的组件
│ ├── App.vue # 入口页面 根组件
│ ├── main.js # 入口文件 加载组件 初始化等
│ └── permission.js # 权限管理
│ └── settings.js # 配置文件
├── tests # 测试
├── .env.xxx # 环境变量配置
├── .eslintignore # eslint 忽略文件
├── .eslintrc.js # eslint 配置项
├── .gitignore # git 忽略文件
├── .travis.yml # 自动化CI配置
├── .babel.config.js # babel-loader 配置
├── jest.config.js # 测试配置
├── vue.config.js # vue-cli 配置
├── postcss.config.js # postcss 配置
└── package.json # package.json
此时,你可能会眼花缭乱, 因为生成的目录里面有太多的文件,但是我们要有个基本的认知:
- src目录:在做项目时,最关注的就是**
src
**目录, 里面是所有的源代码和资源 - 非src目录:一般都是对项目的环境和工具的配置
小结
vue-admin-template的目录结构比较复杂,其中的每个文件和目录都有自己的含义,我们重点关注src目录
认识src目录熟悉项目的运行机制
目标
认识项目中的src下的关键文件,熟悉项目的运行机制
目录结构
├── src # 源代码
│ ├── api # 所有请求
│ ├── assets # 主题 字体等静态资源
│ ├── components # 全局公用组件
│ ├── icons # 项目所有 svg icons
│ ├── layout # 全局 layout
│ ├── router # 路由
│ ├── store # 全局 store管理
│ ├── styles # 全局样式
│ ├── utils # 全局公用方法
│ ├── vendor # 公用vendor
│ ├── views # views 所有页面
│ ├── App.vue # 入口页面
│ ├── main.js # 入口文件 加载组件 初始化等
│ └── permission.js # 权限管理
│ └── settings.js # 配置文件
整体运行方式
重点文件
main.js
main.js是整个项目的入口文件(webpack中学习的入口文件)
App.vue
App.vue是根组件
permission.js (先把内容注释掉)
permission.js
是控制页面登录权限的文件,在main.js中引入了它。
此处的代码没有经历构建过程会很难理解, 所以先将此处的代码进行注释,等我们构建权限功能时,再从0到1进行构建。请直接注释代码即可
settings.js
对于一些项目信息的配置,里面有三个属性
title
(项目名称),fixedHeader
(固定头部),sidebarLogo
(显示左侧菜单logo)
**settings.js
**中的文件在其他的位置会引用到,我们不用动它
Vuex(把user.js内容注释掉)
当前的Vuex结构采用了模块形式进行管理共享状态,其架构如下
其中app.js模块和settings.js模块,功能已经完备,不需要再进行修改。 user.js模块是我们后期需要重点开发的内容,所以这里我们将user.js里面的内容删除,并且导出一个默认配置
store/modules/user.js
export default {
namespaced: true,
state: {},
mutations: {},
actions: {}
}
scss
该项目还使用了scss作为css的扩展语言,在**
styles
**目录下,我们可以发现scss的相关文件,相关用法 我们会在下一小节进行详细讲解
icons
图标字体使用,icons的结构如下
小结
- 所有vue项目的关键文件都基本相同,可以理解为都是用vue脚手架工具创建出来的;
- vue-admin-template额外做了一些配置,我们可以直接使用;
作业- 当我们进入主页时,加载了哪些组件?
用文字或者图示写出来
http://localhost:9528/#/dashboard
SCSS-了解和基本使用
目标
了解scss的作用;
sass、scss、less、css的区别
less, sass, scss都是css预处理语言(也是对应的文件后缀名),它们的语法功能比css更强大。
预处理语言使用是:开发时用预处理语言,在打包上线时,用webpack再配合loader工具给转成css(Cascading Style Sheets)给浏览器使用。
细节:
-
后缀名:SASS(Syntactically Awesome StyleSheets)版本3.0之前的后缀名为.sass,而版本3.0之后的后缀名.scss
-
语法规范:
sass没有
{}
和;
, 有严格的缩进规范 ;scss和css的缩进规范是一致的
我们在实际开发过程中,scss是常用写法
搭建小型测试环境
单独创建一个文件夹来学习scss的使用,为了方便应用scss,我们可以在vscode中安装一个名为**easy sass
** 的插件,它会自动的帮助我们把.scss => .css
目标结构
|- index.html
|- scss/
|------test.scss
步骤
-
新建一个文件夹learn-scss
-
在learn-scss下新建一个index.html
<link rel="stylesheet" href="./scss/test.css"> <div id="app"> <div class="container">container</div> </div>
-
新建一个scss文件夹,里面新建一个 test.scss
vscode的插件会自动把.scss文件翻译成.css文件
小结
scss和less一样,是预处理语言;
在vscode中有现成的工具可以把它转成css(在vue项目中不需要用这个功能---webpack会帮我们做);
SCSS-基本语法
目标
学习scss预处理器的基础语法 ;
变量
定义
sass
使用$
符号来标识变量
$highlight-color: #f90;
$basic-border: 1px solid black;
上面我们声明了名为 $highlight-color
和$basic-border
的变量, 随后我们就可以使用变量了。
使用
#app {
background-color: $highlight-color;
border: $basic-border;
}
我们再来看一下模板中的 styles/variables.scss
,这个文件中就是我们本次项目用到的所有scss变量
嵌套语法
和less一样,scss同样支持**嵌套型
**的语法
// scss语法
$highlight-color: #f90;
$basic-border: 1px solid black;
#app{
background-color: $highlight-color;
border:$basic-border;
.container{
font-size:30px;
}
}
转化成css后
#app {
background-color: #f90;
border: 1px solid black;
}
#app .container {
font-size: 30px;
}
&父选择器
假如你想针对某个特定子元素 进行设置
$highlight-color: #f90;
$basic-border: 1px solid black;
#app{
background-color: $highlight-color;
border:$basic-border;
.container{
font-size:30px;
}
a{
color:blue;
&:hover{
color: red;
}
}
}
模块
一个.scss文件就是一个模块,多个.scss文件之间可以相互引用。例如:在一个.scss文件(base.scss)定义多个变量,然后在另一个.scss(test.scss)中引入这个文件,就可以使用其中定义的变量了
格式
@import './xxxx.scss';
示例
新建base.scss
,并定义变量
$base-color: green;
在test.scss
中引入base.scss
@import './base.scss';
$highlight-color: #f90;
$basic-border: 1px solid black;
#app{
background-color: $base-color;
border:$basic-border;
.container{
font-size:30px;
}
a{
color:blue;
&:hover{
color: red;
}
}
}
小结
scss与less类似,只是一种css样式的预处理语言 (浏览器不能直接使用的,需要转成css)
很多用法都与less类似(变量,嵌套,模块化)不需要花太多精力去学习它。
复习了解axios模块的封装(重置代码)
在当前项目中,axios的封装已经基本完成,后续我们还会对它进行少量修改。项目关于axios的封装在 utils/request.js
中,我们先去熟悉一番。
目标
复习axios的统一封装处理
内容
- 回顾前边学习axios的封装内容
- 整理项目中关于axios部分的代码
创建axios实例
create创建新的axios实例
// 创建了一个新的axios实例
const service = axios.create({
// http://ihrm-java.itheima.net
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
timeout: 5000 // 超时时间
})
axios的拦截器
请求拦截器
请求拦截器主要完成 token的**统一注入
**
// axios的请求拦截器
service.interceptors.request.use(
config => {
if (store.getters.token) {
config.headers['X-Token'] = getToken()
}
return config
},
error => {
console.log(error)
return Promise.reject(error)
}
)
响应拦截器
响应拦截器主要处理 返回的**数据异常
** 和**数据结构
**问题
// 响应拦截器
service.interceptors.response.use(
response => {
const res = response.data
// if the custom code is not 20000, it is judged as an error.
if (res.code !== 20000) {
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
})
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// to re-login
MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
confirmButtonText: 'Re-Login',
cancelButtonText: 'Cancel',
type: 'warning'
}).then(() => {
store.dispatch('user/resetToken').then(() => {
location.reload()
})
})
}
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
重置代码
这里为了后续更清楚的书写代码,我们将原有代码注释掉,换成如下代码utils/request.js
// 导出一个axios的实例 而且这个实例要有请求拦截器 响应拦截器
import axios from 'axios'
const service = axios.create() // 创建一个axios的实例
// service.interceptors.request.use() // 请求拦截器
// service.interceptors.response.use() // 响应拦截器
export default service // 导出axios实例
小结
-
axios的封装是一个必须要做的操作,在前边的项目中我们是手动自己封装的,而在这个项目中已经集成好了;
-
一般来讲封装的内容有三个:
- axios.create
- 请求拦截器
- 响应拦截器
复习理解api模块的单独封装(重置代码)
在项目文件中,它已经帮我们封装好了各个模块功能对应的api(后端接口)操作,为了后边操作方便,我们先来学习一下它的封装方式。
目标
理解api模块封装的方法
目录结构
├── src # 源代码
│ ├── api # 所有请求
│ └── ├── user.js # 与用户相关的请求
我们习惯性的将所有的网络请求 放置在api目录下统一管理,然后进一步按照模块功能来进行划分api目录
代码分析
api/user.js
import request from '@/utils/request'
export function login(data) {
return request({
url: '/vue-admin-template/user/login',
method: 'post',
data
})
}
export function getInfo(token) {
return request({
url: '/vue-admin-template/user/info',
method: 'get',
params: { token }
})
}
export function logout() {
return request({
url: '/vue-admin-template/user/logout',
method: 'post'
})
}
上面代码中使用了封装的request工具,每个接口的请求都单独**导出
**了一个方法,这样做的好处就是:
- 每一个文件就是一个业务对应的所有服务请求接口汇总,清晰明了,查找方便 (方便维护)
- 任何一个业务组件中如果想使用哪个接口直接导入即可 (方便复用)
- 语义化清晰,维护方便 (命名即注释)
- 分工合作
示意图
操作
为了后续更好的开发,我们可以先将user.js代码的方法设置为空,后续在进行修改
api/user.js
import request from '@/utils/request'
export function login(data) {
}
export function getInfo(token) {
}
export function logout() {
}
处理公共资源图片和样式
以上我们已经将整体的基础模块进行了简单的介绍,接下来,我们需要将该项目所用到的图片和样式进行统一的处理
目标
从给定的资源目录中导入项目用到的公共资源(图片资源和样式资源)
思路
按项目目录约定,将相关资源拷贝进来即可(cv)。
处理图片资源
图片资源在课程资料的图片文件中,我们只需要将**common
**文件夹拷贝放置到 **assets
**目录即可
assets目录下的图片不会经过打包的过程 直接产出
处理样式资源
样式资源在 项目资源/样式
目录下,复制过来覆盖即可:
- 替换**
variables.scss
** - 新增**
common.scss
**
我们提供了 一份公共的**common.scss
**样式,里面内置了一部分内容的样式,在开发期间可以帮助我们快速的实现页面样式和布局;
将两个文件放置到src/styles
目录下,然后在**index.scss
**中引入该样式
@import './common.scss'; //引入common.scss样式表
注:每个网站都有自己的专业的配色风格,这是由设计统一设计的,我们前端需要做的,就是按照设计的要求定义好全局配色变量,网站中使用即可,如果需要替换设计风格,其实也就是替换全局配色变量
测试接口服务器
目标
用postman工具,测试接口服务器的功能
操作
localhost:3000/api/sys/login
13800000002, 123456
只有登陆接口是不需要token,其它接口还是需要token的,测试起来不方便。
环境变量-认识环境变量
目标
理解环境变量的作用,能设置和使用环境变量
认识环境变量-端口配置
问题:前端项目启动时,占用端口号9528
,是在哪里定义的呢?
答:
在vue.config.js中配置的。下边我们来学习一下它的用法,从而了解环境变量的使用。
vue.config.js
就是vue项目相关的编译,配置,打包,启动服务相关的配置文件,它的核心在于webpack,相当于在webpack的基础上又做了一次抽象。官网地址: 地址
下图是开发环境服务端口的在vue.config.js中 位置
我们看到上面的 process.env.port
实际上是一个nodejs服务下的环境变量,我们学习了一个新词,叫做环境变量
环境变量的配置文件
在一些特殊的配置文件中定义环境变量
文件名称 | 对应环境 | 说明 |
---|---|---|
.env.development | 开发环境 | 当运行npm run dev 的时候会以此文件为配置文件,这个文件中可以定义针对开发环境的环境变量 |
.env.production | 生产环境 | 当运行npm run build:prod 的时候会以此文件为配置文件,这个文件中可以定义针对开发环境的环境变量 |
.env.staging | 模拟生产环境 | 可以理解为production环境的镜像, 尽最大可能来模拟产品线上的环境(硬件,网络拓扑结构,数据库数据) |
在项目运行的过程中,通过不同的命令,能自动加载不同的配置文件,从而获取不同的环境变量。
定义环境变量-示例
格式: key = value
key表示环境变量的名称 value表示环境变量的值
示例:
# just a flag
ENV = 'development'
# base api
VUE_APP_BASE_API = '/dev-api'
请注意,以 VUE_APP_
开头的变量将通过 webpack.DefinePlugin
静态地嵌入到客户端侧的代码中,建议以它开头来定义
VUE_APP_NUM = 2000
使用环境变量
定义好环境变量之后,项目启动之后,它会自动被集成到process.env这个属性中。我们只需要通过下面的方式使用即可
process.env.环境变量名
注意:修改服务的配置文件,想要生效的话,必须要重新启动服务