1. 程式人生 > >Vue.js框架--Ui框架的Element UI(二十四)

Vue.js框架--Ui框架的Element UI(二十四)

主要操作技能:

   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 評分