Nuxt.js 介绍及其使用 ·(一)基础篇,涵盖跨域介绍

1,009 阅读4分钟
Nuxt
基于Vue实现的一种 **服务端渲染** 的框架,基本语法基于Vue,另添加了一些独占的API。
Nuxt框架解决了什么问题?

Nuxt框架的出现,因为其是基于服务端渲染,不同于单页面应用的开发,其对 SEO 是非常友好的。之前Vue是CSR(客户端渲染)是单页面应用的开发,将多个页面的内容塞进一个盒子(根节点DIV)中,对SEO很不友好。(F12后审查元素无任何发现可充分说明这一点。)

个人体会

因为一直是基于Vue、React这种单页面的开发模式,Nuxt初上手感觉很不友好,因为业务不同,Nuxt框架的封装有很多“坑”,这是非常让人头疼的,之后慢慢根大家去分享。

工程目录结构
1. assets ==> 资源文件,webpack打包后的文件,如:scss,img
2. layouts ==> 布局页面(default默认布局)
3. middlware ==> 中间件的目录
4. pages ==> 经过路由跳转的页面,如一级路由、二级路由
    components ==> pages ==> layouts
5. plugins ==> 存放一些插件
6. server ==> 服务端的一个配置,node的接口写在这。(如果有自己的服务端,不需要去配置;如没有自己的后端,可以利用其完成node服务器的搭建)
7. static ==> 静态文件
8. store ==> VueX状态树的公共资源
9. nuxt.config.js进行Nuxt应用的个性化配置覆盖默认的一些配置

(补充:工程目录中的.nuxt是项目打包后的文件所在地)

Nuxt的生命周期
与Vue、React的前端框架一样,Nuxt有属于自己的生命周期,因为其实服务端渲染,所以他的生命周期分为 服务端 与 本地客户端 生命周期,服务端的生命周期都可以拿到context上下文;客户端的生命周期都可以拿到DOM对象及其this
  1. nuxtServerInit

        // nuxtServerInit 服务端初始化,负责数据的初始化,只会执行一次,定义在Store的action中。
        // store > index.js
        export const actions = {
        nuxtServerInit(store, context) {
            // 初始化到store中
        }
    
  2. middleware 中间件运行(在nuxt.config.js、layout、pages & children pages进行配置),通常用来做一些路由的鉴权。

        // 1. 在nuxt.config.js中进行配置
        // 在router模块中协商,之后进行约定
        router: {
            middleware: 'auth'
        }
        // middleware > auth.js中进行如下约定
        export default({store, route, redirect, params, query, req, res}) {
            // context 服务端上下文
            // 进行全局守卫业务
        }
        
        // 2. 在layouts中进行middleware的定义
        <script>
            export default {
                middleware: 'auth' // 布局层级的中间件的定义
            }
        </script>
        
        // 3. 在页面级别中进行middleware的定义
        <script>
            export default {
                middleware: 'auth'  // 页面层级的中间件的定义
            }
        </script>
    

(补充:中间件的执行顺序:nuxt.config.js > layouts > pages)

  1. validate() 校验客户端所携带的一些参数。(校验成功的话进入相应的页面失败的话进入404,其必须定义在页面组件中)

        export default {
        components: {
            Logo
        },
        middleware() {
    
        },
        // 参数的有效性
        validate(params, query) {
            // 校验业务
            return true;
        }
    
  2. asyncData() & fetch() 异步数据的请求。();组件初始化的时候就被调用。

        // asyncData()用来读取数据,将返回的数据返回给目标组件;异步业务逻辑,读取服务端数据,将读取到的数据与目标组件的数据中进行合并。
        <script>
        export default {
            components: {
                Logo
            },
            asyncData(centext) {
                // 异步业务逻辑,读取服务端数据
                return {
                    b: 2
                }
            },
            fetch(centext) {
                // 异步业务逻辑,读取服务端数据,*** 提交给Vuex ***
            },
            data() {
                return {
                    a: 1
                }
            }
        }
    </script>
    
  3. render 开始客户端的渲染

  4. beforeCreated & created 是即跑在服务端,也运行在客户端 (beforeMounted、mounted、beforeUpdated、updated、beforeDestroy、destroyed、生命周期在Nuxt.js中也是可以正常使用的)

  5. 激活勾子与失活勾子 激活勾子:(服务端渲染,客户端不存在) activated() {} 失活勾子:(服务端渲染,客户端不存在) deactivated() {}

Nuxt的路由
Nuxt的路由被称之为约定式路由。
Nuxt会将存在pages中的文件,生成相应的式的路由,访问该路由,需根据相应的文件名即可。
展示区: <Nuxt/>
声明式跳转:<Nuxt-Link :to="{name: 'product-id', params:{id:3},query: {a: 111, b: 222}}">商品</Nuxt-Link>
name:路由名 目录名-其他目录-文件名
params:key 要对等文件名
子路由:目录代表子路由,子路由内部同级的文件代表的是同一级路由
数据交互 & 跨域
 跨域的解决:在nuxt.config.js中进行配置
 需要安装 @nuxtjs/axios & @nuxt/proxy ,安装之后在 modules 中进行配置(modules是一个数组,无需添加proxy)
 ``` javascript
    axios: {
        proxy: true //  开启跨域行为
        prefix: '/api' // 替换每个API的前缀
    }

    proxy: {
        '/api/': {
            target: "", // 代理转发的地址
            changeOrigin: true,
            pathRewrite: {
                // '^/api': ""
            }
        }
    }
```