人资基础环境搭建

i# 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 速度过慢或者报错，可以：直接下载代码的压缩包运行（https://gitee.com/mirrors/vue-element-admin )

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

npm config set registry https://registry.npm.taobao.org

2.运行效果

下载安装包完成之后，通过npm run dev来启动项目。

vue-element-admin 内置了后台管理业务场景下大部分的解决方案，我们可以在左侧的导航栏里看到它们。这些方案不是每一个项目都需要的，如果我们实际的业务中需要，可以拿来参考，所以它起到的作用更多的是一个参考价值，而不适合直接使用进行二次开发，为啥，因为要删除的内容太多了。

小结

二开项目：在已有项目的基础之上做开发；

vue-element-admin 是一套功能非常强大的库；

该处使用的url网络请求的数据。

二、了解vue-admin-template

目标:vue-element-admin是一个非常全面的系统，提供了很多现成的方案，我们可以在写项目的时候过来参考，但是也有缺点：不太好进行二次开发，因为要删减的东西太多了。

我们可以采取另外一个子系统，叫做vue-admin-template ，它提供了最基础的模板，非常方便来做二次开发。

在线运行效果：Vue Admin Template

1.运行体验

# 从码云拉取代码 
git clone https://gitee.com/panjiachen/vue-admin-template.git 
# 切换到具体目录下
cd vue-admin-template 
# 安装所有依赖
npm install 
# 启动开发调试模式  查看package.json文件的scripts可知晓启动命令
npm run dev

运行效果

小结

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

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

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

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

步骤有三步：

先将vue-admin-template下原来的.git文件夹删除掉（这个文件夹默认情况下是隐藏的，如果你看不到这个文件夹，则需要去设置一下显示隐藏文件夹）
修改项目信息
1. 重命名项目文件夹，把vue-admin-template的改成vue-hr(或者其它的名字)
2. 修改package.json中的name,description等属性。
项目进行git初始化

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

5.建立远程仓库

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

6.推送到远程仓库

小结

二次开发:把别人做的半成品改成自己的项目

删除git提交记录
修改项目信息

2.关联远程仓库:

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

git命令拓展

3.认识vue-admin-template的目录

目标

认识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目录：一般都是对项目的环境和工具的配置

4.认识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 # 配置文件

整体运行方式

webpack的入口是main.js
在main.js中引入其他文件

5.重点文件介绍

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

当前的Vuex结构采用了模块形式进行管理共享状态，其架构如下

其中：

app.js模块，功能已经完备，不需要再进行修改。
settings.js模块，功能已经完备，不需要再进行修改。
user.js模块是我们后期需要重点开发的内容

scss

该项目还使用了scss作为css的扩展语言，在styles目录下，我们可以发现scss的相关文件，相关用法我们会在下一小节进行详细讲解

icons

项目中也使用图标字体，整体的icons的结构如下

07. 关于两个文件的操作

清空user.js,

这里我们将user.js里面的内容删除，并且导出一个默认配置。

export default {
  namespaced: true,
  state: {},
  mutations: {},
  actions: {}
}

清空permission.js

目前不需要路由守卫。可以把所有的内容直接注释掉

08.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

目标结构

根目录learn-scss 
├── 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会帮我们做）;

09.SCSS-基本语法

目标

学习scss预处理器的基础语法；

内容

嵌套语法； &父选择器；变量；mixins；模块

嵌套语法

和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;
    }
  }
}

变量

定义变量

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变量

mixins

mixins混入，是代码复用的方式

定义格式

@mixin 名称 { 代码 }

使用格式

include 名称

示例

定义样式

@mixin container {
  width: 1200px;
  background-color: green;
}

@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

使用mixins

.div {
  width: 200px;
  @include clearfix;
  @include container;
}

模块

一个.scss文件就是一个模块，多个.scss文件之间可以相互引用。

例如：在base.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类似（变量，嵌套，模块化）不需要花太多精力去学习它。

小结

所有vue项目的关键文件都基本相同，可以理解为都是用vue脚手架工具创建出来的；

vue-admin-template额外做了一些配置，我们可以直接使用；

10.复习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的拦截器

参考：拦截器 | Axios 中文文档 | Axios 中文网

请求拦截器

请求拦截器主要完成 token的统一注入

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

响应拦截器

响应拦截器主要处理返回的数据异常 和数据结构问题

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    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

- 请求拦截器

- 响应拦截器

11.复习理解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工具，每个接口的请求都单独导出了一个方法，这样做的好处就是：

每一个文件就是一个业务对应的所有服务请求接口汇总，清晰明了，查找方便（方便维护）

任何一个业务组件中如果想使用哪个接口直接导入即可（方便复用）

语义化清晰，维护方便（命名即注释）

分工合作

示意图

操作-重置api

为了后续更好的开发，我们可以先将user.js代码的方法设置为空，后续在进行修改

api/user.js

import request from '@/utils/request'
export function login(data) {
}
export function getInfo(token) {
}
export function logout() {
}

12.mock功能-了解mock的作用及使用场景

目标

了解mock的作用及使用场景；

mock使用场景

mock：假的

前端程序员提到的mock数据的含义是：真的假数据

真的：符合接口规范要求的。

假数据：数据是人为创建出来的，不是真正的业务数据。

什么时候需要mock？

后端接口的开发速度跟不上前端的进度，而前端要实现业务还必须依赖数据，前端为了保证开发进度就需要自己mock数据，保证业务能正常开发

mock的实现方式

本地启mock服务器：

自己用express写接口

本地用专门的mock服务

线上的mock服务器

fastmock 在线接口 Mock 平台

小结

mock 的功能是真的假数据；

可以在本地自己写接口，也可以采用web接口；

13.mock功能-使用项目中的mock功能

目标

写一个获取新闻列表的接口。url： /news/getList

思路

分析现有的代码功能，仿写一个。

目前已有的接口：http://localhost:9528/dev-api/vue-admin-template/table/list

创建mock文件

在mock目录下创建一个news.js文件

仿照table.js的写法，写入news.js的内容如下

module.exports = [
  {
    url: '/news/getList',
    type: 'get',
    response: config => {
      return {
        code: 20000,
        data: ['第一条新闻', '第二条新闻', '第三条新闻']
      }
    }
  }
]

引用mock文件

在mock/index.js中，引入news.js

const Mock = require('mockjs')
const { param2Obj } = require('./utils')

const user = require('./user')
const table = require('./table')
+ const news = require('./news')

const mocks = [
  ...user,
  ...table,
+ ...news
]

重启项目

调用mock接口

由于上面写的是get类型的接口，可以直接通过在地址栏中写：http://localhost:9528/dev-api/news/getList 来访问。

在项目中的组件中正常使用ajax发请求即可，或者采用测试工具来做测试

小结

mock是在前端中就是表示实现真接口&假数据；

本项目中已经集成了，可以直接使用；

一般在开发阶段时使用，上线之后就不会用了；

14.mock功能-从项目中删除mock（修改两个文件）

目标

移除mock：由于我们本项目有配套的后端接口，所以不需要用到模拟数据，这里将mock部分删除掉。

两步

注释掉mock数据的代码
（1）main.js中删除（或注释）mock部分的功能

（2）vue.config.js中删除（或注释）掉

before: require('./mock/mock-server.js')

删除src/mock文件夹

注意

由于修改了vue.config.js需要重启项目

由于删除了mock功能，项目中原来的ajax请求会报404错误

15.处理公共资源图片和样式

以上我们已经将整体的基础模块进行了简单的介绍，接下来，我们需要将该项目所用到的图片和样式进行统一的处理

目标

从给定的资源目录中导入项目用到的公共资源（图片资源和样式资源）

思路

按项目目录约定，将相关资源拷贝进来即可(cv)。

添加图片资源

图片资源在课程资料的图片文件中，我们只需要将common文件夹拷贝放置到 assets目录即可

assets目录下的图片不会经过打包的过程直接产出

添加样式资源

样式资源在 项目资源/样式 目录下，复制过来覆盖即可：

替换variables.scss

新增common.scss

我们提供了一份公共的common.scss样式，里面内置了一部分内容的样式，在开发期间可以帮助我们快速的实现页面样式和布局；

将两个文件放置到src/styles目录下，然后在index.scss中引入该样式

@import './common.scss'; //引入common.scss样式表

注：每个网站都有自己的专业的配色风格，这是由设计统一设计的，我们前端需要做的，就是按照设计的要求定义好全局配色变量，网站中使用即可，如果需要替换设计风格，其实也就是替换全局配色变量

总结

了解vue-admin-template,搭建相关环境

新之助9928

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
人资基础环境搭建

目录项目介绍一、了解vue-element-admin1.本地运行体验2.运行效果小结二、了解vue-admin-template1.运行体验运行效果小结2.创建本地项目并关联远程仓库小结 git命令拓展 3.认识vue-admin-template的目录目标目录结构 4.认识src目录回顾项目的运行机制目录结构整体运行方式5.重点文件介绍main.jsApp.vuepermission.js控制访问权限settings.jsVuexscssicons07. 关于两个文件的操作08.SCSS-了解和基本使
复制链接

扫一扫