使用技術(shù)：

• vue3.x （大部分業(yè)務(wù)都使用組合API的方式來(lái)開(kāi)發(fā)）
• vue-cli （項(xiàng)目腳手架）
• Axios （請(qǐng)求接口）
• vue-router （單頁(yè)路由）
• vuex （狀態(tài)管理）
• vuex-persistedstate （vuex數(shù)據(jù)持久化）
• @vueuse/core (組合API常用工具庫(kù)）
• dayjs（日期處理）
• vee-validate （表單校驗(yàn)）

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

快速生成項(xiàng)目：
vue create rabbit-vue3 //創(chuàng)建項(xiàng)目

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模式，暫時(shí)使用hash模式

Use history mode for router? n

選擇css處理器

Pick a CSS pre-processor
  Less

選擇語(yǔ)法規(guī)范

Pick a linter/formatter config:
ESLint + Standard config

選擇在什么時(shí)候檢查

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

項(xiàng)目創(chuàng)建完成后，刪除沒(méi)用的頁(yè)面。
vue3.x中createRouter來(lái)創(chuàng)建路由實(shí)例，createWebHashHistory代表使用hash模式的路由

import { createRouter, createWebHashHistory } from 'vue-router'
const routes = []
// 創(chuàng)建路由實(shí)例
const router = createRouter({
  // 使用hash方式實(shí)現(xiàn)路由
  history: createWebHashHistory(),
  // 配置路由規(guī)則，寫(xiě)法和之前一樣
  routes
})

export default router

vue3.0中createStore來(lái)創(chuàng)建vuex實(shí)例

import { createStore } from 'vuex'

// 創(chuàng)建vuex倉(cāng)庫(kù)并導(dǎo)出
export default createStore({
  state: {
    // 數(shù)據(jù)
  },
  mutations: {
    // 改數(shù)據(jù)函數(shù)
  },
  actions: {
    // 請(qǐng)求數(shù)據(jù)函數(shù)
  },
  modules: {
    // 分模塊
  },
  getters: {
    // vuex的計(jì)算屬性
  }
})

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

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

// 創(chuàng)建一個(gè)vue應(yīng)用實(shí)例
createApp(App).use(store).use(router).mount('#app')

Vuex持久化：通過(guò)vuex-persistedstate插件
插件安裝：npm i vuex-persistedstate

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

export default {
  namespaced: true,
  state: () => ({
    // 個(gè)人用戶信息
    user:{
        name: '張三',
        age: 18,
    }
  })
}

在 src/store/index.js 中導(dǎo)入 user 模塊

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

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

使用vuex-persistedstate插件來(lái)進(jìn)行持久化

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']
    })
  ]
})

插件說(shuō)明：

1. 默認(rèn)是存儲(chǔ)在localStorage中，可以對(duì)存儲(chǔ)的方法進(jìn)行自定義
2. key是存儲(chǔ)數(shù)據(jù)的鍵名，支持自定義語(yǔ)義化即可
3. paths是存儲(chǔ)state中的那些數(shù)據(jù)，如果是模塊下具體的數(shù)據(jù)需要加上模塊名稱(chēng)，如user.token
4. 修改state中的數(shù)據(jù)即可觸發(fā)同步機(jī)制，可以看到本地存儲(chǔ)數(shù)據(jù)的的變化，每次修改只要數(shù)據(jù)變了就會(huì)自動(dòng)把vuex同步到ls；刷新的時(shí)候會(huì)自動(dòng)從ls取然后同步到vuex

測(cè)試效果：

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
})

// 添加請(qǐng)求攔截器
instance.interceptors.request.use(function (config) {
  // 在發(fā)送請(qǐng)求之前做些什么
  return config
}, function (error) {
  // 對(duì)請(qǐng)求錯(cuò)誤做些什么
  return Promise.reject(error)
})

// 添加響應(yīng)攔截器
instance.interceptors.response.use(function (response) {
  // 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么
  return response
}, function (error) {
  // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么
  return Promise.reject(error)
})

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

export default request