主要操作技能:
1>去官网查看http://element-cn.eleme.io/2.4/#/zh-CN/component/quickstart
2>安装: cnpm i element-ui -S
3> 在main.js文件中引入
//elementUI使用
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)
4> 运行 npm run dev
说明: ttf是字体文件;是解析不了的哦!那么就必须用webpack工具哦!
网址: https://www.webpackjs.com/
如ES6,vue 浏览器默认是无法解析的,因此需要webpack工具,可以将打包所有的资源。
打包浏览器能解析的JS
http://element.eleme.io/1.4/#/zh-CN/component/quickstart
打开工程找到package.json文件,有就无需安装哦!
在webpack.config.js中复制框的“红色部分”
5> 再重新运行 npm run dev 就OK!
6>看文档直接使用
编写代码:
<template>
<div id="sheet">
<h5>{{msg}}</h5>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<br />
<i class="el-icon-delete"></i>
<!--设置图片大小 style="font-size:40px" -->
<i style="font-size:40px" class="el-icon-loading"></i><br />
<el-rate v-model="value1" show-text></el-rate>
<el-rate
v-model="value2"
:colors="['#99A9BF', '#F7BA2A', '#FF9900']">
</el-rate>
</div>
</template>
效果:
Button按钮