本文推荐三个能结合vue项目使用的UI组件，分别是element.ui , Mint.ui ,和bootstrap，可以让项目页面更加美观，适应性更强。
注：文中介绍的安装方式都是将全部组件安装下来，如果不需要全部组件，可以按需安装，和文中介绍的安装方法差异主要是在App.vue文件的引入不同，具体安装如下所示：
1.vue项目中安装element.ui
(1)在创建项目的根目录下打开命令框输入以下命令：
npm i element-ui -S （如果安装了cnpm就用cnpm安装，速度更快）
注：上述命令采用简写方式，所以做个命令解释
i = install -S = --save -D = --save -dev
然后再项目的main.js中引入和使用：
(2)上述步骤执行完成后，执行npm run dev运行项目会发现报错，原因及解决方法如下：
a:
问题原因： 没有在webpack.config.js中添加css-loader
解决方案：在webpack.config.js文件中加入以下代码：
b:
问题原因：没有添加style-loader
解决方案：在webpack.config.js文件中加入以下代码（可能在你的项目中还没有安装style-loader,所以要先在项目根目录的命令窗口输入：cnpm install style-loader -D，完成安装后继续下面步骤）：
c:
问题原因：没有在webpack.config.js中添加element.ui中字体图标的loader
解决方案：在webpack.config.js文件中加入以下代码：
(3)此时在 命令窗口中ctrl+c结束之前的运行操作，重新执行npm run dev就不会报错，表示成功引入element.ui，具体使用请参照官网教程：element.ui官网
2.vue项目中安装Mint-ui
(1)在项目根目录下打开命令窗口，执行以下命令：
npm install mint-ui -D
执行完毕后就在项目中安装成功了
(2)然后就是引入和使用了：
在项目的入口文件main.js中引入和使用：
(3)安装element.ui一样，我们也需要在项目中安装css-loader和style-loader然后配置，具体操作如下：
安装：cnpm install style-loader -D
cnpm install css-loader -D
配置：
完成上述三步就算完成了，此时运行npm run dev运行项目，应该就不会报错，剩下的任务就是具体如何使用UI组件了，这就要参考官方文档了Mint-ui官网
3.在vue项目中引入bootstrap
这与上述的安装操作是一样的，就省略了
