登录/注册
小开开
2649
占位
2
占位
0
浏览量
占位
粉丝
占位
关注
nuxt.js中elementUI自定义主题颜色
小开开
2020-10-10 10:50:39 2020-10-10
337
0

elementUI已经有了element-theme可以更换主题颜色了,那我们想自定义主题,字体,边框,提示颜色等等比较细化一点的需求,elementui也能满足我们

1.首先去elmentui官网(https://element.eleme.cn/#/zh-CN/theme/preview)选好您的主题颜色,如下图的代码网主题颜色#1a5f5f

1.png

2.下载后的文件解压到我们项目里面

2.png

3.在nuxt项目的/plugins/elmentUI.js中引用主题的三个文件

import Vue from 'vue'
import '../assets/css/theme/index.css'
import '../assets/css/theme/fonts/element-icons.ttf'
import '../assets/css/theme/fonts/element-icons.woff'
import {
Form, Input, FormItem, Message,
Card, Carousel, CarouselItem, Dialog,
Menu, Container, Header, MenuItem, Button,
Table, TableColumn, Main, Footer, Divider, Select, Option,
Tabs, TabPane, Dropdown, DropdownMenu, DropdownItem, Submenu, Tag, Pagination
} from "element-ui";
Vue.use(Main);
......

4.nuxt配置nuxt.config.js文件中plugins引用我们刚才新建的文件,如:elmentUI.js

  plugins: [
{src: '@/plugins/ElementUI',ssr: true},
{src: '@/plugins/axios',ssr: true},
{src: '@/plugins/baidu',ssr: true},
{src: '@/plugins/login',ssr: true}
],

到此完成!

暂无评论