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
2.下载后的文件解压到我们项目里面
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} ],
到此完成!