七、Vue组件库:Element、Swiper(轮播专用组件)

一、vue的Element组件库

官网:

1.1安装

推荐安装方法:
首先要进入项目目录

cnpm i element-ui -S 或 npm i element-ui -S 1.1.2 CDN安装

直接引入无需安装:

<!-- 引入样式 --> <link href="http://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="http://unpkg.com/element-ui/lib/index.js"></script> 1.2引入所有

官方:
在src/main.js里引入

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) /* 或写为 * Vue.component(Button.name, Button); * Vue.component(Select.name, Select); */ new Vue({ el: \'#app\', render: h => h(App) }); 完整组件列表和引入方式详见:

(完整组件列表以 components.json 为准)

第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步,开始使用

至此,一个基于 Vue 和 Element 的开发环境已经搭建完毕,现在就可以编写代码了。
官方使用文档:
在文档中找到button组件使用方法,把想要的样式复制到想要的地方即可

在这里插入图片描述

src/parent.vue

【1】使用Element的组件

<template> <div> <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) Vue.config.productionTip = false new Vue({ el: \'#app\', template: \'<App/>\', router,//把路由投到vue实例 components: { App } }) src/components/parent.vue

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgzwgg.html