• 自定义element-ui主题,修改样式


    项目需求

    之前项目中引用的select选框有bug,所以需要改动,考虑到还有许多需求,果断将饿了么组件全移过来

    安装element-ui2.0.1版本

    安装完之后,我就将element-ui的组件应用上,然后编译的时候报错了。就是el-ipt找不到一类的错误,查了查资料,说是版本不一致,element-ui2.0的版本需要升级vue的版本,如下解决办法:
    更改版本 把vue 和 vue-template-compiler 都更新到了2.5.3版本
    npm remove # 卸载某个版本
    npm remove vue
    npm remove vue-template-compiler
    npm i vue@2.5.3
    npm i vue-template-compiler@2.5.3
    npm i element-ui@2.0.1

    根据官网步骤来自定义主题

    第一步:先安装npm i element-theme ,这里起先我装的是全局的,然后一直报错,就换成了项目中安装
    第二步:npm i element-theme-chalk -D 更新组件
    接下来就是et -i ,没有看清官网上写的就直接打上了,结果报错。原因是项目中安装的主题需要通过node_modules/.bin/et 访问到命令
    执行后当前目录会有一个 element-variables.scss 文件
    接下来就是在文件里修改变量内容了。

    生成引入修改后的css文件

    命令行里输入 node_modules/.bin/et 然后得到css文件,最后在main.js中引入即可。
    另外,有一些里面不能同意修改的css,我选择在外面另外写css覆盖

  • 相关阅读:
    数据库系统原理
    Java并发编程详解读书笔记(一)
    Java基础之String
    Java基础之数据类型
    winform BackgroundWorker控件的用法
    汉子转拼音
    model验证(验证登录、注册...)
    Ajax.BeginForm 异步搜索
    Ajax.ActionLink 辅助方法实现局部刷新
    js 随笔
  • 原文地址:https://www.cnblogs.com/llff123/p/8665679.html
Copyright © 2020-2023  润新知