nuxt.js项目从创建到上线学习笔记

nuxt.js项目创建到上线笔记

项目起步

1. npm create nuxt-app <项目名>
2. 选择配置如下：（此配置安装elementUI和axios）
   
3. 启动项目：npm run dev

一、生命周期

三大类：
服务端生命周期
nuxtServerInit、middleware、validate、asyncData
服务端和客户端共同有的生命周期
created、fetch
客户端生命周期
mounted...

注意：服务端生命周中没有window等

二、nuxtjs请求接口

1 .请求接口使用asyncData这个生命周期

• asyncData中没有this，需要return返回数据
• 只能再pages文件夹中的.vue文件使用生效

2. fetch

• 也可以请求接口，但是接口数据渲染到页面上，有时候有，有时候没有。
• 内部可以写this
• fetch生命周期，在任何.vue文件中都可以

三、 如何设置代理

1. 下载proxy

	npm install @nuxtjs/proxy -S

2. 在nuxt.config.js中进行配置

	axios:{
  	//是否开启跨域
    	proxy:true
 	},
  	proxy:{
    	'/api':{
      		target:'http://.......cn/'
    	}
  	},
  	modules: [
	    '@nuxtjs/proxy',
	],

四、 axios二次封装，api解耦

下载axios

npm install @nuxtjs/axios -S

2. 在nuxt.config.js中引入

modules: [
   '@nuxtjs/proxy',
   '@nuxtjs/axios'
   ],

1. api解耦

1. 配置: nuxt.config.js

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

2. xxx.js中写入:

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

   }

2.axios二次封装

// 二次封装axios
export default ({$axios})=>{

//请求拦截器
   $axios.onRequest((config)=>{
   	console.log(11);
     	return config;
   })

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

}

3. 页面或者组件请求

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

五、路由

1.nuxtjs会自动生成路由

2. 用原来项目中的router/index.js

1. 下载

npm install @nuxtjs/router -S

2. 在nuxt.config.js配置

modules:[
		'@nuxtjs/router'
	]

3. 把vue-cli中的router文件拷贝到nuxt项目根目录
4. 修改最后返回(注意导出为函数)

export function createRouter(){
	return new Router({
	      mode: "history",
	      routes,
	    });
	}

3.页面如何跳转

template:
	<router-link to='/my'>跳转</router-link>
  	<nuxt-link to='/my'>跳转</nuxt-link>
js:和vue2一样 

4.导航守卫

六、组件传值

vue2怎么写，nuxtjs就怎么写

七、状态管理store

vue2怎么写，nuxtjs就怎么写

注意store的返回不同，返回的是函数，这一点和router有点像

	import Vue from 'vue';
	import Vuex from 'vuex';

	Vue.use(Vuex);

	const state = {
		str:'这是store的数据'
	}

	//====== 开始

	const store = ()=> new Vuex.Store({
	  	state
	});

	export default store;

	//====== 结束

八、项目上线

1.首先执行npm run build
2.

将打包好的	
.nuxt
static
nuxt.config.js
package.json
这四个文件丢到服务器的某个文件夹中，在服务器上安装node环境

3. 在服务器上面执行npm install
4. 在服务器上面执行npm run start
5. 使用nginx做代理，想项目域名代理到localhost:3000上面就阔以用域名直接访问项目了