基于vue-admin-template开发后台管理项目,环境搭建流程

7,360 阅读11分钟

了解vue-element-admin

目标

了解和熟悉通用的基于vue技术栈的后台系统社区解决方案 vue-element-admin

官网地址

线上demo地址

方案介绍

是开发后台管理系统的一个比较完备的前端解决方案:

  • 基于 vueelement-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可知晓启动命令

注意

  1. 如果git clone 速度过慢或者报错,可以:直接下载代码的压缩包运行(gitee.com/mirrors/vue…

  1. 如果安装依赖特别慢,可以使用淘宝镜像:

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 总是出错,看官网说明

预览效果如下

小结

  1. vue-admin-template是在vue-element-admin的基础上做了大量的删减,只保留了后台管理系统最关键的框架部分,非常适合我们在此基础上做二次开发
  2. 市面上使用vue技术栈开发的PC后台管理项目很大一部分都是基于vue-admin-template 进行的二次开发,我们的人资项目也基于它来实现。
  3. 克隆仓库代码时,可能网络不好,可以直接CV

创建本地项目并关联远程仓库

目标

将vue-admin-template项目改成我们自己的项目,并关联到远程仓库进行管理

本地项目初始化

由于我们前边下载的项目是直接从 vue-admin-template **克隆**而来,里面拥有原项目的提交记录,为了避免冲突,我们要先删除掉之前的提交,再做初始化。

步骤有三步:

  1. 先将vue-admin-template下原来的 **.git**文件夹删除掉 (这个文件夹默认情况下是隐藏的,如果你看不到这个文件夹,则需要去设置一下显示隐藏文件夹)

  2. 修改项目信息

    1. 重命名项目文件夹,把vue-admin-template的改成vue-hr(或者其它的名字)
    2. 修改package.json中的说明。
  3. 项目进行git初始化

    $ git init  # 初始化项目, 这句命令会新建一个.git文件夹
    $ git add . # 将修改添加到暂存
    $ git commit -m "人资项目初始化" # 将暂存提到本地仓库
    

经过上面的步骤,它就变成我们自己的项目了

建立远程仓库

在gitee上创建一个与本地同名的空的公开的远程仓库。

推送到远程仓库

有两句命令(并不需要记忆,在gitee空仓库中会有具体的提示)

  1. 建立关联
$ git remote add origin <远程仓库地址>  #添加远程仓库地址
# git remote add origin https://gitee.com/用户名/项目名.git
  1. 推送master分支到远程仓库
$ git push -u origin master
#将master分支推送到origin所代表的远程仓库地址

检查效果

去你自己的gitee上看一下,是否有刚才提交的代码。

小结

  1. 二次开发:把别人做的半成品改成自己的项目。
  • 删除git提交记录
  • 修改项目信息
  1. 关联远程仓库:

    • 创建同名的、空的、公共的远程仓库
    • 运行两句命令

认识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的结构如下

小结

  1. 所有vue项目的关键文件都基本相同,可以理解为都是用vue脚手架工具创建出来的;
  2. vue-admin-template额外做了一些配置,我们可以直接使用;

作业- 当我们进入主页时,加载了哪些组件?

用文字或者图示写出来

http://localhost:9528/#/dashboard

SCSS-了解和基本使用

官方文档

目标

了解scss的作用;

sass、scss、less、css的区别

less, sass, scss都是css预处理语言(也是对应的文件后缀名),它们的语法功能比css更强大。

预处理语言使用是:开发时用预处理语言,在打包上线时,用webpack再配合loader工具给转成css(Cascading Style Sheets)给浏览器使用。

细节:

  1. 后缀名:SASS(Syntactically Awesome StyleSheets)版本3.0之前的后缀名为.sass,而版本3.0之后的后缀名.scss

  2. 语法规范:

    sass没有{};, 有严格的缩进规范 ;

    scss和css的缩进规范是一致的

我们在实际开发过程中,scss是常用写法

搭建小型测试环境

单独创建一个文件夹来学习scss的使用,为了方便应用scss,我们可以在vscode中安装一个名为**easy sass** 的插件,它会自动的帮助我们把.scss => .css

目标结构

|- index.html
|- scss/
|------test.scss

步骤

  1. 新建一个文件夹learn-scss

  2. 在learn-scss下新建一个index.html

    <link rel="stylesheet" href="./scss/test.css">
    ​
    <div id="app">
      <div class="container">container</div>
    </div>
    
  3. 新建一个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的拦截器

Snipaste_2022-06-16_11-15-41.png

请求拦截器

请求拦截器主要完成 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工具,每个接口的请求都单独**导出**了一个方法,这样做的好处就是:

  1. 每一个文件就是一个业务对应的所有服务请求接口汇总,清晰明了,查找方便 (方便维护)
  2. 任何一个业务组件中如果想使用哪个接口直接导入即可 (方便复用)
  3. 语义化清晰,维护方便 (命名即注释)
  4. 分工合作

示意图

Snipaste_2022-06-16_11-17-54.png

操作

为了后续更好的开发,我们可以先将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.环境变量名

注意:修改服务的配置文件,想要生效的话,必须要重新启动服务