使用技術(shù)：
- vue3.x （大部分業(yè)務(wù)都使用組合API的方式來開發(fā)）
- vue-cli （項目腳手架）
- Axios （請求接口）
- vue-router （單頁路由）
- vuex （狀態(tài)管理）
- vuex-persistedstate （vuex數(shù)據(jù)持久化）
- @vueuse/core (組合API常用工具庫）
- dayjs（日期處理）
- vee-validate （表單校驗）
更新vue-cli到最新版本
npm uninstall @vue/cli -g //全局卸載
npm install @vue/cli -g //全局安裝
快速生成項目：
vue create rabbit-vue3 //創(chuà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模式鲫凶，暫時使用hash模式
Use history mode for router? n
選擇css處理器
Pick a CSS pre-processor
Less
選擇語法規(guī)范
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
項目創(chuàng)建完成后，刪除沒用的頁面。
vue3.x中createRouter來創(chuàng)建路由實例，createWebHashHistory代表使用hash模式的路由
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = []
// 創(chuàng)建路由實例
const router = createRouter({
// 使用hash方式實現(xiàn)路由
history: createWebHashHistory(),
// 配置路由規(guī)則，寫法和之前一樣
routes
})
export default router
vue3.0中createStore來創(chuàng)建vuex實例
import { createStore } from 'vuex'
// 創(chuàng)建vuex倉庫并導(dǎo)出
export default createStore({
state: {
// 數(shù)據(jù)
},
mutations: {
// 改數(shù)據(jù)函數(shù)
},
actions: {
// 請求數(shù)據(jù)函數(shù)
},
modules: {
// 分模塊
},
getters: {
// vuex的計算屬性
}
})
注意main.js中梦湘，同樣使用的方法
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 創(chuàng)建一個vue應(yīng)用實例
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 中導(dǎo)入 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']
})
]
})
插件說明：
- 默認是存儲在
localStorage中件甥，可以對存儲的方法進行自定義 - key是存儲數(shù)據(jù)的鍵名捌议，支持自定義語義化即可
- paths是存儲state中的那些數(shù)據(jù)，如果是模塊下具體的數(shù)據(jù)需要加上模塊名稱引有，如
user.token - 修改state中的數(shù)據(jù)即可觸發(fā)同步機制瓣颅，可以看到本地存儲數(shù)據(jù)的的變化，每次修改只要數(shù)據(jù)變了就會自動把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) {
// 在發(fā)送請求之前做些什么
return config
}, function (error) {
// 對請求錯誤做些什么
return Promise.reject(error)
})
// 添加響應(yīng)攔截器
instance.interceptors.response.use(function (response) {
// 對響應(yīng)數(shù)據(jù)做點什么
return response
}, function (error) {
// 對響應(yīng)錯誤做點什么
return Promise.reject(error)
})
function request (url, method, submitData) {
return instance({
url,
method,
[method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
})
}
export default request
