七、Vue组件库：Element、Swiper（轮播专⽤组件）⼀、vue的Element组件库
1.1安装
推荐安装⽅法：
⾸先要进⼊项⽬⽬录
cnpm i element-ui -S
或
npm i element-ui -S
1.1.2 CDN安装
直接引⼊⽆需安装：
<!--引⼊样式-->
<link rel="stylesheet" href="unpkg/element-ui/lib/theme-chalk/index.css">
<!--引⼊组件库-->
<script src="unpkg/element-ui/lib/index.js"></script>
1.2引⼊所有
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)
});
⼆、按需引⼊
第1步，安装 babel-plugin-component：
cnpm install babel-plugin-component -D
第2步，配置src/.babelrc⽂件
【1】配置部分
{
"presets":[
["env",{
"modules":false,
"targets":{
"browsers":["> 1%","last 2 versions","not ie <= 8"]
}
}],
"stage-2"
],
"plugins":[
"transform-vue-jsx","transform-runtime",
[//【1】配置部分
"component",
{
"libraryName":"element-ui",
"styleLibraryName":"theme-chalk"
}
]//配置结尾
]
}
第3步，引⼊部分组件，⽐如 Button 和 Select
那么需要在 main.js 中写⼊以下内容（全局引⼊）：
【1】引⼊所需组件
【2】使⽤对应组件（以下2个）
import Vue from'vue';
import{ Button, Select }from'element-ui';//【1】引⼊所需组件
import App from'./App.vue';
Vue.use(Button)//【2】使⽤对应组件（以下2个）
Vue.use(Select)
/* 或写为
* Vueponent(Button.name, Button);
* Vueponent(Select.name, Select);
*/
new Vue({
el:'#app',
render: h =>h(App)
});
完整组件列表和引⼊⽅式详见：
第4步，全局配置（可选步骤）
在引⼊ Element 时，可以传⼊⼀个全局配置对象。该对象⽬前⽀持 size 与 zIndex 字段。size ⽤于改变组件的默认尺⼨，zIndex 设置弹框的初始 z-index（默认值：2000）。按照引⼊ Element 的⽅式，具体操作如下：
完整引⼊ Element：
import Vue from'vue';
import Element from'element-ui';
Vue.use(Element,{ size:'small', zIndex:3000});
按需引⼊ Element：
import Vue from'vue';
import{ Button }from'element-ui';
Vue.prototype.$ELEMENT={ size:'small', zIndex:3000};
Vue.use(Button);
按照以上设置，项⽬中所有拥有 size 属性的组件的默认尺⼨均为 ‘small’，弹框的初始 z-index 为 3000。第5步，开始使⽤
src/parent.vue
【1】使⽤Element的组件
<template>
<div class="parent">
<h1>路由实例parent</h1>
<!--【1】使⽤Element的组件-->
<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>
<hr/>
<el-button plain>朴素按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" plain>信息按钮</el-button>
<el-button type="warning" plain>警告按钮</el-button>
<el-button type="danger" plain>危险按钮</el-button>
</div>
</template>
<script>
export default{
name:'parent',
components:{},
data(){
return{
list:[]
}
},
filters:{},
directives:{},
}
</script>
<style scoped>
</style>
2.2 ⾛马灯（轮播）图⽚展⽰组件使⽤⽰例src/main.js
【1】以下2个为引⼊⾛马灯必须组件
【2】以下2个为使⽤⾛马灯组件
import Vue from'vue'
import App from'./App'
import router from'@/router.js'//先引⼊⾃定义路由
import{
Button,
Select,
Carousel,//【1】以下2个为引⼊⾛马灯必须组件
CarouselItem,
}from'element-ui';
Vue.use(Button)
Vue.use(Select)
Vue.use(Carousel)//【2】以下2个为使⽤⾛马灯必须组件
Vue.use(CarouselItem)
new Vue({
el:'#app',
template:'<App/>',
router,//把路由投到vue实例
components:{
App
}
vue element admin
})
src/components/parent.vue
【0】定义⼀些图⽚
【1】使⽤Element的⾛马灯组件
【2】控制⾛马灯图⽚样式
<div class="parent">
<h1>路由实例parent</h1>
<hr/>
<!--【1】使⽤Element的⾛马灯组件-->
<el-carousel height="550px">
<el-carousel-item v-for="(img,index) in imgs":key="index">
<img :src="img"/><!--循环图⽚-->
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
export default{
name:'parent',
components:{},
data(){
return{
imgs:[//【0】定义⼀些图⽚
"www.wallcoo/nature/2010_Landscape_1920_Desktop_11/wallpapers/1600x1200/Moose%20Pond%20and%20Mount%20Pleasant%20in %20Autumn%2C%20Maine.jpg",
"cli.clewm/file/2015/01/20/81b71bc509d09368d4602a4b5b05d093.jpg",
"hbimg.huabanimg/a84ec58661bc95efb974e2eebea2b3fd880a8fb12870a-ksYmbV_fw658",
]
}
},
filters:{},
directives:{},
}
</script>
<style scoped>
/* 【2】控制⾛马灯图⽚样式 */
.el-carousel__item h3 {
color: #475669;
font-size:14px;
opacity:0.75;
line-height:150px;
margin:0;
}
.
el-carousel__item:nth-child(2n){
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1){
background-color: #d3dce6;
}
img {
width:100%;
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。