在vue项目中引入element,并改变主题色
写项目提高开发效率是最重要的,引入UI框架就是提高开发效率的有效途径。
这里就说一下自己是如何引入UI框架的——vue中引入elementUI。(项目其实早已经开发完了,只是回过头来回顾一下自己当时是怎么做的,顺便再加深一下印象)。
首先,我们得先通过npm包管理器,下载elementUI。
npm install element-ui
然后,就是main.js中引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI);
这样我们就已经将我们的element引入到我们的项目中了。
如果大家想要改变项目的主题色,请往下看。
第一步
打开“elementUI官网“
点击“自定义主题“,
找到“在线主题生成工具“
第二步
点击“在线主题生成工具“,会进到一个新的页面,点击“切换主题色“,点完之后,会出现一个弹出层,可以自己选择颜色,也可以自己输入自己的主题色,选择好之后,点击“确定“,最后记得点击“切换“,你就会看见主题色已经已经切换了。例如我设置的主题色是“#4FCC19“。
第三步
点击“下载主题“。
下载到你想要的位置,然后解压,更改文件名“element“(我取名是这个,毕竟是elementUI嘛)。
第四步
将文件引入到项目中,直接上图吧,我引入位置如下。。。
在外层新建一个文件夹命名“theme“,再引入其中。
最后一步
那当然是引入到main.js中了哦。
import ElementUI from 'element-ui'
import './theme/element/index.css'Vue.use(ElementUI);
这里值得一提的是:elementUI官网中提到通过scss文件改变主题,由于我的项目是用less写的,还没有进行研究,等自己研究了,再跟大家进行分享,如果各位有实践的,或者自己博客中有提到的,欢迎在信息中留下自己的博客地址,万分感谢!!!
在vue项目中引入element,并改变主题色相关推荐
- vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
- 如何在Vue项目中引入ArcGIS JavaScript API 创建三维可视化地图(含vue项目创建教程)
新手上路之在Vue项目中引入ArcGIS API 视频教程 B站搜索 X北辰北,感谢up主无私的教学~ B站地址:https://www.bilibili.com/video/BV18E411K7B ...
- VUE 项目中引入外部js文件(CND引入)
以VUE项目中引入echarts文件为例: 第一步在VUE项目中找到index.html文件 引入 :<script src="https://cdnjs.cloudflare.com ...
- 如何在vue项目中引入html页面
在vue项目中引入html页面的两种方法 第一种:/static/page.html 第二种:通过iframe嵌入 第一种:/static/page.html 在static或public文件夹下,新 ...
- vue项目中引入bootstrap的方法
vue项目中引入bootstrap?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 相关教程推荐:<bootstrap教程> 在 vue 项目 ...
- 【EasyExcel】在SpringBoot+VUE项目中引入EasyExcel实现对数据的导出(封装工具类)
在SpringBoot+VUE项目中引入EasyExcel实现导入导出 一.引入EasyExcel 通过maven引入,坐标如下: <dependency><groupId>c ...
- 新建vue项目并引入element组件
从新建vue项目到引入组件Element 以及Error when rendering component报错解决 一.新建项目 1.打开cmd,运行:vue init webpack Vue-Dem ...
- vue项目中引入字体包
问题: 项目开发过程中,因UI的显示要求,需要引入一些字体,那如何引入外部字体呢?很简单,只需要以下3步 一 下载对应的字体包文件,放置到我们的项目中 比如我需要PingFangSC的系列字体,我 ...
- vue项目中引入monaco editor
monaco-editor概述 monaco-editor 是微软开源的一款web代码编辑器,vscode就是集成monaco-editor来实现的. 官方示例 官方文档 使用 安装 npm安装 np ...
最新文章
- linux安装后硬盘变小,Linux硬盘安装步骤
- Android Ormlite 学习笔记1 -- 基础
- 地理防灾减灾思维导图_17张思维导图,让你轻松学好高中地理必修一
- js 中转换成list集合_程序员:java集合介绍-List,具说很详细,你不来看看?
- LINUX mysql 源码安装
- FastJson之autotype bypass
- 玩cf一直连接服务器失败怎么办啊,cf连接服务器失败怎么办?
- html文件做屏保win10,win10系统把屏保设置为桌面壁纸的处理方法
- iOS之深入探究动画渲染降帧
- 网络工程师2017上半年软考上午试题
- linux系统显卡显存容量,Linux 查看显卡显存大小
- 【GlobalMapper精品教程】035:用CASS自带数据创建高程地形、等高线教程
- a记录 mysql_[a]-和[a]相关的内容-阿里云开发者社区
- 小程序源码:云开发表情包制作神器微信小程序
- 轻松搭建影音服务器(转)
- VISIO 流程图和UML类共用后,UML类变形
- WMS仓库管理系统---(18)盘点管理初盘单移动盘点
- adobe全家桶摄影计划
- springboot根据模板生成pdf文件
- 华为云配置、TortoiseGit