Nuxt中安装使用Element-UI以及关于Nuxt的插件机制

1、安装

如果创建项目时选择安装elment-ui，就不需要安装了

npm install element-ui --save

2、配置文件

2.1、在plugins文件夹下，创建ElementUI.js文件

ElementUI.js

import Vue from 'vue'
import Element from 'element-ui'
import locale from 'element-ui/lib/locale/lang/zh-CN'

Vue.use(Element, { locale })

2.2、在nuxt.config.js中添加配置

css: [
  'element-ui/lib/theme-chalk/index.css'
],
plugins: [
  {src: '~/plugins/ElementUI', ssr: true }
],
build: {
  transpile: [/^element-ui/],
}

3、回顾vue生命周期和nuxt对比

vue生命周期方法	描述
beforeCreate	创建前，内部初始化之前执行
created	创建后，内部初始化之后执行，之前用于页面加载成功时
beforeMount	挂载前
mounted	挂载，vue组件挂载到HTML，响应浏览器。（页面还没有加载完）
beforeUpdate	数据更新前
updated	数据更新
beforeDestroy	销毁前
destroyed	销毁

• 只有 beforeCreate 和 created 这两个方法会在 客户端和服务端被调用。

• 其他生命周期函数仅在客户端被调用。

• localStorage 和 sessionStorage 都是浏览器端对象，在前端服务端没有。如果在created()使用以上2个变量，程序将抛异常（对象没有声明）

结论【掌握】

• 在nuxt.js中，将之前存放在created()中的代码，移植到 mounted()

<template>

</template>

<script>
export default {
  /*
  //created()函数在“客户端”和“服务端”都被调用，localStorage只能在客户端使用
  created() {
    localStorage.setItem('name','测试数据')
  },
  */
  mounted() {
    localStorage.setItem('name','测试数据')
  },
}
</script>

<style>

</style>

3、Nuxt插件机制

• nuxt提供插件，对已有程序增强或控制。

• 编写插件步骤

  • 1. 在~/plugins/目录下创建js文件

• 2. 在nuxt.config.js文件进行注册

• 3. 其他项目可以直接使用