详解Nuxt.js中使用Element-UI填坑


Posted in Javascript onSeptember 06, 2019

Nuxt.js是Vue进行SSR的一个优选开源项目,可免去繁琐的Webpack、nodejs后台服务配置等操作,方便的搭建一个支持SSR的VUE项目。Element-UI则是一个机遇Vue2.0+开发的一套UI框架,实现了常用的组件,可帮助开发者快速搭建一个如CMS系统、后台管理系统等基于Vue的系统。

由于Element-UI目前在SSR支持方面还是不够完善,且Nuxt.js在文档方面也有欠缺,所以在Nuxt.js中使用Element-UI也是一段坑路,需要去将查看Nuxt源码与Element-UI文档相结合才可以填完坑。

1、创建Nuxt.js的项目

Nuxt.js提供了一个vue-cli的模板,可以快速的开始coding的工作。

vue init nuxt/starter \

2、添加Element-UI

与其他组件一样,直接通过npm或者yarn即可添加。

yarn add element-ui

在Nuxt.js中使用Element-UI需要通过plugins的方式引入,所以我们需要配置nuxt.config.js文件。

css: [
  '~assets/css/main.css',
  'element-ui/lib/theme-default/index.css'
 ],
 build: {
  vendor: [
   'axios',
   'element-ui'
  ],
  babel: {
   plugins: [['component', [{
    libraryName: 'element-ui',
    styleLibraryName: 'theme-default'
   }]]]
  },
  loaders:[
   {
    test: /\.css$/,
    loader: 'vue-style-loader!css-loader'
   },
   {
    test: /\.(png|jpe?g|gif|svg)$/,
    loader: 'url-loader',
    query: {
     limit: 1000, // 1KO
     name: 'img/[name].[hash:7].[ext]'
    }
   },
   {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    query: {
     limit: 1000, // 1 KO
     name: 'fonts/[name].[hash:7].[ext]'
    }
   }
  ],
  postcss: [
   require('autoprefixer')({
    browsers: ['last 3 versions']
   })
  ]
 },
 plugins: ['~plugins/element-ui'],

同时,我们需要在根目录下新建一个plugins的目录,添加一个element-ui.js的文件,文件内容如下:

import Vue from 'vue'

if (process.BROWSER_BUILD) {
 Vue.use(require('element-ui'))
}

通过此种方式即可实现在Nuxt.js中使用Element-UI。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 的addEventListener()及attachEvent()区别分析
May 21 Javascript
js出生日期 年月日级联菜单示例代码
Jan 10 Javascript
JS中的log对象获取以及debug的写法介绍
Mar 03 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 Javascript
详谈js原型继承的一些问题
Sep 06 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
Jan 07 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
webpack4打包vue前端多页面项目
Sep 17 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
May 16 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
Sep 06 #Javascript
Nuxt使用Vuex的方法示例
Sep 06 #Javascript
vue中input的v-model清空操作
Sep 06 #Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 #Javascript
layui 表格操作列按钮动态显示的实现方法
Sep 06 #Javascript
基于Vue和Element-Ui搭建项目的方法
Sep 06 #Javascript
微信小程序 搜索框组件代码实例
Sep 06 #Javascript
You might like
Protoss兵种介绍
2020/03/14 星际争霸
php开发环境配置记录
2011/01/14 PHP
php排序算法(冒泡排序,快速排序)
2012/10/09 PHP
php实现分页工具类分享
2014/01/09 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
jQuery的deferred对象详解
2014/11/12 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
2015/07/28 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
详解webpack与SPA实践之开发环境搭建
2017/12/18 Javascript
vue-cli 组件的导入与使用教程详解
2018/04/11 Javascript
javascript的this关键字详解
2019/05/20 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
使用js获取身份证年龄的示例代码
2020/12/11 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
python中执行shell命令的几个方法小结
2014/09/18 Python
python实现简单的TCP代理服务器
2014/10/08 Python
pandas 快速处理 date_time 日期格式方法
2018/11/12 Python
python将时分秒转换成秒的实例
2019/12/07 Python
python 将dicom图片转换成jpg图片的实例
2020/01/13 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
pycharm 快速解决python代码冲突的问题
2021/01/15 Python
专科毕业生自我鉴定
2013/12/01 职场文书
班组长的岗位职责
2013/12/09 职场文书
优秀党务工作者事迹材料
2014/05/07 职场文书
湖南省党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
大学生学年个人总结
2015/02/15 职场文书
食堂卫生管理制度
2015/08/04 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL