创建项目
npx create-nuxt-app 项目名
添加Axios模块@nuxtjs/axios
1.安装模块
npm install @nuxtjs/axios
2.配置代理
打开nuxt.config.js
modules: [
'@nuxtjs/axios',
],
axios: {
proxy: true, // 表示开启代理
//prefix: '/api/channel', // 表示给请求url加个前缀 /api
credentials: true // 表示跨域请求时是否需要使用凭证
},
proxy: {
//开启代理
"/api/": {
pathRewrite: { "^/api/": "" },
target: "http://127.0.0.1/api",
changeOrigin: true, // 表示是否跨域
},
},
使用scss
1.安装模块
npm i node-sass sass-loader scss-loader --save-dev
2.配置 nuxt.config.js 在scss 里 添加 目录下新建的scss
css: [
'element-ui/lib/theme-chalk/index.css',
{src:'@/assets/css/index.scss',lang:'scss'}
],
使用.env
1.安装模块
npm i @nuxtjs/dotenv
- nuxt.config.js中配置模块
modules: [
// '@nuxtjs/axios',
'@nuxtjs/dotenv', //这个
],
3.使用
创建.env文件，key value形式
process.env.BASE_URL,
其中BASE_URL 是.env中的key
使用cookie
1.模块安装
npm i --save cookie-universal-nuxt
2.nuxt.config.js 中配置
modules: [
//'@nuxtjs/axios',
//'@nuxtjs/dotenv',
'cookie-universal-nuxt',
],
3.一些常见cookie操作 官网详情地址
解决 vuex 页面刷新后 已登录的用户信息消失
1.设置vuex actions ,在req里获取到cookies 然后根据设置的cookie再获取到token， 最后用commit 提交到vuex 中
export const actions ={
nuxtServerInit ({ commit }, { req }) {
console.log("mmmmmm")
}
}
使用vuex 官网详情地址
1.什么是vuex 官网详情地址
1.State 类似于变量 用来存储数据 可以供其他组件不同页面使用
2.Getter 类似于计算属性， 我理解的是 可以在其中设置过滤条件 得到重新计算后的数据
3.Mutation 官网规定 State变量不能直接变更 需要使用mutation 来进行修改，好像是这样可以跟踪变化(同步)
4.Action 可以进行异步的修改state的值，可以在里面写api 然后aync await dispath() 提交
5.module 常用的 我们可以在store 目录下创建一个index.js 里面用来存储上面的几种{state，getter,mutation ,action}，但是页面多了 需要分开 所以我们可以在store目录下创建其他目录 进行分模块操作。
案例
（1）State
//1.定义
export const state = () => ({
counter: 0
})
//使用
this.$store.state.counter
(2) Getters
请求方式
asyncData的使用
asyncData 用来请求数据 并且直接渲染给组件的（服务端请求后台API 之后把数据填充成变量）
export default {
data() {
return { project: 'default' }
},
asyncData(context) {
//方法中可以直接使用this.project ， 组件中可以直接使用{{project}}
return { project: 'nuxt' }
}
}
fetch的使用
fetch 用来请求数据并且更新vuex
<template>
<h1>Stars: {{ $store.state.stars }}</h1>
</template>
<script>
export default {
fetch({ store, params }) {
return axios.get('http://my-api/stars').then(res => {
store.commit('setStars', res.data)
})
}
}
</script>
