NustJs相关笔记

前言

nuxtJS官方文档: www.nuxtjs.cn/

为啥要选用nuxtJS

1.一个项目可能所有页面都要做seo
2. Nuxt.js 是一个基于 Vue.js 的通用应用框架。

安装

1.使用的是Nuxt.js 团队创建的脚手架工具 create-nuxt-app确保安装了 npx（npx 在 NPM 版本 5.2.0 默认安装了）
2.npx create-nuxt-app <项目名> 或 yarn create nuxt-app <项目名>
3.安装过程中的选项如下：
4.目录结构如下：

生命周期

一、服务端生命周期
1.1 nuxtServerInit(参数1：vuex上下文,参数2：nuxt上下文){}
1.2 middleware({store,route,redirect,params,query,req,res}){}
用法a>全局：在nuxt.config.js进行配置 router:{middleware:'名称'} 新建middleware目录==》文件.js 用法b>页面级：代码如下：

       export default {
            middleware:'名称'
        }
        //新建middleware目录 ==》文件.js
   </script>
   //或者
    <script>
        export default {
                middleware(){

                }
        }
    </script>

1.3 validate({params,query}){}

***校验url参数
<script>
export default {
    validate({params,query}){
    console.log('validate,如果return false会跳转到错误页面');
    return true;
    }
}
</script>

1.4 asyncData({store,params}){}***pages中的页面来请求数据的
1.5 fetch({app,store,params}){} fetch是有this的
二、服务端和客户端共有的 生命周期
beforeCreate created
三、客户端生命周期
beforeMount mounted beforeUpdate updated beforeDestroy destroyed

nuxt路由

1.自动生成
链接：www.nuxtjs.cn/guide/routi… 路由的跳转和vue差不多注意 就行了
2.使用router.js
2.1下载 ： @nuxtjs/router npm i @nuxtjs/router -S
2.2下载完成后在nuxt.config.js的modules模块进行配置 modules: ['@nuxtjs/router'],
2.3把router文件放入nuxt项目根目录 必须router.js
2.4修改router.js的内容
2.5 nuxtjs/router返回的内容和vue有所不同 export function createRouter() { return new VueRouter({ mode: 'history', routes }) }

plugins 全局

>这里可以全局配置router axios 按需引入插件等等都可以 都需要在<br/>
a> nuxt.config.js进行配置
    plugins: [
        '~/plugins/router.js'
    ]<br/>
b> 新建plugins/router.js
    export default ({app})=>{
            app.router.beforeEach((to,from,next)=>{
                    console.log( to );
                    next();
            })
    }

配置head 在需要配置的页面进行如下配置即可

head(){
    return {
            title: 'title',
        meta: [
          { hid: 'description', name: 'description', content: '此处是网站描述' },
          { hid: 'keywords', name: 'keywords', content: '此处是网站关键词' }
        ]
    }
}

配置代理

一、安装 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:'接口地址',
	      pathRewrite:{
	        '^/api':'',
	      }
	    }
	},