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

xiaoxiao2025-07-23  31

主要操作技能:

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

转载请注明原文地址: https://www.6miu.com/read-5033561.html

最新回复(0)