VUE引入Element UI、Mint UI、Vant UI（基础使用、按需引入优化（按需打包使用到的组件）、官方文档链接）

目录

Element UI

基础使用

Element UI组件链接

优化（按需打包使用到的组件）

MintUI

基础使用

W3C Mint UI中文文档

优化注意

Vant

官方文档链接

---

Element UI

是饿了么前端团队推出的基于Vue的桌面端UI框架，和Bootstrap一样对原生的HTML标签进行了封装，进行了美化，让我们能够专注于业务逻辑而不是UI界面。

基础使用

在Vue-CLI的项目文件下输入命令行npm i element-ui -S安装，并在main.js中插入以下代码引入。

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

此时我们可以在下面链接的左侧找到想要的组件，例如下图我们选择Button组件，点击显示代码，将显示的代码复制粘贴到使用的地方即可。

Element UI组件链接

Element - The world's most popular Vue UI framework

优化（按需打包使用到的组件）

默认情况下无论我们有没有使用到某个组件，在打包npm run build时候都会将Element UI中的所有组件打包到我们的项目中，这样就导致了我们项目体积比较大，用户访问慢。

解决方法：先项目文件下输入命令行npm install babel-plugin-component -D下载插件，然后配置项目文件夹下的babel.config.js文件如下

module.exports = {
  presets: [
    ['@vue/cli-plugin-babel/preset', { modules: false }]
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ]
  ]
}

然后在main.js中将import ElementUI from 'element-ui'改为import { Button, Slider } from 'element-ui'，其中Button和Slide是我使用到的组件，将之前的Vue.use(ElementUI)改为Vue.use(Button)和Vue.use(Slider)，如果你使用了多个组件就需要在import的大括号中写多个，并再写多个Vue.use()。此时我们在通过npm run build便只会打包到我们导入了的组件内容。

MintUI

饿了么前端团队推出的一款基于Vue的移动端框架，和Bootstrap一样对原生的HTML标签进行了封装，进行了美化，让我们能够专注于业务逻辑而不是UI界面。

基础使用

在Vue-CLI的项目文件下输入命令行npm i mint-ui -S安装，并在main.js中插入代码引入，之后过程和Element UI使用过程相同，这里就不写了，不会的可以查看下面链接（我这里打不开官方文档，所以是W3C的）

W3C Mint UI中文文档

Mint UI 快速上手教程-Quick_w3cschool

优化注意

和Element UI相同，部分代码不同将，将上图中的component后面的对象更改为{libraryName: 'mint-ui',style: true}，注意按上面链接的去优化会报错（它的多了[]，由于是未更新的），还需要将Vue.use()改为Vue.component()即可。

Vant

有赞前端开发团队推出的一款基于VUe的移动端UI框架，和Bootstrap一样对原生的HTML标签进行了封装，进行了美化，让我们能够专注于业务逻辑而不是UI界面。（通常用于电商界面制作）

和之前的使用方法相同，所以这里就直接放链接了。

官方文档链接

Vant - Mobile UI Components built on Vue