elementUI
官網:http://element.eleme.io/
使用步驟：
1、安裝完vue-cli后，再安裝 element-ui
命令行：npm i element-ui -D
相當於 npm install element-ui --save-dev
// i -> install D -> --save-dev S -> --save 都是縮寫
2、在main.js入口文件中引入它的js和css
import ElementUI from 'element-ui' //固定路徑，類似vuerouter
import 'element-ui/lib/theme-default/index.css' //固定路徑
注意：
vue-cli默認情況下沒有配置css-loader style-loader和file-loader，需要自己手動去配置，查看package.json文件，如果有就不需要下載，只需要在webpack.config.js文件中配置
{ test: /\.css$/, loader: 'style!css' },
{ test: /\.(eot|svg|ttf|woff|woff2)$/ , loader: 'file' },
3、使用組件在main.js入口文件中聲明使用
聲明后可以在任何一個vue模塊中使用
Vue.use(ElementUI)
按照需要引入UI組件：
按照之前的步驟安裝 element-ui以及配置好各個loader后，執行以下步驟：
1. 安裝babel-plugin-component
命令行：cnpm install babel-plugin-component -D
- .babelrc文件里面新增一個配置
"plugins": [["component", [ { "libraryName": "element-ui", "styleLibraryName": "theme-default" }
- 想用哪個組件就用哪個
//引入需要使用的UI
import {Button,Radio} from 'element-ui'
//聲明使用
Vue.use(Button);
mint-ui
使用步驟：
1、安裝完vue-cli后，再安裝 mint-ui
命令行：npm install mint-ui -S
相當於 npm install mint-ui --save
// i -> install D -> --save-dev S -> --save 都是縮寫
4、在main.js入口文件中引入它的js和css
import Mint from 'mint-ui' //固定路徑，類似vuerouter
import 'mint-ui/lib/style.css' //固定路徑
注意：
vue-cli默認情況下沒有配置css-loader style-loader和file-loader，需要自己手動去配置，查看package.json文件，如果有就不需要下載，只需要在webpack.config.js文件中配置
{ test: /\.css$/, loader: 'style!css' },
{ test: /\.(eot|svg|ttf|woff|woff2)$/ , loader: 'file' },
5、使用組件在main.js入口文件中聲明使用
聲明后可以在任何一個vue模塊中使用
Vue.use(Mint);
按照需要引入UI組件：
按照之前的步驟安裝 element-ui以及配置好各個loader后，執行以下步驟：
1. 安裝babel-plugin-component
命令行：cnpm install babel-plugin-component -D
- .babelrc文件里面新增一個配置
"plugins": [["component", [ { "libraryName": "element-ui", "styleLibraryName": "theme-default" }
- 想用哪個組件就用哪個
//引入需要使用的UI
import { Cell, Checklist } from 'minu-ui';
//聲明使用
Vue.component(Cell.name, Cell);
VUX
一、下載VUX的腳手架
默認為 webpack2 模板，如果你需要使用webpack1，請使用 vue init airyland/vux2#webpack1 projectPath
npm install vue-cli -g // 安裝vue-cli vue init airyland/vux2 projectPath //安裝vux腳手架 cd projectPath npm install --registry=https://registry.npm.taobao.org //安裝下載各個依賴的包 npm run dev //運行腳手架
二、關於Switch切換 <x-switch></x-switch>
demo例子：
HTML文本內容：<template> <div> <group> <x-switch title="標題1" v-model="show1"></x-switch> <x-switch title="標題2" v-model="show2"></x-switch> </group> <p>show1:{{show1}}</p> <p>show2:{{show2}}</p> </div> </template>
js定義：
<script> import {XSwitch } from 'vux' //導入XSwitch模塊 export default { components: { XSwitch, //定義該模塊 }, data () { return { show1:true, //根據值判斷是否打開 show2:false, } } } </script>
API解析：
title：顯示的標題文字
三、關於底部上拉菜單 <actionsheet></actionsheet>
demo例子：
HTML文本內容：
<template> <div> <actionsheet v-model="show3" :menus="menus3" @on-click-menu="click" @on-click-menu-delete="onDelete" show-cancel :close-on-clicking-mask="false"> </actionsheet> <p>show3:{{show3}}</p> </div> </template>
js定義：
<script> import { Actionsheet } from 'vux' export default { components: { Actionsheet }, data () { return { show3:true, menus3: { 'title.noop': '你確定刪除嗎?<br/><span style="color:#666;font-size:12px;">Once deleted, you will never find it.</span>', // 標題文本，必須必須使用 title.開頭，並用''包裹 delete: '<span style="color:red">刪除</span>' //可以 包含HTML文本和樣式，VUX會默認解析出來 } } }, //定義方法 methods:{ click (key) { console.log(key) //輸出觸發事件的對象 名稱 delete }, onDelete () { alert('觸發了刪除'); } } } </script>
API解析：
menus ：顯示的 各行文字，為對象 格式，如果是標題，必須使用 title.開頭，並用''包裹，對象的內容可以 包含HTML文本和樣式，VUX會默認解析出來
@on-click-menu：后面跟一個事件，當該上拉菜單被點擊的時候觸發，可傳入key值，為點擊觸發事件的對象名稱
@on-click-menu-delete：為@on-click-menu的擴展變形。這里表示當點擊的對象名稱為delete時觸發事件
show-cancel：是否顯示 取消選項，默認為false
:close-on-clicking-mask：是否開啟點擊遮罩層時隱藏上拉菜單，默認為true,取值為boolean值
如何自定義一個上拉菜單： menus是一個由對象組成的數組
menus5: [ { label: '你確定刪除嗎?<br/><span style="color:#666;font-size:12px;">Once deleted, you will never find it.</span>', //頁面顯示的菜單文字 type: 'info' //該行 菜單的類型，決定樣式 }, { label: '確定', type: 'primary', value: 'primary' //該行菜單的value值，等同於它的對象名稱 }, { label: '取消', type: 'warn' }, { label: '不可選', type: 'disabled' }, { label: '默認' }],
各屬性解析：
label：頁面顯示的菜單文字
type：該行 菜單的類型，決定樣式
取值：info（標題） primary（確認執行菜單，字體為綠色 ） warn（取消執行，字體為紅色） disabled（不可選菜單）default（默認）
四、關於彈出框
帶圖標，幾秒后默認消失 <toast></toast>
demo例子：
HTML文本內容：
<template> <div> <toast v-model="show3">彈出框</toast> <p>show3:{{show3}}</p> </div> </template>
js定義：
<script> import { Toast } from 'vux' export default { components: { Toast }, data () { return { show3:true, } }, } </script>
普通的alert彈出框
demo例子：
HTML文本內容：
<alert v-model="show" :title="$t('Congratulations')" @on-show="onShow" @on-hide="onHide">彈出來</alert>
js定義：
<script> import { Alert } from 'vux' export default { components: { Alert, }, data () { return { msg: 'Hello World!', show: true, } } } </script>