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="" 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",

        ]

      }

    }

巴特西

vue-12-element组件库

1, 官网:

2, 安装

3, 使用安需饮用的方式

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

5, 使用组件

6, 轮播图

最新文章

热门文章

巴特西

vue-12-element组件库

1, 官网:

2, 安装

3, 使用 安需饮用的方式

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

5, 使用组件

6, 轮播图

最新文章

热门文章

3, 使用安需饮用的方式