Nuxt使用element-ui
废话不多说,在Nuxt中引入Nuxt其实很简单,分下面几步
一、安装element-ui依赖
打开nuxt项目以后,在Terminal中通过 npm i element-ui -S 即可安装element-ui依赖
二、添加element-ui.js文件
在nuxt项目的plugins目录下新建element-ui目录,然后在element-ui目录下新建一个element-ui.js文件,内容如下所示
import Vue from 'vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)
三、在nuxt.config.js中进行配置,如下图所示
四、输入npm install 进行安装依赖文件
五、在页面中引入element-ui的组件,进行测试
六、npm run dev运行项目,观察是否有效果
这样引入的主题是element-ui默认的样式,我们可以根据自己的实际需求进行修改
Element 的 theme-chalk 使用 SCSS 编写,如果你的项目也使用了 SCSS,那么可以直接在项目中改变 Element 的样式变量。
一、在element-ui目录下新建一个样式文件 element-variables.scss
,写入以下内容:
需要注意的是,覆盖字体路径变量是必需的,将其赋值为 Element 中 icon 图标所在的相对路径即可。
二、在项目的入口文件element-ui.js中,直接引入以上样式文件即可
还有一种方式是通过命令行主题工具,这里不做说明,请自行到element-ui官网进行学习 http://element-cn.eleme.io/#/zh-CN/component/custom-theme
嗯,就酱~
Nuxt使用element-ui的更多相关文章
- 使用element ui 日期选择器获取值后的格式问题
一般情况下,我们需要给后台的时间格式是: "yyyy-MM-dd" 但是使用Element ui日期选择器获取的值是这样的: Fri Sep :: GMT+ (中国标准时间) 在官 ...
- element ui 1.4 升级到 2.0.11
公司的框架 选取的是 花裤衩大神开源的 基于 element ui + Vue 的后台管理项目, 项目源码就不公开了,记录 分享下 步骤 1. 卸载 element ui 1.4的依赖包 2. 卸载完 ...
- [坑况]饿了么你是这样的前端——vue+element ui 【this dependency was not found:'element-ui/lib/theme-chalk/index.css'】
element ui 坑况:今日pull代码,潇洒npm run dev ,被告知:this dependency was not found:'element-ui/lib/theme-chalk/ ...
- Vue + Element UI项目初始化
1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...
- Element UI——本地引入iconfont不显示
前言 前面因为本地引入Element UI导致了iconfont不显示,所以只好再去Element UI官网去扒下iconfot 步骤 进入官网 组件 | Element UI F12进入控制台,找到 ...
- Html | Vue | Element UI——引入使用
前言 做个项目,需要一个效果刚好Element UI有,就想配合Vue和Element UI,放在tp5.1下使用,但是引入在线的地址各种报错,本地引入就完美的解决了问题! 代码 __STATIC_J ...
- 分享一个自搭的框架,使用Spring boot+Vue+Element UI
废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...
- 上传图片组件封装 element ui
// element ui 文档地址: http://element.eleme.io/#/zh-CN <template> <div> <div class=" ...
- vue项目使用element ui的Checkbox
最近使用到element ui的下拉多选框Checkbox Checkbox用法可参考与于 http://element.eleme.io/#/zh-CN/component/checkbox Che ...
- vue的$nextTick使用总结,this.$refs为undefined的解决办法,element Ui的树形控件setCheckedKeys方法无法使用
其实这3个讲的是一个问题,先说下问题,我在watch里设置一个监听,当弹窗打开时,自动添加树形的默认选中项, 但奇怪的是this.$refs为undefined,自然setCheckedKeys无法使 ...
随机推荐
- POJ 3561 Pseudographical recognizer
[题意简述]:矩阵中除了'.'仅仅能出现一种符号.是这些之中的一个'‑', '|', '\', or '/',并且就是当除了'.'之外还仅仅有一种符号时.这个符号还必须连成一条直线,否则就是错的,这个 ...
- Linux 中 eclipse 的tomcat端口号被占用
1.打开ubuntu启动器(快捷键是 win)--键入 sys--找到 系统监视器(System Monitor) 2.打开系统监视器--找到进程中的java 这个进程--结束该进程
- Oracle 数据库的连接
仿照http://blog.csdn.net/makenothing/article/details/17080069 1 建立Oracle连接 VS2010中加入数据库连接 得到连接字符串 Data ...
- Virtex6 PCIe 超简版基础概念学习(一)
文档版本 开发工具 测试平台 工程名字 日期 作者 备注 V1.0 ise14.7 DBF板 Day2/PCIETest1 2016.03.31 lutianfei none 参考资料: Sparta ...
- 李洪强经典面试题48-C语言
可能碰到的iOS笔试面试题(4)--C语言 C语言,开发的基础功底,iOS很多高级应用都要和C语言打交道,所以,C语言在iOS开发中的重要性,你懂的.里面的一些问题可能并不是C语言问题,但是属于计 ...
- form表单右边弹窗提示不能为空
if (key == null || key == "") { layer.tips('流程标识key不能为空', $('#search_input'), { tips: [3, ...
- iOS开发密码输入数字和字母混合
#import "TestInPut.h" @implementation TestInPut +(BOOL)judgePassWordLegal:(NSString *)pass ...
- Web渗透实验:基于Weblogic的一系列漏洞
1. 攻击机windows10 192.168.2.104 2. 靶机ip: 192.168.2.109(linux Ubantu) 192.168.2.111(windows2008R264位) 第 ...
- java获取真实的ip地址
直接上代码,获取请求主机的IP地址,如果通过代理进来,则透过防火墙获取真实IP地址 public class IPUtil { private static final Logger logger = ...
- 设备树API
引子 首先看一个例子,也可参考linux设备树语法中的gpio示例.该示例选自openwrt的gpio-button-hotblug驱动. 设备树code: gpio-keys-polled { co ...