Vue3项目起步该做的二三事

╰半夏微凉° 2023-10-03 12:32 1阅读 0赞

**目录**

1.添加配置文件

2. vuex-持久化插件

3. 封装axios-提供请求函数

4. 封装axios-集中添加token

5.封装axios-剥离无效数据+集中处理401

6. 路由设计

7. 安装调试工具

8.划分vuex模块

--------------------

### 1.添加配置文件 ###

--------------------

**路径提示配置：**当我们使用路径别名@的时候可以提示路径。

**方法：**新建**`jsconfig.json`** 文件，将下面的内容复制进去

{
      "compilerOptions": {
        "baseUrl": ".",
        "paths": {
          "@/*": ["./src/*"],
        }
      },
      "exclude": ["node_modules", "dist"]
    }

--------------------

**eslint忽略配置：**eslint在做风格检查的时候忽略 dist 和 vender 不去检查。

**方法：**新建 **`.eslintignore`**文件，将下面的内容复制进去

/dist
    /src/vender

--------------------

###  ###

### 2. vuex-持久化插件 ###

--------------------

**业务场景：**

多用于保存用户token

--------------------

**什么是持久化：让数据保存的时间长些**

将数据保存到本地存储或者是cookie中，这样页面刷新就不会丢失了。

--------------------

**步骤：**

01 安装插件

npm i vuex-persistedstate

02 使用 store/index.js中

import { createStore } from 'vuex'
    + import createPersistedstate from 'vuex-persistedstate'
    
    import user from './modules/user'
    import cart from './modules/cart'
    import cart from './modules/category'
    
    export default createStore({
      modules: {
        user,
        cart,
        category
      },
    +  plugins: [
    +    createPersistedstate({
    +      key: 'erabbit-client-pc-store',
    +      paths: ['user', 'cart']
    +    })
    +  ]
    })

注意点：

*  默认是存储在localStorage中
 *  key是存储数据的键名
 *  paths是存储state中的那些数据，如果是模块下具体的数据需要加上模块名称，如`user.token`
 *  修改state后触发才可以看到本地存储数据的的变化。

--------------------

###  ###

###  3. 封装axios-提供请求函数 ###

--------------------

**目标：**基于axios封装一个请求工具，调用接口时使用

**要做的事：**安装axios ---> 封装request模块

--------------------

**步骤：**

01 安装 axios

npm i axios

02 新建request模块

建立 `src/utils/request.js` 模块，代码如下

// 1. 创建一个新的axios实例
    // 2. 请求拦截器，如果有token进行头部携带
    // 3. 响应拦截器：1. 剥离无效数据  2. 处理token失效
    // 4. 导出一个函数，调用当前的axsio实例发请求，返回值promise
    
    import axios from 'axios'
    
    export const baseURL = 
    const instance = axios.create({
      // axios 的一些配置，baseURL  timeout
      baseURL:'http://pcapi-xiaotuxian-front-devtest.itheima.net',
      timeout: 5000
    })
    
    // 请求工具函数
    export default (url, method, submitData) => {
      // 负责发请求：请求地址，请求方式，提交的数据
      return instance({
        url,
        method,
        // 1. 如果是get请求  需要使用params来传递submitData   ?a=10&c=10
        // 2. 如果不是get请求  需要使用data来传递submitData   请求体传参
        // [] 设置一个动态的key, 写js表达式，js表达式的执行结果当作KEY
        // method参数：get,Get,GET  转换成小写再来判断
        // 在对象，['params']:submitData ===== params:submitData 这样理解
        [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
      })
    }

--------------------

### 4. 封装axios-集中添加token ###

--------------------

书接上回，还是封装axios的文件中

// 1. 创建一个新的axios实例
    // 2. 请求拦截器，如果有token进行头部携带
    // 3. 响应拦截器：1. 剥离无效数据  2. 处理token失效
    // 4. 导出一个函数，调用当前的axsio实例发请求，返回值promise
    
    import axios from 'axios'
    import store from '@/store'
    
    // 导出基准地址，原因：其他地方不是通过axios发请求的地方用上基准地址
    export const baseURL = 'http://pcapi-xiaotuxian-front-devtest.itheima.net/'
    const instance = axios.create({
      // axios 的一些配置，baseURL  timeout
      baseURL,
      timeout: 5000
    })
    
    // 请求拦截器： 加(注入)token
    instance.interceptors.request.use(
      config => {
        console.log('store', store)
        // 如何在.js中获取vuex中的token
        // import store from '@/store'
        const token = store.state.user.profile.token
        if (token) {
          // 设置请求头
          config.headers.Authorization = `Bearer ${token}`
        }
        // if (如果有token) {
        //    就带上
        // }
    
        return config
      },
      error => {
        // do something with request error
        console.log(error) // for debug
        return Promise.reject(error)
      }
    )

--------------------

### 5.封装axios-剥离无效数据+集中处理401 ###

--------------------

**目标：**

**剥离无效数据：**对接口返回值又做了封装：外部补充一个data，导致获取数据都需要写`res.data`

**集中处理401：**对没有401错误可以方便的集中处理。

--------------------

代码实现：

import axios from 'axios'
    import store from '@/store'
    import router from '@/router'
    
    // 导出基准地址，原因：其他地方不是通过axios发请求的地方用上基准地址
    export const baseURL = 'http://pcapi-xiaotuxian-front-devtest.itheima.net/'
    const instance = axios.create({
      // axios 的一些配置，baseURL  timeout
      baseURL,
      timeout: 5000
    })
    
    // 响应拦截器
    instance.interceptors.response.use(
      response => response.data, // 请求成功
      error => {
        // console.log('请求出错啦', error)
        // console.dir(error)
        if (error.response.status === 401) {
          console.log('token错误')
          // 1. 清空本地个人信息
          store.commit('user/setUser', {})
          // .vue -- this.$route.fullPath
          //  .js -- router.currentRoute: 是ref数据，要加.value
          // .fullPath: 完整的path（参查询参数的）
          // 2. 跳到登录页
          router.push('/login?return_url=' + encodeURIComponent(router.currentRoute.value.fullPath))
        }
        return Promise.reject(error)
      }
    )
    
    // 请求工具函数
    export default (url, method, submitData) => {
      // 负责发请求：请求地址，请求方式，提交的数据
      return instance({
        url,
        method,
        // 1. 如果是get请求  需要使用params来传递submitData   ?a=10&c=10
        // 2. 如果不是get请求  需要使用data来传递submitData   请求体传参
        // [] 设置一个动态的key, 写js表达式，js表达式的执行结果当作KEY
        // method参数：get,Get,GET  转换成小写再来判断
        // 在对象，['params']:submitData ===== params:submitData 这样理解
        [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
      })
    }

--------------------

###  ###

### 6. 路由设计 ###

--------------------

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70][]

**思路：**如何从UI图中分析出路由设计？

1.  找到页面中变化和不变的部分，将变化的部分设计成次级路由（<router-view/>）
2.  先做**大页面（1级路由）**，然后再来细分。

--------------------

###  ###

### 7. 安装调试工具 ###

--------------------

**目标:安装针对于vue3的开发调试环境**

--------------------

#### Dev-tools安装 ####

> 作为vue框架官方调试工具，dev-tools提供了对于组件关系和数据状态方便的查看和调试功能，现在它也更新到了适配vue3的版本，我们这次的项目使用最新的版本进行预览调试开发

--------------------

**Logger Plugin 安装**

> 当前的调试工具暂时不支持vuex的调试查看，需要我们额外进行log调试，vuex**内置**了一个logger模块，我们只需要引入并且注册为插件即可。

> 安装好这个log插件之后，我们每次触发action函数和mutation函数都可以在控制台打印出当前本地提交的记录详细信息，包括`名称` `参数` `修改前后的state数据`

+ import { createLogger } from 'vuex'
    export default createStore({
      modules: {
        user,
        cart,
        category
      },
      plugins: [
    +    createLogger()
      ]
    })

--------------------

###  8.划分vuex模块 ###

--------------------

**为什么这么做：**我们利用vuex保存数据，当数据特别多的时候，就用到modules来按照模块划分，然后注册使用。

--------------------

**步骤：01 创建modules：**

--------------------

**举例：**在`src/store` 文件夹下新建 `modules` 文件夹，在 `modules` 下新建 `user.js` 和 `cart.js`

// 用户模块
    export default {
      namespaced: true,
      state () {
        return {
          // 用户信息
          profile: {
            id: '',
            avatar: '',
            nickname: '',
            account: '',
            mobile: '',
            token: ''
          }
        }
      },
      mutations: {
        // 修改用户信息，payload就是用户信息对象
        setUser (state, payload) {
          state.profile = payload
        }
      }
    }

--------------------

**步骤：02 在store/ index.js中引入**

--------------------

在 `src/store/index.js` 中导入

import { createStore } from 'vuex' // vuex 的工厂函数
    
    import user from './modules/user'  // 引入咱们写的模块
    import cart from './modules/cart'
    import category from './modules/category'
    
    export default createStore({
      modules: {
        user,  // 在这里注册
        cart,
        category
      }
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210804232118946.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k,size_16,color_FFFFFF,t_70