VUE快速上手（四）

VUE中UI框架的使用

这里简单介绍2个UI框架在VUE中的使用，Mint UI和Element UI。
Mint UI是饿了么团队开发基于vue .js的移动端UI框架，它包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。
官网：http://mint-ui.github.io/#!/zh-cn

Element UI是基于 Vue 2.0 的桌面端组件库。
官网：https://element.eleme.cn/#/zh-CN

Mint UI的使用

步骤：

1. 安装Mint UI：npm install mint-ui -S
2. 引入Mint UI的css和插件：

   import Mint from 'mint-ui';
   Vue.use(Mint);
   import 'mint-ui/lib/style.css'
   

3. 看官方文档直接使用
   由于已经全局引入了Mint UI，所以不需要单独引入特定的组件。

例1：使用button组件
把下面的代码放入vue项目中即可看到3中不同样式的button

<mt-button type="default">default</mt-button>
<mt-button type="primary">primary</mt-button>
<mt-button type="danger">danger</mt-button>

例2：使用index list组件
同样的，在vue项目中参考官方示例编写如下代码：

<mt-index-list>
<mt-index-section index="A">
    <mt-cell title="Aaron"></mt-cell>
    <mt-cell title="Alden"></mt-cell>
    <mt-cell title="Austin"></mt-cell>
</mt-index-section>
<mt-index-section index="B">
    <mt-cell title="Baldwin"></mt-cell>
    <mt-cell title="Braden"></mt-cell>
</mt-index-section>
<mt-index-section index="C">
    <mt-cell title="Clark"></mt-cell>
    <mt-cell title="Clombia"></mt-cell>
</mt-index-section>
<mt-index-section index="D">
    <mt-cell title="David"></mt-cell>
    <mt-cell title="Django"></mt-cell>
</mt-index-section>
<mt-index-section index="Z">
    <mt-cell title="Zack"></mt-cell>
    <mt-cell title="Zane"></mt-cell>
</mt-index-section>
</mt-index-list>

例3：使用action-sheet组件
打开官方提供的demo：https://github.com/ElemeFE/mint-ui，到example/pages/目录下复制action-sheet.vue到项目中，以组件的形式引入，即可看到效果

<template>
    <div id="user">
        <h2>我是用户组件</h2>
        <br>
        <v-actionsheet></v-actionsheet>
    </div>
</template>

<script>
import ActionSheet from './ActionSheet.vue'
export default {
    name: "user",
    data() {
        return {

        }
    },
    components: {
        'v-actionsheet': ActionSheet
    }
}
</script>

其余的可以按需参考官方提供的样例demo，此处不一一列出。

Element UI的使用

Element UI的引入分为完整引入和按需引入。

1. 完整引入
   首先安装Element UI：cnpm i element-ui -S
   然后在main.js中引入并使用组件：

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

   此时如果直接启动项目会报错：
   
   可以看出，这是由于Element UI中使用的字体文件无法解析导致的，所以还需要做对应的配置。
   首先打开package.json，确认已经安装了file-loader，如果没有安装，则需要执行cnpm install file-loader --save-dev进行安装。然后再打开webpack.config.js，在module.rules里加入：

   {
     test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
     loader: 'file-loader'
   }
   

   最后重启项目，此时就没有报错了。
   在项目中引入官方示例，例如button组件：

   <el-row>
       <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>
   </el-row>
   

   可以看到Element UI安装及配置成功：

2. 按需引入

   第一种方法：
   首先，安装 babel-plugin-component：npm install babel-plugin-component -D，
   然后，修改.babelrc文件为：

   {
     "presets": [["env", { "modules": false }]],
     "plugins": [
       [
         "component",
         {
           "libraryName": "element-ui",
           "styleLibraryName": "theme-chalk"
         }
       ]
     ]
   }
   

   最后在main.js中按需引入需要用到的组件，此处以button和select为例：

   import { Button, Select } from 'element-ui'
   Vue.component(Button.name, Button)
   Vue.component(Select.name, Select)
   

   使用组件：

   <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>
   <br>
   <el-select v-model="value" placeholder="请选择">
     <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
   </el-select>
   

   
   第二种方法：
   不安装babel-plugin-component，不修改.babelrc文件，直接在main.js中引入组件，同时引入官方提供的css，同样可以实现Element UI的使用：

   import { Button, Select } from 'element-ui'
   Vue.component(Button.name, Button)
   Vue.component(Select.name, Select)
   import 'element-ui/lib/theme-chalk/index.css'
   

   推荐使用第一种官方提供的方法。