vue-12-element组件库-白红宇

vue-12-element组件库

阅读量：4920 次

发布时间：2019-06-11

本文共 2233 字，大约阅读时间需要 7 分钟。

1, 官网:

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中引入需要的组件

// 引入 elementimport { Button, Select } from 'element-ui';Vue.component(Button.name, Button);Vue.component(Select.name, Select);

5, 使用组件

更多样式去官网查看

6, 轮播图

添加引入组件

// 引入 elementimport { 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

定义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",        ]      }    }

转载于:https://www.cnblogs.com/wenbronk/p/9735055.html

你可能感兴趣的文章

mysql 链接报 Can't connect to MySQL server on 'localhost' (10061)

查看>>

hdu 4288 Coder（单点操作，查询）

查看>>

HDU 4760 Good FireWall 完好Trie题解

查看>>