Nuxt.js

最新推荐文章于 2024-07-15 11:31:56 发布

雨落风殇

最新推荐文章于 2024-07-15 11:31:56 发布

阅读量656

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/a15180180753/article/details/82805447

版权

js 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

本文深入解析Nuxt.js作为Vue服务器渲染框架的功能与优势，包括SSR提升SEO与加载速度，目录结构详解，路由与参数处理技巧，动画效果实现，模板与布局定制，异步数据加载方法，Vuex状态管理，以及fetch数据填充策略。

摘要由CSDN通过智能技术生成

1.简介
Nuxt.js是vue的服务器(SSR)渲染框架。

2.SSR
在服务端将VUE页面渲染成HTML。这种生成页面的html是有内容的，能够被搜索引擎捕获。并且这种方式加快了首屏加载时间。

3.目录结构
assets       //资源文件，less，js
components   //vue组件
layouts       //布局组件
middleware   //中间件
pages       //路由
plugins       //js插件
static       //静态资源文件
store       //vuex
nuxt.config.js   //个性化配置Nuxt

4.常用配置
4.1配置端口号及IP

package.json：
"config": {		
    "nuxt":{
      "host":"127.0.0.1",
      "port":"8888"
    }
  }

nuxt.config.js
css:["src"] //引入全局样式

5.路由
Nuxt根据pages文件结构自动生成路由
5.1路由跳转
<nuxt-link :to="{name:'index'}">index</nuxt-link> //相当于router-link
5.2参数获取
<div>{{$route.param.name}}</div>
5.3动态路由
vue文件以_name开头，或文件夹名以_name开头,文件内用$route.param.id可获取路由参数
<router-link :to="{params:{user/myId:111}}">aaa</router-link>
user/_id.vue或user/_id/index.vue
$route.param.myId可获取到111
5.4参数校验
validate方法，可接受param为参数，相当于路由守卫，当返回值正确时跳转，错误时404
export default{
validate({params}){
return params.id==1;
}
}

6.Nuxt动画
6.1全局动画
main.css //需在nuxt.config.js中引入

.page-enter-active,.page-leave-active{        //自动识别类名page为全局动画类名
    transition:all 2s;
}
.page-enter,.page-leave-active{
    opacity:0.2;
}

6.2单页动画
main.css //同上

.pageTwo-enter-active,.page-leave-active{
    transition:all 2s;
}
.pageTwo-enter,.page-leave-active{
    opacity:0.2;
}

myPage.vue

export default{
    transition:'pageTwo'
}

7.默认模板及布局
7.1默认模板，建于根目录下，名称app.html

<!DOCTYPE html>
<html lang="en">
<head>
   {{ HEAD }}        //从nuxt.config.js读取配置
</head>
<body>
    <p>这是模板</p>            
    {{ APP }}        //其他页面内容显示位置
</body>
</html>

7.2默认布局，建于layouts文件夹下,名称default.vue,如果没有特别指定，则所有页面均使用此布局
<template>
<div>这是默认布局</div>
<nuxt/> //引用该布局页面显示内容位置
</template>
7.3布局
layouts/public.vue
<template>
<div>这是public布局</div>
<nuxt/> //引用该布局页面显示内容位置
</template>

a.vue
export default{
layout:'public'
}

8.异步数据（asyncData()）最后返回的数据会与data合并
作用：在组件渲染之前异步从服务器获取数据。
注意：因为在组件初始化之前调用，因为无法用this访问实例对象。
使用：export default(){}
asyncData(context){
return {
name:'hkj'
}
}

asyncData() {
return axios.get(url).then(res=>{
return {data:res.data}
});
}

async asyncData(){
let res=await axios.get("https://api.myjson.com/bins/8gdmr");
return {
data:res.data
}
}
context可用属性：
route //路由实例
store //Vuex.store实例
params //route.params
query //route.query
redirect() //此方法可重定向到另一个路由

9.vuex 位于store目录下
普通方式:store/index.js生成一个Vuex.Store实例
模块方式:store目录下每个js都被转换为指定命名的子模块，index.js为根模块
***.js
export const state=()=>return{data:''} //同组建中data避免全局污染采用方法返回
export const getters={fun(),...}
export const mutations = {fun(),...}
export const actions={fun(),...}
使用
$store.dispatcher(fun)

10.fetch
作用：在组件渲染之前填充store数据,类似于asyncData
fetch({store}){
return axios(url).then(res=>{
store.state.data=res.data;
})
}

fetch({store}){
let res = await axios('https://api.myjson.com/bins/8gdmr');
store.commit("increment",res.data);
}