介绍

对于一个前端小白来说,使用一套已有的框架作为基础,可以达到事半功倍的效果,在这里我们选择Element。Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库(官方文档中的叙述),下面我们将开始在之前搭建好的nuxt项目中引入element-ui。

准备

1.首先用webstorm工具打开之前建好的nuxt项目,按住Alt+F12快捷键,打开Terminal终端,输入npm run dev启动项目,记住必须在当前项目的路径下。

2.打开Element的中文官方网站,点击右上角组件按钮,正式进入组件库 ,Element中文官方文档网址:http://element.eleme.io/#/zh-CN

3.在组件库里任意选择一段代码复制到项目中pages文件夹下index.vue的页面中

<!-- element-ui中按钮样式 -->
<el-button type="danger">危险按钮</el-button> element-ui中按钮样式

4.按住ctrl+s保存修改,即页面自动显示刚修改内容,无需重新启动项目,可以看到此时的页面只显示“危险按钮“这几个字,并没有显示任何样式,这是因为我们还没有在项目中引入element-ui这个组件库

引入

1.首先在package.json添加element-ui依赖

"element-ui": "^2.0.11"

2.添加依赖完成之后,光标定位在terminal处,按住ctrl+c快捷键,输入y,停止当前启动项目,重新进行npm install,下载依赖包,下载完成之后,查看文件夹node_modules,发现下面多了element_ui的依赖包

3.在plugins文件夹下,添加ElementUI.js文件,内容如下所示

import Vue from 'vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)

4.在nuxt.config.js中添加配置

plugins: [{
src: '~plugins/ElementUI',
ssr: true,
}],
css: [
'element-ui/lib/theme-chalk/index.css'
],
vendor:['element-ui']   //防止element-ui被打包多次

5.使用npm run dev重新启动项目,此时访问http://localhost:3000,发现页面上已经显示了element的组件样式。


说明:本文为原创作品,若有参考会在文中提及,如有遗漏,涉及侵权,请联系本人,将立即修正。

nuxt中全局引入element-ui的更多相关文章

  1. 在vue2.x项目中怎么引入Element UI

    参考:https://blog.csdn.net/u014054437/article/details/79862793 Element使用方法:https://element.eleme.cn/#/ ...

  2. vue Cli 按需引入Element UI 和全局引用Element UI

    全局引用: 一.安装 Element UI npm i element-ui -S 二.在main.js 中引入 element UI import ElementUI from 'element-u ...

  3. vue-cli脚手架引入element UI的正确打开方式

    element UI官网教程:http://element-cn.eleme.io/#/zh-CN/component/quickstart 1.完整引入,直接了当,但是组件文件不是按需加载,造成多余 ...

  4. vue中的swiper element ui

    欢迎加入前端交流群交流知识&&获取视频资料:749539640 很多同学问,怎么把swiper引入到vue的脚手架里去,之前的一篇博客有提到怎么引入,但是后来感觉不怎么好,还是用一些v ...

  5. 搭建Nuxt项目(搭配Element UI、axios)

    使用Nuxt Nuxt.js文档:https://zh.nuxtjs.org/guide/ 开始 初始化Nuxt项目 npx create-nuxt-app <项目名> // or yar ...

  6. vue中,使用element ui的弹窗与echarts之间的问题

    今天项目中有个需求,就是在页面中点击一个图标,弹出一个抽屉式的弹窗(弹窗是element UI的抽屉),弹窗里边是echarts呈现的数据,当我直接用echarts的时候,报错dom没有获取到: 这就 ...

  7. vue-cli按需引入Element UI组件

    一.环境 使用vue-cli搭建的环境 二.安装 babel-plugin-component npm install babel-plugin-component -D 三.修改.babelrc文件 ...

  8. vue-cli3项目中全局引入less sass文件 以及使用本地图片在不同地方规则

    第一种直接在main.js中引入,需要声明loader demo: import '!style-loader!css-loader!less-loader!./assets/css/common.l ...

  9. vue按需引入Element UI的方法

    在我们的实际项目开发中,多数是采用按需引入的模式来进行开发的,那么具体应该如何操作呢,可能会有许多新人傻傻分不清楚,具体将在下文讲到. 首先我们先vue create demo创建一个项目出来此时我们 ...

随机推荐

  1. @Component默认是单例还是多例?

    @Component默认是单例还是多例?   答: @Component注解默认实例化的对象是单例,如果想声明成多例对象可以使用@Scope("prototype") @Repos ...

  2. JAVA8 JVM内存结构变了,永久代到元空间

    在文章<JVM之内存结构详解>中我们描述了Java7以前的JVM内存结构,但在Java8和以后版本中JVM的内存结构慢慢发生了变化.作为面试官如果你还不知道,那么面试过程中是不是有些露怯? ...

  3. Kafka Connect REST Interface

    Since Kafka Connect is intended to be run as a service, it also supports a REST API for managing con ...

  4. Http协议!(转)

    背景 我们在测试中,经常与http协议, URL打交道,不时会修改URL的参数来达到不同的测试目的或者转到不同的页面,那么,你对HTTP协议了解多少呢?今天我们来总结下. #1 HTTP协议简介 HT ...

  5. 【长期更新】Python使用随想笔记

    Q1:python函数传参是传值还是传引用? A:Python参数传递采用的肯定是"传对象引用"的方式.这种方式相当于传值和传引用的一种综合.python不允许程序员选择采用传值还 ...

  6. MySQL 事务一览

    MySQL 中的事务? 对 MySQL 来说,事务通常是一组包含对数据库操作的集合.在执行时,只有在该组内的事务都执行成功,这个事务才算执行成功,否则就算失败.MySQL 中,事务支持是在引擎层实现的 ...

  7. U盘防病毒

    1.待查 http://jingyan.baidu.com/article/a3f121e4ced14ffc9052bbca.html

  8. Redis 常用命令学四:集合类型命令

    1.增加和删除命令 127.0.0.1:6379> SADD st a (integer) 1 127.0.0.1:6379> SADD st r f g (integer) 3 127. ...

  9. C++Primer 5th Chap7 Classes

    this关键字: 在成员函数内部可以直接调用函数的对象的成员(类成员的直接访问看做是对this隐式引用,默认this指向非常量) 例如:string isbn() const{return this- ...

  10. Python标准库之sched模块介绍

    sched——通用时间调度器 sched模块实现了一个通用事件调度器,在调度器类使用一个延迟函数等待特定的时间,执行任务.同时支持多线程应用程序,在每个任务执行后会立刻调用延时函数,以确保其他线程也能 ...