nuxt 极限导入element ui 可控制引入样式，修改主题色

前言

在Nuxt项目搭建之初，考虑要用到element ui
便将UI 按需引入 本文不介绍全局引入

安装

安装过程不再啰嗦
需要可自行百度
博主在创建项目时候 已经选择安装element ui
安装版本

"element-ui": "^2.15.2",

按需引入

打开 piugins 文件下的 element-ui.js

import Vue from 'vue'
import { Button} from 'element-ui'

// element 语言包
import locale from 'element-ui/lib/locale/lang/en'
// element 引入的css包 路径可自己定义 文章下面会创建此文件
import '@/styles/element-variables.scss'
Vue.use(Button)
Vue.use(locale)

element 所有组件 传送门
创建 element 样式文件 此文件位置可改变 名称自定义
文件路径引入正确即可

首先在根目录下创建 style 文件夹

然后新建 element-variables.scss 文件

这里用到了 scss 若有小伙伴到此处报错

请自行安装 scss 相关插件

/* element项目主题色 */
$--color-primary: red;

/* 改变 icon 字体路径变量，必需  不可删除*/
$--font-path: '~element-ui/lib/theme-chalk/fonts';

/** 下面方法  二选其一 **/
/** 全局引入element样式 */
/** @import "~element-ui/packages/theme-chalk/src/index"; **/

/** 按需引入element样式 */
@import "~element-ui/packages/theme-chalk/src/Icon";
@import "~element-ui/packages/theme-chalk/src/Row";
@import "~element-ui/packages/theme-chalk/src/Col";

到此element ui 按需引入已经完成
若是不知道 都有哪些样式
可以去 node_modules 下 找相关的文件
在此以 vscode 举例

在node_moduels 下搜 element
按照以下路径来找

element-ui/packages/theme-chalk/src/

就可以看到所有的文件啦
需要引入即可