Vue 學習筆記 6 Mint UI 和 MUI

2021-10-07 18:31:38 字數 1557 閱讀 3407

mint ui是基於 vue.js的移動端元件庫

1、安裝:

npm


install mint-ui -s
2、引入方式

2.1 引入方式1 引入全部元件：但是不建議使用這種方式，因為會占用bundle.js的空間

import vue from


'vue'


;import mint from


'mint-ui'


;import


'mint-ui/lib/style.css'


;//為了更好看一下還可以使用mint-ui中的樣式庫


vue.


use(mint)


;//將mint-ui安裝到vue中


newvue()


;
2.2 引入方式2 按需引入部分元件： 建議使用按需引入，按需引入借助babel-plugin-component可以引入需要的元件，以達到減小專案體積的目的。首先安裝babel-plugin-component：

npm


install babel-plugin-component -d
然後將babelrc修改為：

]]


,"plugins":[


["component",[


]]]}
然後再main.js中匯入：

import


from


'mint-ui'


;//匯入需要的元件


vue.


component


(cell.name,cell)


;//註冊需要的cell元件 或者使用自定義的名稱：vue.component('mycell',cell);


vue.


component


(checklist.name,checklist)


;//註冊需要的checklist元件
步驟：

安裝： cnpm i mint-ui -s

引入 mint ui

mui不同於 mint-ui ，mui 只是開發出來的一套好用的**片段，裡面提供了配套的樣式、配套的html**段，類似於bootstrap； 而mint-ui是真正的元件庫，是使用vue技術封裝出來的成套的元件，可以無縫的和vue專案進行整合開發；

因此，從體驗上來說，mint-ui體驗更好，以為這是別人幫我們開發好的現成的vue元件；

從體驗上來說 mui和bootstrap類似，理論上，任何專案都可以使用mui或bootstrap，但是mint-ui只適用於vue專案。

使用步驟：

在main.js中匯入mui的樣式表和bootstrap的使用方式是一樣的：

import


'./lib/mui/css/mui.min.css'

Vue學習筆記 6 元件註冊

3.基礎元件的自動化全域性註冊 我們前一篇提到了元件註冊，但是那裡用的是我們的全域性註冊。註冊分為區域性註冊和全域性註冊 下面開始講解 lang en charset utf 8 titletitle src script head v for i in names v bind value i x...

Vue學習筆記 6 事件修飾符

注意 1.once和prevent的先後順序不會影響結果 2.self和stop的區別 四個div從內層到外層分別為 div1 div4，各繫結乙個點選事件 當點選div2時，會發生事件冒泡，依次觸發了div2 div3 div4 stop阻止了 使用該修飾符的元素引發的 所有的冒泡行為。但不能阻止...

vue學習 筆記

v model 雙向繫結 v if v else if v else v on 繫結事件 v bind 繫結資料 v cloak 當vue未初始化完成前可不顯示為賦值的 vue屬性名稱 需要給v cloak設定 display none v for i迴圈次數 a資料中的資料 arr定義的陣列 最好...