一组贺、路由router
1、安裝路由
? ??npm install vue-router@next -S -D （注：-s是保存在dependencies中祖娘，是要發(fā)布到正式環(huán)境中的失尖。-d是保存在devDependencies中，只用于開(kāi)發(fā)環(huán)境）
2渐苏、配置路由
? ?目錄： /src/router/index.js
import {createRouter, createWebHashHistory,createWebHistory }from 'vue-router';
const router =createRouter({
history:createWebHistory(),
? routes: [
// @ 是 /src 的別名
? ? {path:'/name', component: () =>import('../components/HelloWorld.vue') }
]
})
export default router
3掀潮、配置 main.js
import router from "@/router"
createApp(App).use(router).mount('#app')
4、使用
? <router-link to="/name">路由跳轉(zhuǎn)?</router-link>
? <router-view></router-view>
二整以、狀態(tài)管理vuex
1胧辽、安裝vuex
npm install vuex@next -S -D
2峻仇、配置vuex
import {createStore }from 'vuex'
const store =createStore({
state: {
count:10
? }
})
export default store
3公黑、配置 main.js
import store from './store'
const Appcreate=createApp(App)
Appcreate.use(store)
4、使用
import store from '../store/index.js'
<h2>{{store.state.count}}</h2>
三、數(shù)據(jù)請(qǐng)求封裝
1凡蚜、安裝axios
npm install?axios?-S -D
2人断、配置生產(chǎn)環(huán)境文件
在根目錄下添加配置文件?.env.development
VITE_APP_BASE_API= '請(qǐng)求的 baseURL'
注意：修改該文件后需要重啟項(xiàng)目。
3朝蜘、請(qǐng)求封裝
目錄：utils/request.js
import axios from 'axios'
// 創(chuàng)建 axios 實(shí)例
const service = axios.create({
? // 在請(qǐng)求地址前面加上 baseURL
? baseURL: import.meta.env.VITE_APP_BASE_API,
? // 請(qǐng)求超時(shí)時(shí)間
? timeout: 5000
})
// 請(qǐng)求攔截
service.interceptors.request.use(
? (config) => {
? ? // 在請(qǐng)求前做某些事情
? ? return config
? },
? (error) => {
? ? // 處理請(qǐng)求錯(cuò)誤
? ? return Promise.reject(error)
? }
)
// 響應(yīng)攔截器
service.interceptors.response.use(
? (response) => {
? ? // 響應(yīng)成功
? ? return response
? },
? (error) => {
? ? // 處理響應(yīng)錯(cuò)誤
? ? return Promise.reject(error)
? }
)
export default service
4恶迈、封裝第一個(gè)接口
目錄：api/user.js
import service from '@/utils/request.js'
export const getUsers = (params) => {
? return service({
? ? url: '/getUsers',
? ? method: 'get',
? ? params
? })
}
