美文网首页
vue中使用element-ui

vue中使用element-ui

作者: 牛会骑自行车 | 来源:发表于2020-11-17 22:49 被阅读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~~
    主题色修改成功~

    相关文章

      网友评论

          本文标题:vue中使用element-ui

          本文链接:https://www.haomeiwen.com/subject/crifiktx.html