nuxt系统笔记

奈何我是个菜鸡

已于 2022-07-17 15:21:32 修改

阅读量921

点赞数 2

文章标签：前端前端框架 js javascript

于 2022-07-12 23:29:05 首次发布

本文链接：https://blog.csdn.net/m0_52374678/article/details/125733474

版权

SEO ：搜索引擎优化

多页面
title、描述、关键词
网站内容是怎么来的？

vue解决seo问题

解决方式一：预渲染

A> 使用插件：prerender-spa-plugin

1. vue项目中安装prerender-spa-plugin

npm install prerender-spa-plugin -S

2. vue.config.js进行配置

const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');

module.exports = {
  publicPath: './',
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, 'dist'),
        routes: [
          '/',
          '/about',
          '/contact',
        ],
      }),
    ],
  },
};

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

1. 下载

npm install vue-meta-info -S

2. 到页面组件中配置

metaInfo: {
      title: '首页', // set a title
      meta: [{                 // set meta
        name: 'keyWords',
        content: 'My Example App'
      }]
    }

可以解决：

1. 打包多页面

2. 可以解决每个页面单独生成title描述关键词 [vue-meta-info]

3. 接口数据是在html生成之前就放在页面上的，爬虫可以抓取到内容

存在的问题：

1. 预渲染无法配置动态路由

2. 如果title描述关键词来自于接口的数据，配置到meta-info也是不行的

适合做什么项目：一个项目可能某几个页面需要做seo

预渲染图解

解决方式二：服务端渲染（通过SSR）

适合做什么项目：一个项目可能所有页面都要做seo

服务端渲染图解

解决seo的问题：

1. 前后端不分离

压力在后端

好处：安全

2. 前后端分离的

2.1 spa单页面应用[vue-cli本身处理不了seo]

压力在客户端

2.2 预渲染

压力在客户端

问题：

1. 在html页面加载之前数据过来渲染后才有html的dom结构，这样的话可能也会存在页面空白的情况

2. 一个项目不是所有页面都做seo

2.3 服务端渲染

压力在服务端

问题：起了2个服务 [一个是后端自己语言的服务，一个是nodejs的服务]

一、创建项目

npx create-nuxt-app <项目名>

安装过程中的选项

Programming language : 程序设计语言
Package manager : 包管理器
UI framework : ui框架
Nuxt.js modules : nuxt的js模块
Linting tools : 代码校验工具
Testing framework : 测试框架
Rendering modules : 渲染模式
Deployment target : 部署目标
Development tools : 开发工具
Version control system : 版本控制工具

二、目录结构

pages : 存放页面类似于src/views
components : 存放组件类似于src/components
static : 存放静态资源类似于src/assets
store : vuex状态树类似于src/store
nuxt.config.js : 全局的配置文件类似于vue.config.js

三、服务端生命周期

1.1 nuxtServerInit( store , context ){}

参数1 ： vuex上下文

参数2 ： nuxt上下文

1.2 middleware({store,route,redirect,params,query,req,res}){}

***类似于vue中的导航守卫

a>全局

nuxt.config.js进行配置

router: {

middleware: '名称'

}

新建middleware目录 ==> 文件.js

b>页面

export default {

middleware: 'auth'

}

</script>

新建middleware目录 ==> auth.js

或者

export default {

middleware() {

}

</script>

1.3 validate({params,query}){}

***校验url参数

export default {

validate({ params, query }) {

console.log('validate');

return /^\d+$/.test(query.id);

}

</script>

1.4 asyncData({store,params}){}

***pages中的页面来请求数据的

1.5 fetch({app,store,params}){}

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

beforeCreate
created

五、客户端生命周期

beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

六、nuxt路由

1.1 自动生成

链接：https://www.nuxtjs.cn/guide/routing

路由的跳转和vue差不多注意 <nuxt-link> 就行了

1.2 使用router.js

a> 下载： @nuxtjs/router

npm i @nuxtjs/router -S

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

modules: [

'@nuxtjs/router'

c> 把router文件放入nuxt项目根目录

***必须router.js

d> 修改router.js的内容

e> nuxtjs/router返回的内容和vue有所不同

export function createRouter() {

return new Router({

mode: 'history',

routes

})

}

七、nuxt导航守卫

一、router.js

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

二、nuxtjs

2.1 中间件 : middleware

a>全局

1. nuxt.config.js进行配置

router:{

middleware:'auth'

}

2. 新建middleware/auth.js文件

export default ()=>{

console.log( 'middleware' );

}

b>局部

新建middleware/auth.js文件

export default ()=>{

console.log( 'middleware' );

}

export default{

middleware:'auth'

}

</script>

或：

export default{

middleware(){

}

</script>

2.2 插件 : plugins 全局

a> nuxt.config.js进行配置

plugins: [

'~/plugins/router.js'

]

b> 新建plugins/router.js

export default ({app})=>{

app.router.beforeEach((to,from,next)=>{

console.log( to );

next();

})

}

****补充：服务端不能使用localStorage和cookie的解决方案

参考链接：https://www.npmjs.com/package/cookie-universal-nuxt

1. 安装下载

npm i --save cookie-universal-nuxt

2. nuxt.config.js进行配置

modules: [

'cookie-universal-nuxt'

]

3. 就正常使用

this.$cookies.set()

this.$cookies.get()

....

八、config配置head

组件局部：

<script type="text/javascript">
export default {
  head() {
    return {
      title: '我们的爱',
      meta: [
        { hid: 'description', name: 'description', content: '此处是网站描述' },
        { hid: 'keywords', name: 'keywords', content: '此处是网站关键词' }
      ]
    }
  }
}
</script>

九、config配置sass

如果要使用sass需要安装：npm install --save-dev sass sass-loader@10

某个页面或者组件就可以使用

<style scoped lang='scss'></style>

十、config配置plugins

plugins是用来配置js文件的，一般用来配置axios二次封装，element-ui等第三方组件库

十一、config配置modules和数据交互

一、安装axios

1.1 npm install @nuxtjs/axios -S

1.2 nuxt.config.js进行配置

modules: [

'@nuxtjs/axios',

二、安装axios（跟vue一样）（不推荐）

2.1 npm install axios -S

三、asyncData生命周期 || 方法

pages 目录中的页面组件才可以去用

***注意components内的.vue文件是不可以使用的

asyncData中没有this，想要把数据放到data中必须要return

export default {
  data() {
    return {
      listData: []
    }
  },
  async asyncData({ $axios }) {
    const res = await $axios.get('接口地址');
    const data = res.data.data.list;
    return {
      listData: data
    }
  },
}

四、fetch生命周期 || 方法

fetch是有this的，该方法在pages 目录中的页面组件可以使用，但是可能渲染不到数据，最好在components内的.vue文件使用。

export default {
  data() {
    return {
      listData: []
    }
  },
  async fetch() {
    const res = await this.$axios.get('接口数据');
    const data = res.data.data.list;
    this.listData = data;
  }
}

十二、config配置代理

一、安装

npm install @nuxtjs/axios @nuxtjs/proxy -S

二、nuxt.config.js进行配置

	modules: [
	    '@nuxtjs/axios',
	    '@nuxtjs/proxy'
	],
	axios:{
	    //是否可以跨域
	    proxy:true,
	    //retry:{ retries:3 },
	    //baseUr: process.env._ENV == 'production'? 'xxx' ? 'xxx'
	},
	proxy:{
	    '/api':{
	      target:'http://localhost:4000',
	      pathRewrite:{
	        '^/api':'',
	      }
	    }
	},

十三、nuxt的axios简单封装

export default ({ $axios, store }) => {
  //请求拦截器
  $axios.onRequest((config) => {
    //config.headers["Authorization"] = store.state.token;
    return config;
  });

  //响应拦截器
  $axios.onResponse((response) => {
    return response.data;
  });
};

解耦合

一、配置: nuxt.config.js

			plugins: [
			    '~/plugins/axios',
			    '~/api/xxx'
			],

二、xxx.js中写入

			export default ({$axios},inject)=>{

				inject('getFirstCategorys',()=>$axios({
					url:'/api/course/category/getFirstCategorys',
			        method:'GET',
				}))

			}

三、页面或者组件请求

			async asyncData( app ){
			    let res = await app.$getFirstCategorys();
			    return {
			    	list:res.data.list
				}
			}

十四、config配置loading

一、nuxtjsloading默认是开启的，也可以关闭

nuxt.config.js中

loading:false

二、也可以自定义

loading: '~/components/loading.vue',

loading.vue中写入对应的内容

查看api：https://www.nuxtjs.cn/api/configuration-loading

三、也可以不用nuxtjs的loading

loading:false

自己在axios中进行封装

十五、vuex状态树（分模块）

创建store/indes.js

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

import user from "./modules/user";

const store = () =>
  new Vuex.Store({
    modules: {
      user,
    },
  });

export default store;

创建store/modules/user.js

export default {
  state: {
    image: "图片路径",
  },
  getters: {},
  mutations: {},
  actions: {},
};

奈何我是个菜鸡

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
nuxt系统笔记

nust系统笔记
复制链接

扫一扫

nuxt系统笔记

一、创建项目

二、目录结构

三、服务端生命周期

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

五、客户端生命周期

六、nuxt路由

七、nuxt导航守卫

八、config配置head

九、config配置sass

十、config配置plugins

十一、config配置modules和数据交互

十二、config配置代理

十三、nuxt的axios简单封装

十四、config配置loading

十五、vuex状态树（分模块）

“相关推荐”对你有帮助么？