Nuxt学习笔记

创建项目

npx create-nuxt-app projectName

SSR 渲染流程

客户端发送 URL 请求到服务端，服务端读取对应的 URL 的模板信息，在服务端做出 HTML 和数据的渲染，渲染完成之后返回整个 HTML 结构给客户端。所以用户在浏览首屏的时候速度会比较快，并不是做了 SSR 我们的页面就不属于 SPA 应用了，它仍然是一个独立的 SPA 应用。SSR 是处于 MPA 与 SPA 应用之间的一个折中的方案，仅是首屏时候在服务端做出了渲染，其他页面还是需要在客户端渲染的。

SSR的缺点

开发条件所限。浏览器特定的代码，只能在某些生命周期钩子函数 (lifecycle hook) 中使用；一些外部扩展库 (external library) 可能需要特殊处理，才能在服务器渲染应用程序中运行。
涉及构建设置和部署的更多要求。与可以部署在任何静态文件服务器上的完全静态单页面应用程序 (SPA) 不同，服务器渲染应用程序，需要处于 Node.js server 运行环境。
更多的服务器端负载。在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用 CPU 资源，因此如果你预料在高流量环境 (high traffic) 下使用，请准备相应的服务器负载，并明智地采用缓存策略。

nuxt生命周期

 

 nuxtServerInit 对stroe操作

// store-->index.js
export const actions = {
  nuxtServerInit(store, context) {
    // 初始化东西到store里
  },
};

 middleware中间件

 需要在nuxt.js里  router字段 添加 middleware: "auth",可进行路由守卫配置

// middleware-->auth.js
export default ({ store, route, redirect, params, query, req, res }) => {
// context 服务端上下文  store状态树信息  route 一条目标路由信息  redirect 路由的强制跳转
    console.log('middleware nuxt.config.js outside')
}

// .vue文件
middleware({ store, route, redirect, params, query }) {
    console.log("middleware pages");
},

 validate参数校验

// .vue文件  
validate({ params, query }) {
    // 参数有效性校验
    console.log("validate");
    return true; // true即为通过
},

 asyncData&fetch异步请求

  // .vue文件
  // 读数据，返回给组件
  asyncData(context) {
    //异步业务逻辑，读取服务端数据
    console.log("asyncData ");
    return {
      b: 2,//该组件data中的数据
    };
  },
  // 读数据, vuex
  fetch({ store }) {
    //异步业务逻辑，读取服务端数据提交给vuex
    console.log("fetch");
  },

路由 

nuxt根据pages层级自动生成路由配置，文件名'-id.vue'表示id为params参数

声明式跳转:

11
22

扩展性路由

//nuxt.js-->router字段
  router: {
    middleware: "auth",
    // 扩展路由
    extendRoutes(routes, resolve) {
      console.log(routes);
      routes.push({
        name: "root",
        path: "/index",
        component: resolve(__dirname, "pages/index.vue"),
      });
    },
  },

全局样式

在nuxt.config.js内配置对应css全局样式

css: ["element-ui/lib/theme-chalk/index.css", "assets/style.css"],

数据交互，跨域

npm i @nuxtjs/axios、@nuxtjs/proxy --save

  //nuxt.config文件
  modules: ["@nuxtjs/axios"],
  axios: {
    proxy: true, //允许跨域
    //prefix:'api'//baseUrl
  },
  proxy: {
    "/api/": {
      target: "http://xxxx: xxxx",
      changeOrigin: true,
      pathRewrite: {
        "^/api": "",
      },
    },
  },
  //使用axios
  async asyncData({$axios}) {
  },

 VueX

 nuxt内置vuex，会自动找到store文件下的模块

// store-->index.js主模块
//模块化就新建个文件 例如user.js

//state
export const state = () => ({
})

//mutations
export const mutations = {
}


// actions
export const actions = {
    nuxtServerInit(store, context) {
    }
  }

  // getters
export const getters = {
}

loading页配置与定制

//nuxt.config文件
//定义系统默认loading效果
loading: {color:'#399'}
//或指定loading组件
loading: '@/components/loading.vue’