一、element-ui/mint-ui組件庫
element-ui 提供了大量的組件，如：布局組件、表單組件、JS組件等等。
1.1 element-ui使用步驟
Element-ui官網(wǎng)：https://element.eleme.cn/#/zh-CN
安裝 Element-ui：npm i element-ui -S
1.1.1 引入組件
引入 Element
- 完整引入(在 main.js 中寫入以下內(nèi)容)：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
- 按需引入
借助 babel-plugin-component，我們可以只引入需要的組件，以達(dá)到減小項(xiàng)目體積的目的。
首先，安裝 babel-plugin-component： npm install babel-plugin-component -D
然后，將 .babelrc 修改為：
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
接下來，如果你只希望引入部分組件，比如 Button 和 Select，那么需要在 main.js 中寫入以下內(nèi)容：
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或?qū)憺? * Vue.use(Button)
* Vue.use(Select)
*/
new Vue({
el: '#app',
render: h => h(App)
});
1.1.2 修改 .babelrc文件
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": [
"transform-vue-jsx",
"transform-runtime",
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
1.2 mint-ui的使用
Mint UI官網(wǎng)： http://mint-ui.github.io/#!/zh-cn
1.2.1 安裝引入組件
1、安裝組件
// 安裝
# Vue 1.x
npm install mint-ui@1 -S
# Vue 2.0
npm install mint-ui -S
2、引入組件
- 完整引入
在 main.js 中寫入以下內(nèi)容：
import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'
Vue.use(MintUI)
new Vue({
el: '#app',
components: { App }
})
- 按需引入
借助 babel-plugin-component，我們可以只引入需要的組件，以達(dá)到減小項(xiàng)目體積的目的。
首先，安裝 babel-plugin-component： npm install babel-plugin-component -D
{
"presets": [
["es2015", { "modules": false }]
],
"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
}
如果你只希望引入部分組件，比如 Button 和 Cell，那么需要在 main.js 中寫入以下內(nèi)容：
需要引入樣式：import 'mint-ui/lib/style.css';
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
// 1、引入Element-ui組件
// import { Button } from 'element-ui';
// Vue.use(Button)
// 2、引入Mint-ui組件
import 'mint-ui/lib/style.css';
import {Button} from 'mint-ui';
Vue.component(Button.name, Button);
Vue.config.productionTip = false //設(shè)置在控制臺(tái)環(huán)境進(jìn)行代碼提示作用
// 1.全局路由守衛(wèi)
router.beforeEach((to,from,next) => {
/*
to:表示要去的新頁面
from:表示舊的頁面
next:表示是否
*/
// 0——表示未登錄
// 1——表示已登錄
var islogin = 1;
if(to.meta.needAuth){
if(islogin == 0){
router.push({name:'login'})
}
if(islogin == 1){
next()
}
}else{
next()
}
})
// 2.全局過濾器
Vue.filter('toFixed1',function(val,data,data1){
return data1 + val.toFixed(data)
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
1.2.2 Mint-ui相關(guān)組件
官網(wǎng)文檔： https://mint-ui.github.io/docs/#/zh-cn2
HelloWorld.vue文章來源：http://www.zghlxwxcb.cn/news/detail-734319.html
<template>
<div class="hello">
<mt-button type="danger" @click="myToast">danger</mt-button>
<hr>
<el-button type="primary">主要按鈕</el-button>
<hr>
<router-link to="/mydetail">產(chǎn)品詳情</router-link>
<router-link to="/mycar">購物車</router-link>
<router-link to="/myorder">下單頁面</router-link>
<hr>
<button @click="mytab">點(diǎn)擊</button>
<hr/>
<router-link to="/tab">選項(xiàng)卡</router-link>
<hr/>
<myslot>
<div slot="name1">
{{msg}}
</div>
<div slot="name2">
{{num}}
</div>
</myslot>
<hr/>
<input type="text" placeholder="請輸入用戶名" v-model="t1"/>
<input type="text" placeholder="請輸入密碼" v-model="t2"/>
<button :class="{active:isTrue}">登錄</button>
<hr/>
<input type="text" name="" id="" v-model="num3"/>
<hr/>
<input type="text" placeholder="請輸入用戶名" v-model="user"/>
<input type="text" placeholder="請輸入密碼" v-model="password"/>
<button :class="{active:getActive}">登錄</button>
<h1>{{getAvg}}</h1>
<h1>{{getSum}}</h1>
<h1>{{num | toFixed(5,"$")}}</h1>
<h1>{{num1 | toFixed1(5,"$")}}</h1>
<h1>{{msg}}</h1>
</div>
</template>
<script>
import { Toast } from 'mint-ui';
import myslot from './02slot';
export default {
name: 'HelloWorld',
data () {
return {
num:10,
num1:20,
num3:100,
msg: 'Welcome to Your Vue.js App',
user:'',
password:'',
isTrue:false,
t1:'',
t2:'',
}
},
filters:{
toFixed(val,data,data1){
return data1 + val.toFixed(data)
}
},
computed:{
getSum(){
return this.num + this.num1;
},
getAvg(){
return this.getSum/2;
},
getActive(){
if(this.user==''||this.password==''){
return false
}
return true
}
},
watch:{
num3(){
console.log("num3修改了")
},
t1(){
if(this.t1 == '' || this.t2 ==''){
this.isTrue = false
}else{
this.isTrue = true
}
},
t2(){
if(this.t1 == '' || this.t2 ==''){
this.isTrue = false
}else{
this.isTrue = true
}
}
},
components:{
myslot,
},
methods:{
mytab(){
//鏈?zhǔn)铰酚商D(zhuǎn)
this.$router.push({
// 方式一
// name:'tab'
// 方式二
path:'/tab',
query:{
id:100
}
})
},
myToast(){
Toast({
message: '提示',
position: 'center',
duration: 5000
});
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.active{
color: red;
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
文章來源地址http://www.zghlxwxcb.cn/news/detail-734319.html
到了這里，關(guān)于【Vue框架】Vue2中element-ui/mint-ui組件庫——element-ui引入組件以及使用案例、mint-ui引入組件及使用案例的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
