详解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 相关文章推荐
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
May 22 Javascript
Javascript表格翻页效果的具体实现
Oct 05 Javascript
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
Vue中组件之间数据的传递的示例代码
Sep 08 Javascript
微信小程序template模板实例详解
Oct 27 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 Javascript
浅析vue-router原理
Oct 19 Javascript
p5.js实现简单货车运动动画
Oct 23 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
Dec 21 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
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
一个简单的php加密解密函数(动态加密)
2013/06/19 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
php字符串截取函数mb_substr用法实例分析
2019/06/25 PHP
Extjs中常用表单介绍与应用
2010/06/07 Javascript
js与C#进行时间戳转换
2014/11/14 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
清除输入框内的空格
2016/12/21 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
vue动态注册组件实例代码详解
2019/05/30 Javascript
vue实现分页加载效果
2019/12/24 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
python批量提交沙箱问题实例
2014/10/08 Python
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
python实现读取命令行参数的方法
2015/05/22 Python
python dataframe astype 字段类型转换方法
2018/04/11 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
python实现朴素贝叶斯算法
2018/11/19 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
Old Navy加拿大官网:美式休闲服饰品牌
2017/09/26 全球购物
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
如何理解transaction事务的概念
2015/05/27 面试题
最新党员的自我评价分享
2013/11/04 职场文书
小学庆六一主持词
2015/06/30 职场文书
礼貌问候语大全
2015/11/10 职场文书
《女娲补天》教学反思
2016/02/20 职场文书