项目初始化

前后端交互
前端动效（交互）

css
html
js（jQuery）+ ajax
node.js
- 后端开发：对标java、php、python
- 作为工具使用

Vue：把数据填充到HTML标签里面（数据的响应式）
- 模板语法：指令，插值表达式，计算属性，侦听器，过滤器，ref；组件化开发（分而治之）
- 如何定义组件：全局组件；局部组件；
- 组件之间的数据交互：父传子；子传父；非父子（vuex）
- 插槽：基本插槽；具名插槽；作用域插槽
- 生命周期函数
异步编程：ajax相关知识（前后端交互：接口调用）
- 同步和异步
- 回调函数
- Promise
- Async/await
- 跨域：jsonp/cors
大事件项目：CRUD 增删改查

项目介绍

项目演示地址

总结：项目主要用于人力资源相关流程的信息管理（类似于OA）

员工管理；角色管理；权限管理；授权流程分析；组织架构......

vue-element-admin介绍

目标: 熟悉通用的 vue后台集成方案**vue-element-admin**基本用法

vue-element-admin 是一个后台管理系统前端项目解决方案，它基于 vue 和 element-ui实现。

它使用了最新的前端技术栈，内置国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，可以帮助你快速搭建企业级中后台产品原型。

集成方案：vue-element-admin

基础模板：vue-admin-template

集成方案预览

# 基础版
git clone https://github.com/PanJiaChen/vue-admin-template.git
# 切换到具体目录下
cd vue-admin-template
# 用 npm i 下载依赖包
npm i 
# 启动开发调试模式  查看package.json文件的scripts可知晓启动命令
npm run dev

集成方案并不适合我们直接拿来进行二次开发，基础模板则是一个更好的选择。

基础模板, 包含了基本的 登录 / 鉴权 / 主页布局 功能模板, 我们可以直接在该模板上进行功能的扩展和项目的二次开发。

总结：vue-element-admin是一个基于Vue和Element-UI封装的一个后台管理系统的可以快速创建项目基本原型的包，集成方案提供可非常丰富的业务功能模块；基础版本提供最基础的项目架构，方便进行

正式初始化项目

目标: 熟悉搭建一个vue中台项目的基本流程

拉取基础模板代码(地址之后的名称可以修改默认克隆的项目名称)

git clone https://github.com/PanJiaChen/vue-admin-template.git myhr141

安装项目依赖包

cd myhr141
npm i

启动项目

npm run dev

基于git管理项目

git init 初始化仓库
git add 添加所有代码到暂存区
git commit 提交初始版本
git remote add origin gitee.com/byte1031/my… 添加远程仓库别名
git push -u origin master 推送到远程

总结：创建一个全新的仓库，推送到远程

项目目录结构分析

目标: 熟悉基础模板的项目目录结构

├── 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                 # 公用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

此时,你可能会眼花缭乱, 因为生成的目录里面有太多的文件我们在做项目时其中最关注的就是**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

项目入口文件主要实现如下功能

总结：

导入相关的资源（样式）

导入并配置ElementUI

导入图标

导入权限控制模块

导入路由

导入store

配置跟组件

App.vue

项目根组件主要提供如下功能

总结

左侧菜单

右侧内容区（顶部导航；下面内容区）

左侧菜单又进行了子组件拆分（拆的很稀碎）

注意：关于直接导入导出的写法要理解

// 分别导入三个组件，然后分别起一个别名，然后直接导出
export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar'
export { default as AppMain } from './AppMain'

// ES6模块化导入成员可以起一个别名
// import { default as AppMain } from './AppMain'
// import { default as Navbar } from './Navbar'
// import { default as Sidebar } from './Sidebar'

// export {
//   AppMain,
//   Navbar,
//   Sidebar
// }

// ES6模块化导入本来就支持起一个别名
// import { info as info1 } from 'a.js'
// import { info as info2 } from 'b.js'

import {default as Header1} from './Header.vue'
export const Header1 = Header1
// 上面的两句可以合并为下面的一句
export { default as Header1 } from './Header.vue'

总结：

模块化导入的解构赋值支持起一个别名

导入之后可以直接导出 export {成员名称} from ‘路径’

permission.js

permission.js 是控制页面登录权限(路由访问)的文件，我们可以先将此处的代码进行注释或删除，现在还没做登录拦截，等我们构建权限功能时，再从0到1进行构建。

将代码进行注释

settings.js

**settings.js**则是对于一些项目信息的配置，里面有三个属性

title(项目名称)，

fixedHeader（固定头部）

sidebarLogo（显示左侧菜单logo）

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

注意：一般全局设置信息（后续有可能需要手动修改）

Vuex

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

state/mutation/action/getters/module

state 存储组件的共享数据

mutation 专门用于修改state的数据

action 专门处理异步的任务，可以触发mutation更新状态

getters 相当于计算属性

module 可以对状态进行模块化拆分管理

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

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

全局模块进行拆分

// src/store/module/global.js
const state = {}

const mutations = {}

const actions = {}

const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name
}

export default {
  // 全局的配置
  state,
  mutations,
  actions,
  getters
}

// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
// import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
import global from './modules/global'

Vue.use(Vuex)

const store = new Vuex.Store({
  // 局部模块
  modules: {
    app,
    settings,
    user
  },
  // 全局模块
  ...global
})

export default store

总结：

默认生成3个局部模块：app.js/settings.js/user.js

vuex也支持全局模块（拆分独立的全局模块global.js）

getters可以直接放到全局模块即可

scss

该项目还使用了scss作为css的扩展语言，在**styles**目录下，我们可以发现scss的相关文件

less

sass/scss

stylus

样式预处理比css好在哪里？支持嵌套；支持变量；支持类似于函数之类的编程特性

样式导入：入口文件index.scss;间接导入其他样式

index 入口文件

element-ui 覆盖element-ui的默认样式

mixin 提前定义的样式，可以再其他地方多次使用

sidebar 表示左侧菜单样式

transition 表会动画相关样式

variables 表示通用的变量

与less的区别

定义变量（less使用@;sass使用$）

:export 表示导出样式变量用于给js环境使用（了解）

icons

图标的文件结构如下

总结：如何使用svg图标？

把图标svg文件复制到icons/svg目录中

使用svg-icon全局组件配置图标

<svg-icon class-name='abc' icon-class='user'></svg-icon>

iconClass的值是svg文件的名称

className可以定制图标的样式

使用svg图标的位置 @/src/layout/components/SideBar/Item.vue

注意：svg图标为什么可以像上面那样使用？svg-sprite-loader

注意：svg-icon 组件是全局组件，在 @/icons/index.js 中进行了注册

API模块介绍

目标 介绍API模块的单独请求和 request模块的封装

组件-->触发action-->基于API中的方法调用接口-->基于request模块的axios调用接口

axios拦截器原理

创建axios实例 utils/request.js

import axios from 'axios'
// 基准路径
const baseURL = 'http://ihrm-java.itheima.net/api/'

// 创建axios实例对象
const service = axios.create({
  baseURL: baseURL
})

// 自定义函数封装通用调用接口的方法：支持固定的data传参
// export default instance
export default (options) => {
  // 根据请求方式决定请求参数的名称
  let key = ''
  if (options.method) {
    key = options.method.toUpperCase() === 'GET' ? 'params' : 'data'
  } else {
    // 没有传递method,此时采用默认请求方式get
    key = 'params'
  }
  return instance({
    method: options.method || 'get',
    url: options.url,
    // ES6规则：对象的key可以是变量
    [key]: options.data
  })
}

api模块单独封装

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',
    data: { token }
  })
}

// 退出
export function logout() {
  return request({
    url: '/vue-admin-template/user/logout',
    method: 'post'
  })
}

总结：

封装通用的接口调用方法 request

api模块用户登录相关业务方法的封装

项目公共样式处理

目标 将一些公共的图片和样式资源放入到规定目录中

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

样式资源在资源/样式目录下

修改**variables.scss** （我们在**variables.scss**添加了一些基础的变量值）

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

注意在scss文件中，通过**@import** 引入其他样式文件，需要注意最后加分号，否则会报错。

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

@import './common.scss'; // 引入common.scss样式表 (在最下面导入)

总结：

添加图片资源

修改变量信息；

添加一个新的样式文件

01-HR-项目初始化

项目初始化

项目介绍

vue-element-admin介绍

正式初始化项目

基于git管理项目

项目目录结构分析

项目主要代码分析

main.js

App.vue

permission.js

settings.js

Vuex

scss

icons

API模块介绍

项目公共样式处理