nuxt.js项目创建到上线笔记
项目起步
- npm create nuxt-app <项目名>
- 选择配置如下：（此配置安装elementUI和axios）
- 启动项目：npm run dev
一、生命周期
三大类：
服务端生命周期
nuxtServerInit、middleware、validate、asyncData
服务端和客户端共同有的生命周期
created、fetch
客户端生命周期
mounted...
注意：服务端生命周中没有window等
二、nuxtjs请求接口
1 .请求接口使用asyncData这个生命周期
- asyncData中没有this，需要return返回数据
- 只能再pages文件夹中的.vue文件使用生效
2. fetch
- 也可以请求接口，但是接口数据渲染到页面上，有时候有，有时候没有。
- 内部可以写this
- fetch生命周期，在任何.vue文件中都可以
三、 如何设置代理
- 下载proxy
npm install @nuxtjs/proxy -S
- 在nuxt.config.js中进行配置
axios:{
//是否开启跨域
proxy:true
},
proxy:{
'/api':{
target:'http://.......cn/'
}
},
modules: [
'@nuxtjs/proxy',
],
四、 axios二次封装，api解耦
下载axios
npm install @nuxtjs/axios -S
- 在nuxt.config.js中引入
modules: [
'@nuxtjs/proxy',
'@nuxtjs/axios'
],
1. api解耦
- 配置: nuxt.config.js
plugins: [
'~/plugins/axios',
'~/api/xxx.js'
],
- 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;
})
}
- 页面或者组件请求
async asyncData( app ){
let res = await app.$getFirstCategorys();
return {
list:res.data.list
}
}
五、路由
1.nuxtjs会自动生成路由
2. 用原来项目中的router/index.js
- 下载
npm install @nuxtjs/router -S
- 在nuxt.config.js配置
modules:[
'@nuxtjs/router'
]
- 把vue-cli中的router文件拷贝到nuxt项目根目录
- 修改最后返回(注意导出为函数)
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环境
- 在服务器上面执行npm install
- 在服务器上面执行npm run start
- 使用nginx做代理，想项目域名代理到localhost:3000上面就阔以用域名直接访问项目了
