Nuxt.js快速上手

---

Nuxt.js快速上手

---

1、为什么用nuxt

vue-cli本身问题

• SEO：即搜索引擎优化是通过优化网站的内容、结构和其他相关因素，以提高网站在搜索引擎中的排名，增加有机（非付费）搜索流量的过程。SEO旨在使网站更容易被搜索引擎索引和理解，并提供与搜索用户意图相匹配的高质量内容。
• 条件：
  1. 要求是多页面（非SPA）
  2. 包含title、description、keyword等页面描述信息
  3. 网站内容怎么来(页面渲染前拿到数据，还是渲染后拿到数据)
• 使用Vue CLI构建的Vue项目在打包后会生成一个index.html文件，这是一个单页面应用（Single Page Application，SPA）的入口文件；且不是每个页面都包含各自title、description、keyword等页面描述信息；在页面渲染后才能拿到数据，爬虫无法抓取。故vue-cli存在较差的SEO。

预渲染

• 渲染就是把数据放到页面上，预渲染就是在页面加载完成之前把数据放到页面

• 流程：

  1. 读取配置，获取需要预渲染的页面
  2. 发布机模拟浏览器环境打开页面
  3. 页面脚本触发渲染机制
  4. 渲染出当前的页面内容
  5. 获取当前所有的DOM结构
  6. 生成HTML文件

• 使用插件：prerender-spa-plugin

  • vue项目中安装prerender-spa-plugin，npm install prerender-spa-plugin -S
  • vue.config.js进行配置

• 修改title描述关键词：vue-meta-info

  • vue项目中安装vue-meta-info，npm install vue-meta-info -S
  • 页面组件进行配置：

  metaInfo:{
      title:'',
      meta:[{
          name:'',
          content:''
      }]
  }
  

• 优点：

  1. 打包生成多页面
  2. 可以解决每个页面单独title描述关键词
  3. 接口数据在html生成之前就放到页面上，爬虫可以抓取到内容

• 缺点：

  1. 预渲染无法配置动态路由
  2. title描述关键词不能来自接口的数据
  3. 在html页面加载之前数据过来渲染后才有html的dom结构，可能存在页面空白的情况

• 应用场景：

  • 一个项目某几个页面需要做SEO

服务端渲染(通过SSR)

• 关于 Nuxt.js - NuxtJS | Nuxt.js 中文网

• 服务端渲染 (SSR) | Vue.js (vuejs.org)

• 命令 - NuxtJS | Nuxt.js 中文网

• 流程：

• 应用场景：一个项目中所有页面都需要做SEO

项目解决seo的方案选择

• 前后端不分离

  • 页面加载压力在后端(服务端)，安全，可以通过SSR来生成具有完整HTML内容的页面，有利于SEO

• 前后端分离

  • 页面加载压力在前端(客户端)，可以构建现代化的SPA单页面，提供流畅的用户体验

  • SPA单页面应用

    • 预渲染–一个项目某几个页面需要做SEO
    • 服务端渲染–一个项目中所有页面都需要做SEO

• 选择哪种方案主要取决于具体项目的需求和优先级。对于需要SEO的页面，预渲染或服务端渲染是比较常用的解决方案。而对于不需要SEO或SEO要求较低的页面，可以完全依赖前端的单页面应用架构。

---

2、Nuxt安装和使用Nuxt安装和使用

nuxt安装和目录结构

• 前置知识(安装node和vue脚手架)：Vue-CLI安装方法_全局安装vue-cli_Legreay的博客-CSDN博客

• 报错处理： ‘create-nuxt-app‘ 不是内部或外部命令，也不是可运行的程序或批处理文件。海盗船长说他要扬帆起航的博客-CSDN博客

• 安装：

  1. npx create-nuxt-app <项目名>，勾选配置随后生成项目

2. cd ，进入项目文件夹

3. npm run dev，启动项目，应用运行在 http://localhost:3000 上运行

• Nuxt.js 会监听 pages 目录中的文件更改，因此在添加新页面时无需重新启动应用程序。

• 目录：

  • 资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。对于不需要通过 Webpack 处理的静态资源文件，可以放置在static 目录中。
  • 组件目录 components 用于组织应用的 Vue.js 组件。
  • 布局目录 layouts 用于组织应用的布局组件。
  • 中间件目录middleware 目录用于存放应用的中间件。
  • 页面目录 pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。
  • 插件目录 plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
  • 静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。
  • store 目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置。
  • nuxt.config.js 文件用于组织 Nuxt.js 应用的个性化配置，以便覆盖默认配置。
  • package.json 文件用于描述应用的依赖关系和对外暴露的脚本接口。
  • 别名：_{或@对应srcDir，}~或@@对应rootDir，默认情况下srcDir 和 rootDir 相同。

nuxt生命周期

• Nuxt 2 - Nuxt Lifecycle

服务端生命周期：

• nuxtServerInit(store,context) {} – 在服务端渲染期间调用，可以用于初始化 Vuex 状态
  • 参数1：vuex上下文
  • 参数2：nuxt上下文

//	store/index.js
export const state = {
    token: ''
}

export const mutations = {
    setToken(state,token) {
        state.token = token;
    }    
}

export const actions = {
    nuxtServerInit(store,context) {
        store.commit('setToken','123456')
        console.log(store,'nuxtServerInit');
    }
}

• Route Middleware – 类似于vue中的导航守卫，可以在每次路由切换之前执行一些共享的逻辑，比如身份验证、路由拦截或其他自定义操作等

//全局 nuxt.config.js进行配置，创建文件夹并创建文件
//	nuxt.config.js
router:{
    middleware:'auth'
}
//	middleware/auth.js
export default function () {
    console.log('auth middleware');
}

//页面 页面中进行配置，创建文件夹并创建文件
//	page/index.vue
<script>
export default {
  middleware: 'auth',
  //第二种写法 middleware(){}
}
</script>
//	middleware/auth.js
export default function () {
    console.log('auth middleware');
}

• validate({params,query}){} – 校验url参数

//	pages/index.vue
validate({params,query}){
    console.log('validate');
    return /^\d+$/.test(query.id);
}

• asyncData({params,query}){} – pages中的页面请求数据**(也只有pages目录中的页面组件才可以去用，asyncData中没有this)**，在组件渲染之前调用，用于在服务端或客户端获取异步数据，并将数据合并到组件的数据中

//	pages/index.vue
asyncData({params,query}){
    console.log('asyncData');
},

• fetch({app,store,params}){} – 在组件渲染之前调用，用于在服务端或客户端获取异步数据。与 asyncData 不同的是，fetch 方法不会将数据合并到组件的数据中，而是通过返回一个 Promise 对象来处理异步数据。fetch有this。

//	pages/index.vue
fetch({app,store,params}){
    console.log('fetch');
},

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

beforeCreate(){
    console.log('beforeCreate');
},
created(){
    console.log('created');
},

客户端生命周期

• 和vue中生命周期的一模一样

nuxt路由

自动生成

• 路由 - NuxtJS | Nuxt.js 中文网

• Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。

• 页面之间使用路由，使用< nuxt-link >标签。

//	pages/index.vue
列表页

使用router.js

1. 下载：@nuxtjs/router，npm i @nuxtjs/router -S

2. 下载完成后在nuxt.config.js的modules模块进行配置

   modules:[
       '@nuxtjs/router'
   ],
   

3. 把router文件放入nuxt项目根目录，必须是router.js

4. 修改router.js的内容

5. nuxtjs/router返回的内容和vue有所不同

   import Vue from 'vue'
   import Router from 'vue-router'
   
   import MyPage from '~/components/my-page'
   
   Vue.use(Router)
   
   export function createRouter() {
     return new Router({
       mode: 'history',
       routes: [
         {
           path: '/',
           component: MyPage
         }
       ]
     })
   }
   

nuxt导航守卫

router.js

• vue-cli中怎么用，nuxt中就怎么用，几乎一模一样

nuxtjs

• 中间件：middleware

  • 全局
  • 局部

• 插件：plugins

  • 全局

1. nuxt.config.js进行配置

plugins:[
    '~/plugins/router.js'
],

2. 新建plugins/router.js

export default ({app}=>{
    app.router.beforeEach((to,from.next)=>{
        console.log(to);
        next();
    })
}

nuxt Vuex状态树

• 对于大型复杂项目而言，使用状态树(store)来管理状态(state)十分有必要，所以Nuxt.js内核实现了Vuex
• 使用：Nuxt.js 会尝试找到 src 目录（默认是应用根目录）下的 store 目录，如果该目录存在，它将做以下的事情：
  1. 引用 vuex 模块
  2. 将 vuex 模块 加到 vendors 构建配置中去
  3. 设置 Vue 根实例的 store 配置项
• 具体使用同Vuex，可参考Vuex 状态树 - NuxtJS | Nuxt.js 中文网
• 顺便附上Vuex官网教程，开始 | Vuex (vuejs.org)

---

3、Nuxt配置项

• Nuxt.js 默认的配置涵盖了大部分使用情形，可通过 nuxt.config.js 来覆盖默认的配置。
• 以下配置修改默认中nuxt.config.js改动

nuxt配置之head

• 全局

export default {
  head: {
    title: 'demo',
    meta: [
     	{hid:'description',name:'description',content:'xxx'},
        {hid:'keywords',name:'keywords',content:'xxx'}
    ],
  },
}

• 局部

head(){
    retrun {
        title: 'demo',
   	 	meta: [
     		{hid:'description',name:'description',content:'xxx'},
        	{hid:'keywords',name:'keywords',content:'xxx'}
    	],
    }
}

nuxt配置之css

• 下载保存reset.css

css: [
    '~/static/reset.css'
    '@/assets/css/main.scss'
],

• 注意：关于sass这里引用官网原文

nuxt配置之plugins

• nuxt项目不像vue项目，没有main.js文件，所以直接在nuxt.config.js中引入文件。plugins 属性配置的所有插件会在 Nuxt.js 应用初始化之前被加载导入。

plugins: [
    '~/plugins/aaa.js',
    '~/plugins/element.js'
],

nuxt配置之modules和数据交互

• modules 是 Nuxt.js 扩展，可以扩展它的核心功能并添加无限的集成
• npm install @nuxtjs/axios -S和npm install axios -S区别在于前者可以直接使用而不需要引入，@nuxt/***是Nuxt.js团队提供的官方模块

nuxt配置代理

1. 安装 npm install @nuxtjs/axios @nuxtjs/proxy -S
2. nuxt.config.js进行配置

//	nuxt.config.js
modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
],
axios:{
    proxy:true,
    retry:{retries:3},
    baseUrl:process.env._ENV == 'prod'?'dev'
} 
proxy:{
    '/api':{
        target:'http://localhost:4000',
        pathRewrite:{
            '^/api':'',
        }
    }
}

nuxt配置之loading

• 在页面切换的时候，Nuxt.js 使用内置的加载组件显示加载进度条。可以定制它的样式，禁用或者创建自己的加载组件。

//	nuxt.config.js
loading: false

//	nuxt.config.js
modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
],
axios:{
    proxy:true,
    retry:{retries:3},
    baseUrl:process.env._ENV == 'prod'?'dev'
} 
proxy:{
    '/api':{
        target:'http://localhost:4000',
        pathRewrite:{
            '^/api':'',
        }
    }
}

nuxt配置之loading

• 在页面切换的时候，Nuxt.js 使用内置的加载组件显示加载进度条。可以定制它的样式，禁用或者创建自己的加载组件。

//	nuxt.config.js
loading: false