Vue3项目

使用技术：

• vue3.x （大部分业务都使用组合API的方式来开发）
• vue-cli （项目脚手架）
• Axios （请求接口）
• vue-router （单页路由）
• vuex （状态管理）
• vuex-persistedstate （vuex数据持久化）
• @vueuse/core (组合API常用工具库）
• dayjs（日期处理）
• vee-validate （表单校验）

更新vue-cli到最新版本
npm uninstall @vue/cli -g //全局卸载
npm install @vue/cli -g //全局安装

快速生成项目：
vue create rabbit-vue3 //创建项目

Check the features needed for your project:
  Choose Vue version
  Babel
  Router
  Vuex
  Css Pre-processors
   Linter/Formatter

选择Vue版本

Choose a version of Vue.js that you want to start the project with
  3.x

不使用history模式，暂时使用hash模式

Use history mode for router? n

选择css处理器

Pick a CSS pre-processor
  Less

选择语法规范

Pick a linter/formatter config:
ESLint + Standard config

选择在什么时候检查

Pick addtional lint features:
  Lint on save 
  Lint and fix on commit

想把配置保存到哪里，为方便管理，选择如下

Where do you prefer piacing config for Babel,ESLint,etc.?
  In dedicated config files

项目创建完成后，删除没用的页面。
vue3.x中createRouter来创建路由实例，createWebHashHistory代表使用hash模式的路由

import { createRouter, createWebHashHistory } from 'vue-router'
const routes = []
// 创建路由实例
const router = createRouter({
  // 使用hash方式实现路由
  history: createWebHashHistory(),
  // 配置路由规则，写法和之前一样
  routes
})

export default router

vue3.0中createStore来创建vuex实例

import { createStore } from 'vuex'

// 创建vuex仓库并导出
export default createStore({
  state: {
    // 数据
  },
  mutations: {
    // 改数据函数
  },
  actions: {
    // 请求数据函数
  },
  modules: {
    // 分模块
  },
  getters: {
    // vuex的计算属性
  }
})

注意main.js中，同样使用的方法

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 创建一个vue应用实例
createApp(App).use(store).use(router).mount('#app')

Vuex持久化：通过vuex-persistedstate插件
插件安装：npm i vuex-persistedstate

在src/store 文件夹下新建 modules 文件，在 modules 下新建 user.js

export default {
  namespaced: true,
  state: () => ({
    // 个人用户信息
    user:{
        name: '张三',
        age: 18,
    }
  })
}

在 src/store/index.js 中导入 user 模块

import { createStore } from 'vuex'
import user from './modules/user'

export default createStore({
  modules: {
    user
  }
})

使用vuex-persistedstate插件来进行持久化

import { createStore } from 'vuex'
import createPersistedstate from 'vuex-persistedstate'
import user from './modules/user'

export default createStore({
  modules: {
    user
  },
  plugins: [
    createPersistedstate({
      key: 'erabbit-client-pc-store',
      paths: ['user']
    })
  ]
})

插件说明：

1. 默认是存储在localStorage中，可以对存储的方法进行自定义
2. key是存储数据的键名，支持自定义语义化即可
3. paths是存储state中的那些数据，如果是模块下具体的数据需要加上模块名称，如user.token
4. 修改state中的数据即可触发同步机制，可以看到本地存储数据的的变化，每次修改只要数据变了就会自动把vuex同步到ls；刷新的时候会自动从ls取然后同步到vuex

测试效果：

mutations: {
    setUser (state) {
      state.user.name = '李四'
    }
}

在main.js中

store.commit('user/setUser')

axios封装：
安装axios npm i axios

import axios from 'axios'
const instance = axios.create({
  baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
  timeout: 5000
})

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error)
})

function request (url, method, submitData) {
  return instance({
    url,
    method,
    [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
  })
}

export default request