nuxt按需引入 element-UI、自定义主题色(终极按需引入)
首先你要知道 nuxt.js怎么引入第三方插件 ;
不多BB。
一、按需引入element-UI
第一步:安装 babel-plugin-component:
npm install babel-plugin-component -D
第二步:修改plugins/element.js文件(plugins/element.js不知道怎么来的?出门左拐不送 nuxt.js怎么引入第三方插件 ):
import Vue from 'vue' import { Button, Input } from 'element-ui' Vue.use(Button)
Vue.use(Input)
按照这个格式引入自己需要的组件就是了。
第三步:添加nuxt.config.js中的build配置:
export default {
build: {
// 按需引入element-ui
babel: {
plugins: [
[ "component", {"libraryName": "element-ui", "styleLibraryName": "theme-chalk"}]
]
},
/*
** You can extend webpack config here
*/
extend(config, ctx) {
}
}
}
二、自定义主题色
引入element-UI之后,在 /assets/scss 下新建一个 element-variables.scss 文件,文件名应该是可以自己随便取
element-variables.scss:
/* 改变主题色变量aaa */
$--color-primary: green; /* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts'; @import "~element-ui/packages/theme-chalk/src/index"; // 这个地方后面要 改成 样式按需引入,请继续看下文
然后就可以了,终于看到期待已久的绿色:
绿意盎然,心花怒放。
想了解更多请移步element-UI官方文档
---------------------分割线-------------------
三、element-UI样式按需引入(终极按需引入)
刚才研究了一下,以上按需引入只是按需引入组件,但是element的样式还是全部引入了,没有做好按需引入样式,所以样式也按需引入一下:
在element-variables.scss里面按需引入样式:
/* 改变主题色变量aaa */
$--color-primary: green; /* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts'; // @import "~element-ui/packages/theme-chalk/src/index"; // 样式也按需引入,嘿嘿嘿
@import "~element-ui/packages/theme-chalk/src/button";
@import "~element-ui/packages/theme-chalk/src/input";
打包体积又可以减小几十k啦
nuxt按需引入 element-UI、自定义主题色(终极按需引入)的更多相关文章
- element ui 自定义主题失败(primordials is not defined)
卸载: 1.卸载cnpm npm uninstall cnpm -g 2.卸载vue-cli npm uninstall @vue/cli -g 3.卸载nodejs和删除文件 C:\Program ...
- vue Cli 按需引入Element UI 和全局引用Element UI
全局引用: 一.安装 Element UI npm i element-ui -S 二.在main.js 中引入 element UI import ElementUI from 'element-u ...
- vue-cli按需引入Element UI组件
一.环境 使用vue-cli搭建的环境 二.安装 babel-plugin-component npm install babel-plugin-component -D 三.修改.babelrc文件 ...
- vue-cli脚手架引入element UI的正确打开方式
element UI官网教程:http://element-cn.eleme.io/#/zh-CN/component/quickstart 1.完整引入,直接了当,但是组件文件不是按需加载,造成多余 ...
- element 如何自定义主题
自定义主题 在我学习element的时候,就直接忽略了.现在返回来学习一下 ,原来 通过自定义主题可以改变elemnt中默认的一些样式.这样,对于一些不想用elment自带但是用到比较多的样式,可以进 ...
- 在webpack自定义配置antd的按需加载和修改主题色
最近使用antd来做react项目的UI.从antd官网上,在使用create-react-app脚手架搭建项目时步骤如下: (1)添加模块 react-app-rewired, babel-plug ...
- vue按需引入Element UI的方法
在我们的实际项目开发中,多数是采用按需引入的模式来进行开发的,那么具体应该如何操作呢,可能会有许多新人傻傻分不清楚,具体将在下文讲到. 首先我们先vue create demo创建一个项目出来此时我们 ...
- 在vue2.x项目中怎么引入Element UI
参考:https://blog.csdn.net/u014054437/article/details/79862793 Element使用方法:https://element.eleme.cn/#/ ...
- 搭建Nuxt项目(搭配Element UI、axios)
使用Nuxt Nuxt.js文档:https://zh.nuxtjs.org/guide/ 开始 初始化Nuxt项目 npx create-nuxt-app <项目名> // or yar ...
随机推荐
- OpenCV中数据转换
在OpenCV中Mat.CvMat和IplImage类型都可以代表和显示图像.IplImage由CvMat派生,而CvMat由CvArr派生即CvArr -> CvMat -> IplIm ...
- JQ each 各种标签
类选择器: $("input[class=class1]").each(function(){ alert($(this).val()); }); ID选择器: $("i ...
- 【Henu ACM Round#18 E】Anya and Cubes
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 每个数字有3种选择. 1.选中它. 2.选中它且加阶乘符号 3.不选中它(即计算和的时候不考虑它) 如果我们直接暴力写的话复杂度是\ ...
- H+后台主题UI框架---整理
本篇文章是对H+这种框架进行整理,顺便了解一下标准的代码规范的写法. 一.表单: 1).下面是一个基本表单: 现在来看这个表单的结构: 1.整个表单的外框结构是一个div,至于padding和marg ...
- 菜鸟之路——Java并发(二)ThreadLocal
一.什么是ThreadLocal ThreadLocal,非常多地方叫做线程本地变量,也有些地方叫做线程本地存储.事实上意思几乎相同.非常多博客都这样说:ThreadLocal为解决多线程程序 ...
- 一题多解(三)—— Python 字符串的拼接
1. format def event_log(name, time): print('Event: {}, happens at {}'.format(name, str(time))) 2. 使用 ...
- 82.QT实现委托构造
#include "mainwindow.h" #include <QApplication> //创建一个MainWindow类 class myclass { pr ...
- sqlserver 小计合计总计
SELECT CASE WHEN GROUPING(F1) = 1 THEN '总计'WHEN GROUPING(F1) = 0 AND GROUPING(F2) = 1 THEN F1+'合计'W ...
- #学习笔记#——JavaScript 数组部分编程(三)
3.在数组 arr 末尾添加元素 item.不要直接修改数组 arr,结果返回新的数组 主要考察数组的concat方法,代码如下: arr.concat(item); concat 方法不修改原数组. ...
- 洛谷 P1358 扑克牌
P1358 扑克牌 题目描述 组合数学是数学的重要组成部分,是一门研究离散对象的科学,它主要研究满足一定条件的组态(也称组合模型)的存在.计数以及构造等方面的问题.组合数学的主要内容有组合计数.组合设 ...