vue+NuxtJS中使用Element-ui

vue+NuxtJS中使用Element-ui

最近开始学习NuxtJS,这里给大家提供一下官方的文档:NuxtJS官方文档。
nuxt 项目还比较年轻,但是 vue 官方推荐,且有着强大的社区支撑,所以还是有着不错的维护效率。有兴趣的小伙伴们可以学习一波,祝大家越来越强哈。不废话了来一起看看怎么在这个框架中使用element-ui吧。


1.首先在plugins中新建文件夹element-ui.js

添加的内容如下:

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

vue+NuxtJS中使用Element-ui_第1张图片

2.修改nuxt.config.js中的内容
  css: [
    {src:'element-ui/lib/theme-chalk/index.css'}
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [{
    src:'~plugins/element-ui',
    ssr: true //是能在服务端运行
}
  ],

vue+NuxtJS中使用Element-ui_第2张图片

3.随便引用点什么

vue+NuxtJS中使用Element-ui_第3张图片
vue+NuxtJS中使用Element-ui_第4张图片
喏,效果出来了。
如果有什么问题可以留言,文档写的不对希望大家能指出来。溜啦溜啦~~
vue+NuxtJS中使用Element-ui_第5张图片

你可能感兴趣的:(vue学习笔记,vue,前端)