HR-01-项目初始化

叙白
239 阅读8分钟

项目初始化

项目介绍

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

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

测试项目初始化

需求：熟悉Element-UI组件库的基本使用（类似于Vant）

  1. 安装依赖包
npm i element-ui
  1. 导入插件和样式(所有的组件全部导入)
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
  1. 组件中可以使用任意Element-UI提供的组件了
<el-button type="primary">成功按钮</el-button>
  • 表格组件的基本使用：
    • 需要向el-table中注入数据
    • 列和数据的关系由el-table-column组件的prop值决定

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-element-admin.git
# 切换到具体目录下
cd vue-element-admin
# 用 npm i 下载依赖包
npm i 
# 启动开发调试模式  查看package.json文件的scripts可知晓启动命令
npm run dev

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

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

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

正式初始化项目

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

  1. 拉取基础模板代码(地址之后的名称可以修改默认克隆的项目名称)
git clone https://github.com/PanJiaChen/vue-admin-template.git myhr128
  1. 安装项目依赖包
cd vue-admin-template
npm i
  1. 启动项目
npm run dev

基于git管理项目

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

总结：

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

App.vue

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

image.png

总结

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

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

// 分别导入三个组件，然后分别起一个别名，然后直接导出
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'

总结：

  1. 模块化导入的解构赋值支持起一个别名
  2. 导入之后可以直接导出 export {成员名称} from ‘路径’

permission.js

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

  • 将代码进行注释

image.png

settings.js

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

title(项目名称)，

fixedHeader（固定头部）

sidebarLogo（显示左侧菜单logo）

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

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

Vuex结构

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

image.png

  • 其中app.js模块和settings.js模块，功能已经完备，不需要再进行修改。 user.js模块是我们后期需要重点开发的内容，所以这里我们将user.js里面的内容删除，并且导出一个默认配置
export default  {
  namespaced: true,
  state: {},
  mutations: {},
  actions: {}
}
  • 全局模块进行拆分
// 全局模块
// import getters from '@/store/getters.js'
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 {
  getters: getters,
  state: {},
  mutations: {},
  actions: {}
}

总结：

  1. 默认生成3个局部模块：app.js/settings.js/user.js
  2. vuex也支持全局模块（拆分独立的全局模块global.js）
  3. getters可以直接放到全局模块即可

scss

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

  1. less
  2. sass/scss
  3. stylus

image.png

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

index 入口文件

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

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

sidebar 表示左侧菜单样式

transition 表会动画相关样式

variables 表示通用的变量

  • 与less的区别
    • 定义变量（less使用@;sass使用$）
    • :export 表示导出样式变量用于给js环境使用

icons

图标的文件结构如下

image.png

总结：如何使用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(createElement, context) {
    // render函数的参数二可以获取父组件传递过来的属性值
    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函数的作用

注意：

  1. 数组中直接放入标签（HTML或者组件标签）形式的代码其实就是JSX。
  2. render函数参数二可以获取父组件传递过来的属性值。

Vue中实现组件的模板方式

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

  • template
  • el
  • render
Vue.component('my-com', {
  template: '<div>hello</div>',
  data () {
    return {
      msg: ''
    }
  }
})
// --------------------------
new Vue({
  el: '#app',
  data: {
    msg: ''
  }
})
// --------------------------
// <my-com>hello</my-com>
// 本质上template里面的字符串模板运行时也会编译为render函数
Vue.component('my-com', {
  data () {
    return {
      msg: 'nihao'
    }
  },
  // 脚手架的开发环境不支持字符串模板，但是本质上，template在运行阶段，会自动编译成render函数
  // render函数比template更加底层
  // template: '<div>{{msg}}</div>'
  // ---------------------------------------------
  // 组件的模板可以由render函数提供
  render (createElement) {
    // createElement的参数
    // 参数一，表示标签名称
    // 参数二，表示里面的内容子元素
    return createElement('div', 'hello')
  }
})

总结：组件的模板由几种写法？

  1. el 只能用在 new Vue实例场景中
  2. template 传统的定义组件的方式
  3. render 更加底层的一种模板实现
  4. 单文件组件中的模板（template标签）
  • render函数对JSX的支持
// 测试render函数用法
Vue.component('my-com', {
  data () {
    return {
      msg: 'nihao'
    }
  },
  // 脚手架的开发环境不支持字符串模板，但是本质上，template在运行阶段，会自动编译成render函数
  // render函数比template更加底层
  // template: '<div>{{msg}}</div>'
  // ---------------------------------------------
  // 组件的模板可以由render函数提供
  render (createElement) {
    // createElement的参数
    // 参数一，表示标签名称
    // 参数二，表示里面的内容子元素
    // return createElement('div', 'hello')
    // 如下的代码就是JSX（js代码中直接写标签）
    // return (
    //   <div>
    //     <div>hello</div>
    //     <div>nihao</div>
    //     <div>hi</div>
    //   </div>
    // )

    // js结合标签一块写（JSX）
    // Vue 的render函数支持React的JSX语法规则
    const arr = []
    arr.push(<div>hello</div>)
    arr.push(<div>nihao</div>)
    // 在JSX中插值表达式用的单的花括号
    // 组件必须有唯一的根节点
    return <div>{arr}</div>
  }
})

总结：

  1. JSX：React框架提供的语法规则（在js代码中直接写HTML标签（组件标签））
  2. Vue的render函数支持JSX作为返回值，这个返回值本质上是虚拟DOM节点 VNode
  3. 虚拟DOM节点VNode本质上就是对象，这个对象描述了真实的DOM元素。

总结

  • 熟悉项目的业务场景：PC端人力资源管理系统
  • 熟悉Element-UI组件库的基本使用
  • 基于vue-element-admin创建项目（默认帮助我们搭建好基础的项目架构）
  • 基于git管理项目
  • 熟悉这种项目的目录结构
  • 分析项目的核心代码
    • main.js：导入样式、图标、路由、vuex、Element插件、配置根组件
    • 根组件Appvue: 导入组件后直接导出的用法，ES6导入成员可以起一个别名
    • Vuex结构分析：分为全局和局部模板
    • Scss代码分析：变量定义；导入用法；混入用法mixin
    • 字体图标svg用法：1、把svg文件放到icons/svg目录里面；使用标签组件
      • icon-class 表示组件文件名称，用来区分哪个图标
      • class-name用于定制图标的样式
    • svg图标相关知识点：render函数用法
      • 用于给组件提供模板（类似于template属性的作用：单文件组件template标签的作用， el属性的作用），所有的其他方式，在运行阶段都会殊途同归（最终都会编异成render函数）
      • render函数支持JSX语法结构（在js代码中直接写标签（HTML和组件标签））
      • render函数的参数二可以获取父组件的属性值

反馈

  • 字体图标
    • 从使用的角度：
      • 1.如果是新的图标，需要放到icons/svg目录里面
      • 2.使用组件标签 <svg-icon icon-class='link'></svg-icon>显示图标
  • render函数
    • 作用：给当前组件提供模板（与template属性、el属性作用一样；单文件组件的template标签）
    • 所有的模板最终在运行时都会编译为render函数
    • render函数中的模板如果是基于createElement函数实现模板的话，是非常复杂的
    • 支持JSX方式在render函数中实现模板效果
<template>
  <div>
    <div>tom</div>
    <div>jerry</div>
  </div>
</template>

<script>
export default {
  name: 'Test'
  // render (createElement, context) {
  //   const tom = createElement('div', 'tom')
  //   const jerry = createElement('div', 'jerry')
  //   const div = createElement('div', [tom, jerry])
  //   return div
  // }
  render (createElement, context) {
    // 如下的方式，其实就是JSX的语法结构（在js代码中写HTML标签和组件标签）
    // jsx中的标签可以作为函数的参数、返回值，也可以赋值给一个变量
    const info = (
      <div>
        <div>tom</div>
        <div>jerry</div>
        <svg-icon icon-class='link'/>
      </div>
    )
    return info
  }
}
</script>
  • sass语法: 与less的绝大多数规则一致
    • 样式的写法支持嵌套
    • 支持变量：less使用@定义变量；sass使用$定义变量
    • 混入mixin......好多特性
  • layout整体结构（项目代码的整体结构）
    • 一级路由
      • 404 对应的是404组件
      • / 对应的是Layout组件
      • /login 对应的是login组件

API模块介绍

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

  • axios拦截器原理

image.png

image.png

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

// 创建一个axios实例对象
const instance = axios.create({
  // baseURL: process.env.VUE_APP_BASE_API
  baseURL: baseURL,
  // 超时,如果超过5秒，后端没有返回数据，那么就报错
  timeout: 5000
})

export default (options) => {
  return instance({
    // 请求方式
    method: options.method || 'GET',
    // 请求地址
    url: options.url,
    // post/put 请求体传递的参数
    data: options.data,
    // get 请求传参
    params: options.params,
    // 请求头
    headers: options.headers
  })
}
  • api模块单独封装
import request from '@/utils/request'

// 登录功能
export function login (data) {
  return request({})
}

// 获取用户信息
export function getInfo (token) {
  return request({})
}

// 退出功能
export function logout () {
  return request({})
}

总结：

  1. 封装通用的接口调用方法 request
  2. api模块用户登录相关业务方法的封装

项目公共样式处理

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

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

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

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

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

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

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

总结：

  1. 添加图片资源
  2. 修改变量信息；
  3. 添加一个新的样式文件
avatar
文章
阅读
粉丝
相关推荐
别做老实人了！这才是 HR 喜欢听的离职原因！
23k阅读
 · 
286点赞
node_koa后端——初始化配置jwt和swagger的koa框架
15k阅读
 · 
13点赞
全栈管理系统项目：初始化与规范
1.6k阅读
 · 
1点赞
服务器初始化那些操作(一)——安全初始化配置
3.1k阅读
 · 
28点赞
React Native安卓项目初始化
683阅读
 · 
1点赞
气死了😤，过五关，斩六将，结果被 HR 捅了一刀！！
34k阅读
 · 
241点赞
vue 甘特图（一）：选择与初始化甘特图
6.1k阅读
 · 
50点赞
前端项目初始化
3.2k阅读
 · 
2点赞
【脚手架】从0到1搭建React18+TS4.x+Webpack5项目（一）项目初始化
8.1k阅读
 · 
167点赞
图解 Binder：初始化
1.8k阅读
 · 
6点赞

友情链接：