Vue.js框架--Ui框架的Element UI(二十四)
阿新 • • 發佈:2018-11-16
主要操作技能:
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按鈕