zoukankan      html  css  js  c++  java
  • elementUI 定制主题

     1. 用vue-cli安装一个新项目:

      2. 安装elementUI及sass-loader,node-sass

    // 安装element-ui
    npm i element-ui -S
    
    // 安装sass
    npm i sass-loader node-sass -D

    命令行主题工具

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

    果你的项目没有使用 SCSS,那么可以使用命令行主题工具进行深层次的主题定制:

    安装工具

    首先安装「主题生成工具」,可以全局安装或者安装在当前项目下,推荐安装在项目里,方便别人 clone 项目时能直接安装依赖并启动,这里以全局安装做演示。

    npm i element-theme -g

    安装白垩主题,可以从 npm 安装或者从 GitHub 拉取最新代码。

    # 从 npm
    npm i element-theme-chalk -D
    
    # 从 GitHub
    npm i https://github.com/ElementUI/theme-chalk -D

    初始化变量文件

    主题生成工具安装成功后,如果全局安装可以在命令行里通过 et 调用工具,如果安装在当前目录下,需要通过 node_modules/.bin/et 访问到命令。执行 -i 初始化变量文件。默认输出到 element-variables.scss,当然你可以传参数指定文件输出目录。

    et -i element-variables.scss

      6.编译主题

      

    et

     

     7.引入自定义主题

     我们只需要引入theme/index.css即可

        最后一步,将编译好的主题文件引入项目(编译的文件默认在根目录下的theme文件下,也可以通过 -o 参数指定打包目录),在入口文件main.js中引入

    element-theme初始化et -i报错primordials is not defined

    是node.js版本过高不兼容,使用nvm下调到11.15.0

    是node.js版本过高不兼容,使用nvm下调到11.15.0

    是node.js版本过高不兼容,使用nvm下调到11.15.0

    nvm下载地址:
    https://github.com/coreybutler/nvm-windows/releases
    下载的nvm-setup.zip

    选择自己安装地址和node.js地址
    安装过程中会提示node.js已经安装了的版本,是否nvm管理,选是

    nvm设置镜像地址

    node_mirror: http://npm.taobao.org/mirrors/node/
    npm_mirror: https://npm.taobao.org/mirrors/npm/

    安装最新版 nvm install latest

    primordials is not defined错误
    这个错误可能需要node.js版本更改到11.15.0

    命令:nvm install 11.15.0
    使用11.15.0 nvm use 11.15.0
    查看当前电脑上已经安装的全部node版本,正在使用中的版本号前有个星号:

    nvm list

    查看可用的(可下载的)全部node版本:

    nvm ls available
  • 相关阅读:
    Markdown 入门指南
    跨域
    正则表达式之基础(二)
    Java并发编程 ReentrantLock是如何通过AbstractQueuedSynchronizer(AQS)来加锁解锁的
    Java异步编程工具 CompletableFuture
    IntelliJ idea evaluate expression
    Java Arrays.asList 返回的集合执行iterator.remove报java.lang.UnsupportedOperationException问题
    ie浏览器 GET请求带中文请求,tomcat返回400
    Spring boot 集成dubbo
    [REUSE_ALV_GRID_DISPLAY_LVC]-显示单选按钮(radio button)
  • 原文地址:https://www.cnblogs.com/yeminglong/p/13930262.html
Copyright © 2011-2022 走看看