vue中使用element-ui

2020-11-17  本文已影响0人  牛会骑自行车

直接给到找寻各种组件的网址:

https://element.eleme.cn/#/zh-CN/component/installation

安装ele ↓

npm install element-ui -S

main.js中引入ele ↓

import Element from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.use(Element);

在需要用到ele组件的地方直接使用即可。例如:

<el-button type="primary">默认按钮</el-button>
出现下图

tada~~
elementui在vue中使用成功~

接着可以尝试修改一下主题色。

在assets文件夹中的css里新建ele.scss文件 ↓

假设修改primary的颜色。在ele.scss文件中写 ↓

// theme color
$--color-primary: rgb(69, 137, 148);

//icon font path,require
$--font-path:"../../../node_modules/element-ui/lib/theme-chalk/fonts";

@import "../../../node_modules/element-ui/packages/theme-chalk/src/index";

在main.js中修改ele的引入 ↓

import Element from "element-ui";
import "./assets/css/ele.scss";

Vue.use(Element);
此时查看我们刚刚使用primary的基础颜色,就变成了我刚刚自己写的绿色啦 ↓

tada~~
主题色修改成功~

上一篇 下一篇

猜你喜欢

热点阅读