组件库和使用流程

了解常见组件库及使用流程

目标

了解一些常见的Vue组件库

前端项目分类

移动端（h5页， 小程序）

PC端

常见的vue技术栈组件库

• 移动端（Vant, Cube-UI,  NutUI ）
• PC端 （ element-ui, Ant Design of Vue, iView）
• 小程序: uniapp

组件库的基本使用流程

1. 根据项目的实际情况，进行技术选型： 用什么技术栈，用什么组件库
2. 去对应的官方上查文档
3. 遇到困难时：

1. 1. 在官网上找 常见问题(一般在网页的最底部)
      下图是element官网上的截图

1. 1. 在社区/搜索引擎 找答案
   2. 去提issue  ，面对面直接向组件的作者提问
   3. 改源码

小结

• vue技术栈有很多的组件库（一般大厂才会维护组件库）
• 组件库要分移动端和PC端
• 学习组件库的基本方法是查文档，遇到困难时提 issue

创建项目并引入element组件库

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

官方地址：https://element.eleme.cn/#/zh-CN

ElementPlus(适配Vue3.0的版本)官方地址： https://element-plus.org/#/zh-CN

目标

用vue-cli脚手架工具创建项目，并在项目中引入elementUI组件库

思路

用vue create 命令创建项目；根据elementUI官网中的说明来安装和使用组件

用vue-cli创建vue项目

vue create

找一个合适的文件夹，打开cmd窗口，用vue create 创建项目

vue create element-demo
-------------------------------
? Please pick a preset:
> Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features

注意：

1. vue create 命令会自动创建文件夹，这样就不需要我们手动创建了
2. 选择Vue2 版本的默认配置
3. 如果vue create 命令不能正常运行，要先安装脚手架工具， 对应的命令是： npm i -g @vue/cli

cd 项目名再启动

上一步的命令做了两件事：创建文件夹，把示例项目的代码下载到这个文件夹中，为了运行项目，我们还需要进入项目目录下，并运行命令。 对应的命令是：

cd element-demo # 进入项目目录
npm run serve # 运行命令

查看效果

http://localhost:8888

把ElementUI添加到项目中

参考官网文档，按全局引入的方式，一共分成两步：

1. 安装 elementUI
2. 在项目的main.js中引入使用

在项目中安装elementUI

npm i element-ui -S

-S: 是--save的简写，表示 这个包是生产依赖， 表示项目上线也要使用这个包。

-S: 是可以省略不写的。

如果要安装开发依赖，则要加 -D。

main.js中引入并注册

官网参考

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

上面的写法是固定模式，可随时去官网查看。

使用elementUI组件

使用组件的基本思路是：在官网上进行 cv操作。这里找一个最简单的button组件进行尝试使用。

在app.vue中

<template>
  <div id="app">
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
  </div>
</template>

注意:

1. 组件名前面有el这个关键字
2. type属性决定了按钮的样式风格

效果预览

如果打开浏览器预览，没有效果，那么一切ok~

小结

1. elementui是做PC项目的首选
2. 组件库一般都会有配套使用教程，基本套路是：

1. 1. npm i 安装
   2. 在main.js中导入，并使用

---

我们即将要开的人资项目是基于elementUI重度使用的一套架构，我们把后台管理系统一类的项目中高频使用的组件依次学习一下，方便大家更容易的接受业务的顺利进行

---