学习nuxtjs 第一天这是我参与「第五届青训营」伴学笔记创作活动的第 2 天安装nuxtjs 相关的操作详情可以

这是我参与「第五届青训营」伴学笔记创作活动的第 2 天

安装nuxtjs 相关的操作

详情可以查看官网链接：www.nuxtjs.cn/guide/insta…

在安装过程中的选项

✨  Generating Nuxt.js project in nuxtjstry
? Project name: nuxtjstry                               项目名
? Programming language:                                 JavaScript  程序设计语言 
? Package manager: Npm                                  包管理器
? UI framework: None                                    ui框架
? Template engine: HTML                                 nuxt的js模板
? Nuxt.js modules: Axios - Promise based HTTP client    代码校验工具
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)  测试框架    
? Testing framework: None       渲染模式
? Rendering mode: Universal (SSR / SSG)     部署目标
? Deployment target: Server (Node.js hosting)   开发工具
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)  版本控制工具
? What is your GitHub username? LEnd
? Version control system: Git

nuxtjs 中的一些基础情况

在pages 页面内直接创建对应的.vue 文件，对文件内容进行编写，将会在.nuxt文件内配置对应的router 路由
在.vue 中调用相关的组件 components里面的相关名称直接<文件名称> 引用当然如果想要导入也是可以

import xxx form '@/xxx'
export default{
    components:{
        xxx
    }
}

这里能够直接调用的主要原因是因为nuxt.config.js 里面有相对应的配置将components 改为flase 后就必须要引用导入 components: true,

nuxt生命周期

nuxt服务端 nuxtServerInit nuxtServerInit( store, context ){ 参数1 : vuex 上下文参数2 : nuxt 上下文 }
中间件 RouteMiddleware 可以全局或者局部去做对应的导航守卫验证

服务端生命周期

全局中间件

需要去 nuxt.config.js 当中进行配置

```js
  router:{
    // middleware:'auth'   // ''内部写入对应的中间件名称 
    }
```
同时去项目最外层 新建一个middleware 的文件夹 
我们新建一个auth.js 的测试文件
```js
export default function () {

    console.log('middleware auth');
}
```

局部中间件写法1

无需再nuxt.config.js 当中进行配置中间件
直接在对应的组件中进行配置即可
例如 我们在pages/index.vue 当中进行配置
```vue
export default{
    name:'IndexPage',
    middleware:'auth' //''内部写入对应的中间件名称 
}
```
此时会发现 尽在当前 index 内部会有相关的调用 其他页面不会调用

局部中间件写法2

直接在 对应的.vue 文件里面进行书写相关的中间件操作即可
我们对pages/list.vue 文件进行操作测试
```vue
export default {
    name:'IndexPage',
    middleware(){
        console.log('hello this is middleware')
    }
}

以上三种运行后都可以发现会先运行nuxtServerInit 再运行 minddleware

我们来看一下对应的中间件参数 store, route, 路由信息 redirect, 重定向 params, 页面跳转参数传递(隐式到url传值) query, 页面跳转参数获取(显示到url传值) req, 请求头 res, 请求接口，响应体

中间件的作用有很多，比如其中有验证登录信息的作用

export default function ({store,route,redirect,params,query,req,res}) {
    // 判断登录信息的情况 
    let token = store.state.token;//获取token 
    if( !token ){ 
        redirect('/list');//重定位
    }

    console.log('middleware auth');
}

这是通过验证token 进行页面转跳

需要与对应的 token 赋值进行联动我们在这里进行设置token store/index.js

export const state ={
    token :'这是我们的测试token 可以通过这个方式来保存'
}

export const mutations ={
    setToken(state,token){
        state.token =token; //state.token 是上方的token token 是对应的参数token
    }
}

export const actions = {
    // 服务端生命周期函数 nuxtServerInit / RouteMiddleware / ValidityState() /...
    nuxtServerInit(store, context) { //第一个运行的生命周期

        store.commit('setToken','更新token') //这里的方法对应mutations 当中的setToken方法

        console.log(store, 'nuxtServerInit' )
    }
}

validate() 生命周期函数

主要用于校验url 参数是否正确的 validate({params,query}){ } 当我们假设我们需要传递的值不正确时，就会有相关的报错来进行提示

我们在pages/list.vue 页面进行相关的测试

export default { 
  name: 'IndexPage',
    validate({params,query}){
       console.log('validate')
      //  return true;//这里是需要返回true的 才会正常的显示 否则会返回404
      // 我们这里可以通过 正则表达式 来进行书写判断，当不正确的传值 则显示404
      return /^\d+$/.test(query.id)
    }
}

asyncData() 生命周期

仅限于页面组件 也就是说仅仅只能在pages内部进行使用，在components中是无法使用的。每次在加载之前被调用，所以一般都在这里书写发送请求数据

我们在index.vue页面进行测试

asyncData({store,params}){}

fetch() 生命周期

可以在组件中去用，也可以在页面中去用，功能是相似的都可以用来请求数据接口。 fetch 方法用于渲染页面前填充应用的状态树(store) 数据,与asyncData 方法类似，不同的是，他不会设置组件的数据

服务端和客户端共有的生命周期

beforeCreate()

created()

beforeMount()

客户端有的生命周期

和vue当中的一模一样 beforeMount()

Mount()

beforeUpdata()

updated()

beforeDestroy()

destroyed()

总结：今天根据变动，于是我们决定用我们熟悉的vue框架相关的nuxtjs 进行学习来使用。记录下，相关的学习笔记，总体来说nuxtjs也是蛮好用的

学习nuxtjs 第一天