笔记栈

# 项目初始化

# 项目介绍

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

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

# vue-element-admin介绍

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

vue-element-admin (opens new window) 是一个后台前端解决方案，它基于 vue (opens new window) 和 element-ui (opens new window)实现。

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

集成方案：vue-element-admin (opens new window)

基础模板：vue-admin-template (opens new window)

  • 集成方案预览
# 拉取代码
git clone https://github.com/PanJiaChen/vue-element-admin.git
# 切换到具体目录下
cd vue-element-admin
# 用 npm i 下载依赖包
npm i 
# 启动开发调试模式  查看package.json文件的scripts可知晓启动命令
npm run dev

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

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

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

# 初始化项目

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

  1. 拉取基础模板代码
git clone https://github.com/PanJiaChen/vue-admin-template.git
  1. 安装项目依赖包
npm i
  1. 启动项目
npm run dev

# 基于git管理项目

  • git init 初始化仓库
  • git add 添加所有代码到暂存区
  • git commit 提交初始版本
  • git remote add origin https://gitee.com/byte1031/vue-admin-template.git 添加远程仓库别名
  • 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

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

image-20210216103338274

总结：

  1. 导入相关的资源（样式）
  2. 导入并配置ElementUI
  3. 导入图标
  4. 导入权限控制模块
  5. 导入路由
  6. 导入store
  7. 配置跟组件

# App.vue

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

image-20210216103509352

总结

  1. 左侧菜单
  2. 右侧内容区（顶部导航；下面内容区）
  3. 左侧菜单又进行了子组件拆分

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

export { default as AppMain } from './AppMain'

# permission.js

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

  • 将代码进行注释

image-20210216103659777

# settings.js

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

title(项目名称)，

fixedHeader（固定头部）

sidebarLogo（显示左侧菜单logo）

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

# Vuex结构

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

image-20210216103849198

  • 其中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

总结：

  1. 默认有三个模块
  • app和settings是完整的模块；user模块需要自己实现

注意：模块中的state状态的值的类型（对象或者函数需要进行验证）

# scss

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

  1. less
  2. sass/scss
  3. stylus

image-20210216111548825

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

# icons

图标的文件结构如下

image-20210216111619982

总结：如何使用svg图标？

  1. 把图标svg文件复制到icons/svg目录中
  2. 使用svg-icon全局组件配置图标

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

  • iconClass的值是svg文件的名称

  • className可以定制图标的样式

  • 使用svg图标的位置 @/src/layout/components/SideBar/Item.vue
render(h, context) {
    const { icon, title } = context.props
    // vnodes数组中放的是什么？字体图标的标签，或者svg组件标签
    // vnodes = [<i></i>, <svg-icon></svg-icon>]
    // vnodes中本质上放的是组件的实例对象
    // vnodes = [{}, {props,data,watch,computed}]
    const vnodes = []

    if (icon) {
      if (icon.includes('el-icon')) {
        vnodes.push(<i class={[icon, 'sub-el-icon']} />)
      } else {
        vnodes.push(<svg-icon icon-class={icon}/>)
      }
    }

    if (title) {
      vnodes.push(<span slot='title'>{(title)}</span>)
    }
    return vnodes
}

总结：字体图标的用法；render函数的作用

主要：组件标签的属性不可以使用驼峰的方式，需要转换为短横线方式

# Vue中实现组件的模板方式

Vue组件的模板由如下三种写法

  • template
  • el
  • render
Vue.component('my-com', {
  template: '<div>hello</div>',
  data () {
    return {
      msg: ''
    }
  }
})
// --------------------------
new Vue({
  el: '#app',
  data: {
    msg: ''
  }
})
// --------------------------
// <anchored-heading>hello</anchored-heading>
// 本质上template里面的字符串模板运行时也会编译为render函数
Vue.component('anchored-heading', {
  render: function (createElement) {
    // createElement函数的参数
    // 参数一，表示标签名称
    // 参数二，表示里面的内容子元素
    return createElement(
      'h' + this.level,   // 标签名称
      this.$slots.default // 子节点数组(default表示默认插槽的名称)
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

梳理：

  1. 如何使用svg图标
  2. 左侧菜单使用图标时有点儿特殊（模板用到了render）
  3. 关于组件的模板的用法
  4. 为了加强对render的理解，需要补充虚拟DOM的概念

# 关于虚拟DOM的理解VNode

image-20210403162208634

<div id="info" class="active">hello</div>

// 其中一个节点称之为虚拟节点 VNode
var vnode = {
  tagName: 'div',
  attrs: {
    id: 'info',
    class: 'active'
  },
  children: ['hello']
}

<!-- 虚拟的DOM转成真实的DOM -->
var div = document.createElement(vnode.tagName)
for (let key in vnode.attrs) {
  div.setAttribute(key, vnode.attrs[key])
}
vnode.children.forEach(item => {
  div.appendChild(item)
})

# 基于git管理项目代码

目标：能够基于git管理项目代码

# 初始化项目
git init
# 将修改添加到暂存
git add . 
# 将暂存提到本地仓库
git commit -m '人资项目初始化' 
# 查看版本日志
git log --oneline 
# 添加远程仓库地址
git remote add origin <远程仓库地址>  
# 查看本地仓库的远程仓库地址映射
git remote -v 
# 将master分支推送到origin所代表的远程仓库地址
git push -u origin master

# API模块介绍

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

  • axios拦截器原理

image-20210216112010676

image-20210403164509767

  • 创建axios实例 utils/request.js
import axios from 'axios'
// 基准路径
export const baseURL = 'http://ihrm-java.itheima.net/api/'

// 创建一个新的axios实例
const instance = axios.create({
  // 设置基准路径
  baseURL: baseURL,
  // 请求超过这么多时间还没有返回就报错
  timeout: 5000
})

// 封装一个通用的请求方法
export default (options) => {
  return instance({
    method: options.method || 'GET',
    url: options.url,
    data: options.data,
    params: options.params,
    headers: options.headers
  })
}
  • api模块单独封装
// import request from '@/utils/request'

// 实现登录
export function login(data) {
 
}
// 获取用户信息
export function getInfo(token) {

}

// 实现退出
export function logout() {

}

# 项目公共样式处理

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

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

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

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

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

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

  • 将两个文件放置到styles目录下，然后在**index.scss**中引入该样式
@import './common.scss'; // 引入common.scss样式表 (在最下面导入)

← 登录模块 →