Vue.js框架--Ui框架的Element UI（二十四）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hlx20080808/article/details/83379795

主要操作技能：

   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按钮

Icon 图标

Rate 评分