您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生
elementUi完整_转(按钮,图标,评分)
发布时间：2023-04-11 22:09:17编辑：雪饮阅读（）
-
安装element-ui
npm i element-ui –S
我的理解：这里i相当于install S相当于--save
配置element-ui
在main.js中局部配置如
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
然后重新npm run dev就会出现类似如
ERROR in ./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.ttf
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./node_modules/css-loader!./node_modules/element-ui/lib/theme-chalk/index.css 7:177-213
@ ./node_modules/element-ui/lib/theme-chalk/index.css
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
ERROR in ./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.woff
Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./node_modules/css-loader!./node_modules/element-ui/lib/theme-chalk/index.css 7:101-138
@ ./node_modules/element-ui/lib/theme-chalk/index.css
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
这样的错误，这种错误需要在webpack.config.js中新增配置如
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
}
新增于大概69行左右，再次重新运行即可。
然后这里主要是使用一个单独的路由对应的一个组件ElementUI_Practice.vue来了解下
element-ui的按钮组件、图标组件、评分组件。
ElementUI_Practice.vue如：
<template>
<div>
<div>这里是ElementUI的练习区</div>
<hr/>
<!---成功按钮、警告按钮、危险按钮--->
<el-button type="success">成功按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
<!---
菜单图标
elementui的图标类组件是基于字体来实现的，
所以可以直接使用font-size来控制其大小
--->
<hr/>
<i style="font-size:48px;" class="el-icon-menu"></i>
<hr/>
<!---
评分组件
评分组件的v-model绑定评分数据于data里面的一个变量
--->
<el-rate v-model="value1"></el-rate>
</div>
</template>
<script>
export default {
data(){
return {
value1:5
}
}
}
</script>
关键字词：按钮,图标,评分,elementUi