开开
2744
6
9
浏览量
粉丝
关注
nuxt.js中elementUI自定义主题颜色
开开
2020-10-10 10:50:39
126
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}
  ],

到此完成!

暂无评论