Nuxt.js 介绍及其使用 ·（一）基础篇，涵盖跨域介绍

最新推荐文章于 2024-03-04 12:21:35 发布

Web_boom

最新推荐文章于 2024-03-04 12:21:35 发布

阅读量1k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Android_boom/article/details/127088039

版权

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.jsexport 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）

3.validate() 校验客户端所携带的一些参数。（校验成功的话进入相应的页面失败的话进入404，其必须定义在页面组件中）export default {components: {Logo},middleware() {},// 参数的有效性validate(params, query) {// 校验业务return true;} 4.asyncData() & fetch() 异步数据的请求。（）；组件初始化的时候就被调用。// asyncData()用来读取数据，将返回的数据返回给目标组件；异步业务逻辑，读取服务端数据，将读取到的数据与目标组件的数据中进行合并。<script>export default {components: {Logo},asyncData(centext) {// 异步业务逻辑，读取服务端数据return {b: 2}},fetch(centext) {// 异步业务逻辑，读取服务端数据，*** 提交给Vuex ***},data() {return {a: 1}}}</script> 5.render 开始客户端的渲染6.beforeCreated & created 是即跑在服务端，也运行在客户端 (beforeMounted、mounted、beforeUpdated、updated、beforeDestroy、destroyed、生命周期在Nuxt.js中也是可以正常使用的)7.激活勾子与失活勾子激活勾子：(服务端渲染，客户端不存在) 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）
 ```javascriptaxios: {proxy: true //开启跨域行为prefix: '/api' // 替换每个API的前缀}proxy: {'/api/': {target: "", // 代理转发的地址changeOrigin: true,pathRewrite: {// '^/api': ""}}}

址changeOrigin: true,pathRewrite: {// ‘^/api’: “”}}}