废话不多说，在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的更多相关文章

  1. 使用element ui 日期选择器获取值后的格式问题

    一般情况下,我们需要给后台的时间格式是: "yyyy-MM-dd" 但是使用Element ui日期选择器获取的值是这样的: Fri Sep :: GMT+ (中国标准时间) 在官 ...

  2. element ui 1.4 升级到 2.0.11

    公司的框架 选取的是 花裤衩大神开源的 基于 element ui + Vue 的后台管理项目, 项目源码就不公开了,记录 分享下 步骤 1. 卸载 element ui 1.4的依赖包 2. 卸载完 ...

  3. [坑况]饿了么你是这样的前端——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/ ...

  4. Vue + Element UI项目初始化

    1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...

  5. Element UI——本地引入iconfont不显示

    前言 前面因为本地引入Element UI导致了iconfont不显示,所以只好再去Element UI官网去扒下iconfot 步骤 进入官网 组件 | Element UI F12进入控制台,找到 ...

  6. Html | Vue | Element UI——引入使用

    前言 做个项目,需要一个效果刚好Element UI有,就想配合Vue和Element UI,放在tp5.1下使用,但是引入在线的地址各种报错,本地引入就完美的解决了问题! 代码 __STATIC_J ...

  7. 分享一个自搭的框架，使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  8. 上传图片组件封装 element ui

    // element ui 文档地址: http://element.eleme.io/#/zh-CN <template> <div> <div class=" ...

  9. vue项目使用element ui的Checkbox

    最近使用到element ui的下拉多选框Checkbox Checkbox用法可参考与于 http://element.eleme.io/#/zh-CN/component/checkbox Che ...

  10. vue的$nextTick使用总结，this.$refs为undefined的解决办法，element Ui的树形控件setCheckedKeys方法无法使用

    其实这3个讲的是一个问题,先说下问题,我在watch里设置一个监听,当弹窗打开时,自动添加树形的默认选中项, 但奇怪的是this.$refs为undefined,自然setCheckedKeys无法使 ...

随机推荐

  1. QtAndroid具体解释(6)：集成信鸽推送

    推送是我们开发移动应用经经常使用到的功能,Qt on Android 应用也会用到,之前也有朋友问过,这次我们来看看怎么在 Qt on Android 应用中来集成来自腾讯的信鸽推送. 有关信鸽的 S ...

  2. 使用history.pushState()和popstate事件实现AJAX的前进、后退功能

    上一篇文章中.我们使用location.hash来模拟ajax的前进后退功能.使用location.hash存在以下几个问题: 1.使用location.hash会导致地址栏的url发生变化.用户体验 ...

  3. 深入浅出理解之 onInterceptTouchEvent与onTouchEvent

    参考:http://blog.csdn.net/android_tutor/article/details/7193090   与   http://www.cnblogs.com/kingcent/ ...

  4. wait

    package money.thread; import money.Log; public class AddRunner extends ExecutableRunner { private st ...

  5. Visual Studio - 引入动态库

    以VS2013为例: 1.新建项目 2.选择"Win32控制台应用程序",点确定 勾选“控制台应用程序”和“空项目”选项,点击完成,然后新建一个C文件,在文件头上右键: 3.粘贴准 ...

  6. tic-tac-toe游戏代码

    package com.p4f.tictactoe.demo; import javax.swing.border.Border; public class Board { /** * positio ...

  7. innodb_flush_log_at_trx_commit和sync_binlog参数详解

    innodb_flush_log_at_trx_commit和sync_binlog参数详解         标签:                             innodb_flush_ ...

  8. html 常用

    1. var canvas = document.getElementById("tutorial"); var ctx = canvas.getContext("2d& ...

  9. caffe使用自己的数据做分类

    这里只举一个例子: Alexnet网络训练自己数据的过程 用AlexNet跑自己的数据 参考1:http://blog.csdn.net/gybheroin/article/details/54095 ...

  10. day14 生成器的进阶

    一.生成器的两种形式  1.生成器函数的应用 # def cloth(): # for i in range(100): # yield '衣服%s'%i # # g = cloth() # for ...