關於Vue的各個UI框架（elementUI、mint-ui、VUX）

 

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   都是縮寫

二、在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' },

 

 

三、使用組件在main.js入口文件中聲明使用

聲明後能夠在任何一個vue模塊中使用

Vue.use(ElementUI)

 

按照須要引入UI組件：

按照以前的步驟安裝 element-ui以及配置好各個loader後，執行如下步驟：

1. 安裝babel-plugin-component

命令行：cnpm install babel-plugin-component -D

1. .babelrc文件裏面新增一個配置

"plugins": [["component", [

    {

      "libraryName": "element-ui",

      "styleLibraryName": "theme-default"

    }

 

1. 想用哪一個組件就用哪一個

//引入須要使用的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   都是縮寫

四、在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' },

 

 

五、使用組件在main.js入口文件中聲明使用

聲明後能夠在任何一個vue模塊中使用

Vue.use(Mint);

按照須要引入UI組件：

按照以前的步驟安裝 element-ui以及配置好各個loader後，執行如下步驟：

1. 安裝babel-plugin-component

命令行：cnpm install babel-plugin-component -D

1. .babelrc文件裏面新增一個配置

"plugins": [["component", [

    {

      "libraryName": "element-ui",

      "styleLibraryName": "theme-default"

    }

 

1. 想用哪一個組件就用哪一個

//引入須要使用的UI

import { Cell, Checklist } from 'minu-ui';

//聲明使用

Vue.component(Cell.name, Cell);

 

 

VUX

1、下載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 //運行腳手架

2、關於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：顯示的標題文字

 

3、關於底部上拉菜單  <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（默認）

 

4、關於彈出框

帶圖標，幾秒後默認消失 <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>