创建项目

    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

2. 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 页面刷新后 已登录的用户信息消失

使用nuxtServerInit方法

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>