element使用
官方网址: 点击
全局使用
1.创建项目
vue init webpack vue-ele
配置
2.安装依赖
npm install
3.安装loader模块(开发)
- npm install style-loader -D
- npm install css-loader -D
- npm install file-loader -D
4.安装ElementUI模块
npm install element-ui --S
5.在main.js中配置
- import ElementUI from ‘element-ui’
- import ‘element-ui/lib/theme-chalk/index.css’
- Vue.use(ElementUI)
6.添加build/webpack.base.conf.js 文件内容
{ test: /\\\\\\\\.css$/, loader:"style!css" }, { test: /\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\?]?.*)$/, loader:"file" }
7.使用App.vue
<template> <div id="app"> <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> </div> </template>
局部使用
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <div id="app"> <img src="./assets/logo.png"> <router-view/> <h1>引入element</h1> <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-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> </template> <script> import {Button, Select} from 'element-ui' export default { name: 'App', data() { return { options: [{ value: '选项1', label: '黄金糕' }, { value: '选项2', label: '双皮奶' }, { value: '选项3', label: '蚵仔煎' }, { value: '选项4', label: '龙须面' }, { value: '选项5', label: '北京烤鸭' }], value: '' } }, components: { [Button.name]: Button, [Select.name]: Select, } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>