vue 六 、Element (UI组件) 及 Avue + Avue-cli （二次封装 Element 及后台管理模板）及 Vant (移动端UI组件)

一、Element (UI 组件）

Element 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。

Element 官方文档：https://element.eleme.cn/#/zh-CN/component/installation

1、安装Element

npm i element-ui -S

2、配置 Element （main.js）

vue-cli 项目中添加 ，前提需 import Vue from ‘vue’;

// ElementUI 组件+ css 文件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

//安装插件
Vue.use(ElementUI)

3、使用 Element UI

查看文档：https://element.eleme.cn/#/zh-CN/component/installation
随便找一个组件，展示代码并赋值代码

使用效果

里面有非常多的组件，大家可以自己查看官方文档体验试试

二、Avue 的使用（基于element-ui ）

Avue.js2.0是基于现有的 element-ui 库进行的二次封装，简化一些繁琐的操作，核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景，同时衍生出更多企业常用的组件，达到高复用，容易维护和扩展的框架，同时内置了丰富了数据展示组件，让开发变得更加容易，avue-cli是后台模版

avue和avue-cli 免费开源，维护更新将会在码云同步
Avue官网： https://avuejs.com/doc/data/data1
avue 源码:https://gitee.com/smallweigit/avue
avue-cli 源码（后台管理模板）:https://gitee.com/smallweigit/avue-cli

2.1、使用Avue

快速上手官方文档：https://avuejs.com/doc/installation
其他组件使用自己参考，和Element 的使用大同小异

2.2、使用Avue-cli 后台管理

1、下载源码解压 || 直接 git 拉取项目

avue-cli 源码（后台管理模板）:https://gitee.com/smallweigit/avue-cli

2、使用开发工具打开

执行安装依赖，启动服务即可

# 克隆项目
git clone https://gitee.com/smallweigit/avue-cli.git

# 进入项目
cd avue-cli

# 安装依赖
npm install --registry=https://registry.npm.taobao.org

# 启动服务
npm run serve

3、访问效果展示

登录页

主页效果展示

数据页

三、Vant (移动端组件)

Vant 是轻量、可靠的移动端 Vue 组件库
官方文档：https://youzan.github.io/vant/?source=vuejsorg#/zh-CN/quickstart

1、安装vant

npm i vant -S       #通过 npm 安装

2、使用vant （main.js）

vue-cli 项目中添加 ，前提需 import Vue from ‘vue’;
Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法
其他可参考官方快速上手文档

import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

3、使用vant

官网文档地址：https://youzan.github.io/vant/#/zh-CN/
复制粘贴代码

效果展示