vue-vue2.0安装三个常用UI让页面简洁大方

本文推荐三个能结合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文件中加入以下代码：

添加css-loader

b:

问题原因：没有添加style-loader

解决方案：在webpack.config.js文件中加入以下代码（可能在你的项目中还没有安装style-loader,所以要先在项目根目录的命令窗口输入：cnpm install style-loader -D，完成安装后继续下面步骤）：

添加style-loader

c: 

问题原因：没有在webpack.config.js中添加element.ui中字体图标的loader

解决方案：在webpack.config.js文件中加入以下代码：

添加字体图标loader

(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

配置：

在webpack.config.js中配置

完成上述三步就算完成了，此时运行npm run dev运行项目，应该就不会报错，剩下的任务就是具体如何使用UI组件了，这就要参考官方文档了Mint-ui官网

3.在vue项目中引入bootstrap

这与上述的安装操作是一样的，就省略了