vue-12-element组件库

1, 官网: 

http://element.eleme.io/#/zh-CN

2, 安装

npm i element-ui -S

i : install,   -S  --save-dev 的简写

3, 使用 安需饮用的方式

npm install babel-plugin-component -D

 修改 .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"
      }
    ]
  ]
}

4, 在 main.js中引入需要的组件

// 引入 element
import { Button, Select } from 'element-ui';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);

5, 使用组件

 <el-row>
      <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>
    </el-row>

 

更多样式去官网查看

6, 轮播图

添加 引入组件

// 引入 element
import { Button, Select, Carousel, CarouselItem, } from 'element-ui';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */
Vue.use(Carousel)
Vue.use(CarouselItem)

 

template

<div>
      <el-carousel :interval="2000" type="card">
        <el-carousel-item v-for="(imgaa,index) in imgs" :key="item">
          <img :src="imgaa"/>
        </el-carousel-item>
      </el-carousel>
    </div>

定义data

data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        imgs: [
          "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2889938252,3793206744&fm=173&app=25&f=JPEG?w=639&h=424&s=A5D1AB66CC0937744EE54C120100C092",
          "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2889938252,3793206744&fm=173&app=25&f=JPEG?w=639&h=424&s=A5D1AB66CC0937744EE54C120100C092",
          "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2889938252,3793206744&fm=173&app=25&f=JPEG?w=639&h=424&s=A5D1AB66CC0937744EE54C120100C092",
          "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2889938252,3793206744&fm=173&app=25&f=JPEG?w=639&h=424&s=A5D1AB66CC0937744EE54C120100C092",
          "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2889938252,3793206744&fm=173&app=25&f=JPEG?w=639&h=424&s=A5D1AB66CC0937744EE54C120100C092",
          "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2889938252,3793206744&fm=173&app=25&f=JPEG?w=639&h=424&s=A5D1AB66CC0937744EE54C120100C092",
        ]
      }
    }