1.Element-admin介绍

有完整版和基础版。是后台集成方案，但并不适合直接进行二次开发，完整版方便学习，可以使用基础模版去进行二次开发本项目的定位是后台集成方案，不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。

官网地址：vue-element-admin官网open in new window
集成方案: vue-element-adminopen in new window
基础模板: vue-admin-templateopen in new window // 开发更建议使用基础模版进行开发，只包含了常用的功能和解决方案
集成版本演示案列： panjiachen.github.io/vue-element…
基础版本演示案列：panjiachen.github.io/vue-admin-t…

2.搭建项目前的环境准备

项目开始之前先检查我们的环境和资源配置，下面对其进行详细介绍：

2.1 node.js环境--下载管理依赖包

2.2 npm淘宝镜像--重要的npm管理工具

npm config set registry  https://registry.npm.taobao.org/  #设置淘宝镜像地址
npm config get registry  #查看镜像地址

2.3 git版本控制-目前常用的版本管理工具，代码提交，检出，日志等都通过git实现

克隆项目：

git clone git@gitee.com:panjiachen/vue-admin-template.git hrsaas

2.4 vscode编辑器vetur+eslint

选择vscode插件+vetur+eslint 除此之外，eslint需要在vscode中进行一些参数配置在settings.json中配置eslint设置 代码："editor.fontSize": 14, "eslint.enable": true, "eslint.run": "onType", "eslint.options": { "extensions":[ ".js", ".vue", ".jsx", ".tsx" ] }

3.项目模版启动和目录介绍

3.1项目模板启动

3.1.1克隆项目

git clone git@gitee.com:panjiachen/vue-admin-template.git hrsaas

3.1.2切换目录-删掉.git文件

由于是别人的日志目录，删掉文件夹中的.git文件，方便后面添加到git中

3.1.3 安装项目依赖 npm i---定位到项目目录下

安装项目依赖前，需要定位到项目目录下，执行npi i

3.1.4 运行项目当前目录下执行npm run dev

npm run dev #启动开发模式的服务

当前目录下执行npm run dev

3.2目录介绍

├── build                      # 打包之后的代码
├── mock                       # 项目mock 模拟数据
├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 业务代码
│   ├── api                    # 所有接口请求 
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── icons                  # 项目所有 svg icons
│   ├── layout                 # 全局 layout 布局页面
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── vendor                 # 三方库 无手动下载的
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
│   └── settings.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

4.项目运行机制

4.1 main.js

本项目中不需要使用mock，删除mock相关的配置请注释掉**mock数据的部分，删除src下的mock**文件夹，我们开发的时候用不到模拟数据，如图

同时，请注释掉**vue.config.js**中的 before: require('./mock/mock-server.js')

4.2 App

4.3 permission.js（页面登录权限管理）&settings.js

src下，除了main.js还有两个文件，permission.js 和**settings.js** permission.js 是控制页面登录权限的文件，此处的代码没有经历构建过程会很难理解，所以先将此处的代码进行注释，等我们构建权限功能时，再从0到1进行构建。

settings.js则是对于一些项目信息的配置，里面有三个属性 title(项目名称)， fixedHeader（固定头部），sidebarLogo（显示左侧菜单logo）

settings.js中的文件在其他的位置会引用到，所以这里暂时不去对该文件进行变动

4.4 Vuex

Vuex结构采用了模块形式进行管理共享状态

4.4.1 修改vuex模块的流程----常规步骤参考

其中app.js模块和settings.js模块，功能已经完备，不需要再进行修改。user.js模块是我们后期需要重点开发的内容，所以这里我们将user.js里面的内容删除，并且导出一个默认配置

export default  {
  namespaced: true,//高封闭性控制
  state: {},
  mutations: {},
  actions: {}
}

同时，由于getters中引用了user中的状态，所以需要进行删除。（后面仍然会重新写回来，目标是便于掌握）最后我们将getters中的状态改为

const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device
}
export default getters

此时，就完成了对use.js的重置，方便后续的设置

4.5 SCSS的使用

4.5.1 icons

// require.context 方法 可以实现批量导入文件
// require.context(directory, useSubdirectories, regExp)
// directory: 要查找的文件路径
// useSubdirectories: 是否查找子目录
// regExp: 要匹配文件的正则
// 返回一个方法

// 返回的方法 keys 属性
// keys 函数 返回一个数组


const req = require.context('./svg', false, /.svg$/)

// req.keys();

// ['./dashboard.svg', './example.svg', './eye-open.svg', './eye.svg', './form.svg', './link.svg', './nested.svg', './password.svg', './table.svg', './tree.svg', './user.svg']

const requireAll = (requireContext) => requireContext.keys().map(requireContext)
console.log(requireAll(req))----这个注释不要写//以上两行代码的含义就是将所有的svg目录下所有的.svg后缀的文件全部引入到项目中

4.5.2 SCSS介绍

sass和scss其实是一样的css预处理语言，SCSS 是 Sass 3 引入新的语法，其后缀名是分别为 .sass和.scss两种。 SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss。两者是有不同的，继sass之后scss的编写规范基本和css一致，sass时代是有严格的缩进规范并且没有‘{}’和‘；’。而scss则和css的规范是一致的。 www.sass.hk/

4.5.3 搭建小型测试环境---使用EasySass将scss文件转换为css---工作区启用

为了方便应用scss，我们可以在vscode中安装一个名为 easy sass 的插件，但是我们只在该项目中工作区中应用该插件，因为在项目中，不需要该插件的辅助(webpack会自己转换)，所以只需要在项目的工作区中应用该插件（EasyLess便于转换成css）我们新建一个文件夹test，然后我们在test下新建一个index.html，并新建一个test.scss

注意事项：

1.工作区启用===只在该目录下起作用

2.启用之后，ctrl+s会将创建的.scss文件转换为.css文件，直接link到需要的文件中

4.5.4 scss使用---变量值

变量：

sass使用$符号来标识变量上面我们声明了一个名为**$highlight-color**的变量, 我们可以把该变量用在任何位置

变量范围：

与CSS属性不同，变量可以在css规则块定义之外存在。当变量定义在css规则块内，那么该变量只能在此规则块内使用。如果它们出现在任何形式的{...}块中（如@media或者@font-face块），情况也是如此：

在这段代码中，$nav-color这个变量定义在了规则块外边，所以在这个样式表中都可以像 nav规则块那样引用它。$width这个变量定义在了nav的{ }规则块内，所以它只能在nav规则块内使用。这意味着是你可以在样式表的其他地方定义和使用$width变量，不会对这里造成影响。

嵌套语法：

父选择器：

与less的区别：

我们会发现scss和less有很多相似之处,最大的区别就在于声明变量的方式,less采用的是**@变量名 , 而scss采用的$变量名**

5.Git提交流程----当前文件目录下进行操作

1. 创建远程仓库

2. 删除本地项目.git

注意 : 由于我们之前的项目是直接从 vue-element-admin 而来,里克隆面拥有原来的提交记录,为了避免冲突, 先将原来的 .git文件夹删除掉

mac电脑：shift+command+.显示隐藏文件

3. 本仓库初始化: git init

初始化本地仓库

4. 本地提交(提交到本地仓库): git add . git commit -m 说明文字

git add. //将修改的提交到暂存区（原工作区） git status-----查看文件的状态

git commit -m '人力资源项目初始化' //将暂存区提到本地仓库

5. 提交到远程仓库

-   复制

    ```
    git remote add origin 你们自己的远程仓库  // git@gitee.com:destiny001/hrsaas.git
    git push -u origin master
    ```

第一次效果：

6.公共资源---Axios---api---图片和统一样式

6.1 Axios的拦截器介绍---- API清理

这里为了后续更清楚的书写代码,我们将原有代码注释掉,换成如下代码

// 导出一个axios的实例  而且这个实例要有请求拦截器 响应拦截器
import axios from 'axios'
const service = axios.create() // 创建一个axios的实例
service.interceptors.request.use() // 请求拦截器
service.interceptors.response.use() // 响应拦截器
export default service // 导出axios实例

6.2 api模块清理--axios返回的是promise对象

我们习惯性的将所有的网络请求放置在api目录下统一管理,按照模块进行划分使用了封装的request工具,每个接口的请求都单独**导出**了一个方法,这样做的好处就是,任何位置需要请求的话,可以直接引用我们导出的请求方法（返回的是promise对象）

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

6.3 图片和统一样式

图片资源

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

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

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

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

7.页面访问设置---修改端口号&修改网站名称---修改后要重启

7.1 修改端口号---重启服务

需求：本地服务端口: 在**vue.config.js**中进行设置

vue.config.js就是vue项目相关的编译，配置，打包，启动服务相关的配置文件，它的核心在于webpack，但是又不同于webpack，相当于改良版的webpack，文档地址open in new window

如图，是开发环境服务端口的位置----vue.config.js中

在项目下, 我们发现了.env.development和.env.production两个文件， development => 开发环境， production => 生产环境

当我们运行npm run dev进行开发调试的时候,此时会加载执行**.env.development**文件内容

当我们运行npm run build:prod进行生产环境打包的时候,会加载执行**.env.production**文件内容

如果想要设置开发环境的接口,直接在**.env.development**中写入对于port变量的赋值即可

# 设置端口号，端口号后面不可以有空格--这里的#表示注释
port = 8888

环境变量 process.env

你可以在你的项目根目录中放置下列文件来指定环境变量：

.env                # 在所有的环境中被载入
.env.[mode]         # 只在指定的模式中被载入

7.2 修改网站名称---重启服务`settings.js`文件

需求：将网站名称改成人力资源管理系统

搜索原标题Vue Admin Template
网站名称实际在configureWebpack选项中的name选项,通过阅读代码,我们会发现name实际上来源于src目录下

人资项目-Element-Admin- DAY1-环境搭建-clone项目

1.Element-admin介绍

2.搭建项目前的环境准备

2.1 node.js环境--下载管理依赖包

2.2 npm淘宝镜像--重要的npm管理工具

2.3 git版本控制-目前常用的版本管理工具，代码提交，检出，日志等都通过git实现

2.4 vscode编辑器vetur+eslint

3.项目模版启动和目录介绍

3.1项目模板启动

3.1.1克隆项目

3.1.2切换目录-删掉.git文件

3.1.3 安装项目依赖 npm i---定位到项目目录下

3.1.4 运行项目当前目录下执行npm run dev

3.2目录介绍

4.项目运行机制

4.1 main.js

4.2 App

4.3 permission.js（页面登录权限管理）&settings.js

4.4 Vuex

4.4.1 修改vuex模块的流程----常规步骤参考

4.5 SCSS的使用

4.5.1 icons

4.5.2 SCSS介绍

4.5.3 搭建小型测试环境---使用EasySass将scss文件转换为css---工作区启用

4.5.4 scss使用---变量值

5.Git提交流程----当前文件目录下进行操作

6.公共资源---Axios---api---图片和统一样式

6.1 Axios的拦截器介绍---- API清理

6.2 api模块清理--axios返回的是promise对象

6.3 图片和统一样式

7.页面访问设置---修改端口号&修改网站名称---修改后要重启

7.1 修改端口号---重启服务

7.2 修改网站名称---重启服务`settings.js`文件

8.补充----拷贝git项目

8.1clone地址

8.2git pull拉取最新数据

人资项目-Element-Admin- DAY1-环境搭建-clone项目

1.Element-admin介绍

2.搭建项目前的环境准备

2.1 node.js环境--下载管理依赖包

2.2 npm淘宝镜像--重要的npm管理工具

2.3 git版本控制-目前常用的版本管理工具，代码提交，检出，日志等都通过git实现

2.4 vscode编辑器vetur+eslint

3.项目模版启动和目录介绍

3.1项目模板启动

3.1.1克隆项目

3.1.2切换目录-删掉.git文件

3.1.3 安装项目依赖 npm i---定位到项目目录下

3.1.4 运行项目 当前目录下执行npm run dev

3.2目录介绍

4.项目运行机制

4.1 main.js

4.2 App

4.3 permission.js（页面登录权限管理）&settings.js

4.4 Vuex

4.4.1 修改vuex模块的流程----常规步骤参考

4.5 SCSS的使用

4.5.1 icons

4.5.2 SCSS介绍

4.5.3 搭建小型测试环境---使用EasySass将scss文件转换为css---工作区启用

4.5.4 scss使用---变量值

5.Git提交流程----当前文件目录下进行操作

6.公共资源---Axios---api---图片和统一样式

6.1 Axios的拦截器介绍---- API清理

6.2 api模块清理--axios返回的是promise对象

6.3 图片和统一样式

7.页面访问设置---修改端口号&修改网站名称---修改后要重启

7.1 修改端口号---重启服务

7.2 修改网站名称---重启服务**settings.js**文件

8.补充----拷贝git项目

8.1clone地址

8.2git pull拉取最新数据

3.1.4 运行项目当前目录下执行npm run dev

7.2 修改网站名称---重启服务`settings.js`文件