Nuxt.js的学习

Posted 2021-09-04 捡黄金的少年

1、下载nuxt.js 的脚手架

npm install -g create-nuxt-app

这个命令默认下载的是最新版，现在的最新版是3.7.1，而我学习的是2.15.0，所以我需要指定版本安装（方便学习）

 下载指定nuxt.js的版本

npm install -g create-nuxt-app@v2.15.0

 2、  创建项目（nuxt-demo1）

create-nuxt-app nuxt-demo1

 3、页面文件件详情

4、nuxt.js的配置

5、pages和layout

         pages下面的index.vue，默认以组件   <nuxt />方式注册到layOut文件夹下面的default.vue文件中，如果要修改默认配置，则在pages文件夹下面的index.vue中添加layout,用于修改默认配置。

 layout() {
    return "blog"
  },

3、错误页的配置

在layouts文件夹下面配置一个错误页，如果出现错误，nuxt.js会主动找到这个错误页，并把它放到，defult.vue下面的<nuxt/>里面

如：没有找到test页面，把错误页面显示出来

 4、plugin插件的配置学习

1、注入Vue插件

将内容注入Vue实例，避免重复引入，在Vue原型上挂载注入一个函数，所有组件内都可以访问(不包含服务器端)。

plugins/vue-inject.js :

import Vue from 'vue'
// 这是一种配置插件的方法
// Vue.prototype.$myInjectedFunction=string => console.log("绑定到Vue中的实例",string)
// 上面相当于下面的简写
Vue.prototype.$myInjectedFunction=function(string){
console.log("绑定到Vue实例中的参数：",string)
}

nuxt.config.js :

export default {
 plugins: ['~/plugins/vue-inject.js']
}

plugin-vue.vue : 

mount是运行在客户端的，created是运行在服务器端的

export default {
 mounted () {
 this.$myVueFunction('test')
 }
}

访问 http://192.168.13.123:3000/plugin-vue，就可以查看控制台打印的日志

2、注入 context

plugins/ctx-inject.js :

export default ({ app }, inject) => {
 app.myContextFunction = string => console.log('绑定到Context的方法参数', string)
}

 nuxt.config.js

export default {
 plugins: ['~/plugins/ctx-inject.js']
}

 plugin-ctx.vue :

asyncData和layout都是运行的服务器端代码，return "blog";指定显示的页面。默认是layouts/defult.vue

  layout(context) {
    context.app.myContextFunction("context");
    return "blog";
  },
  data() {
    return {};
  },
  asyncData({ app }) {
    app.myContextFunction("在asyncData中的context");
  },

 3、同时注入在 context ， Vue ， Vuex 实例

plugins/all-inject.js

export default ({ app }, inject) => {
 inject('myAllFunction', string => console.log('绑定到Context和Vue的方法参数', string))
}

uxt.config.js : 

export default {
 plugins: ['~/plugins/all-inject.js']
}

plugin-all.vue

 //服务端
  asyncData({ app }) {
    //   方法名称前面不能少了$
    app.$myAllFuntion("asyncData的值");
  },
  //不能使用Created()，因为created是服务端渲染
  //客户端渲染(Vue)
  mounted() {
    this.$myAllFuntion("mounted的值");
  },

 插件使用限制

export default {
 plugins: [
 { src: '~/plugins/combined-inject.js' },
 { src: '~/plugins/combined-inject.js', mode: 'client' }, // 插件只会在客户端运行。
 { src: '~/plugins/combined-inject.js', mode: 'server' }, // 插件只会在服务端运行。
 ]
}

 如果只允许服务端，那么放在mounted中的客户端，拿不到插件就会报错