初始化vite
npm init vite@latest
项目名称
programe name: xxx
默认依赖
npm install
基础依赖
npm i --save vue-router pinia pinia-plugin-persist axios
npm i -D @types/node less
配置 :
1.vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
base: './', //不加打包后白屏
server: {
host: '0.0.0.0',
port: 8080,
open: true
proxy: {
"/api": {
target: 'https://xxx.xxx.xxx',
changeOrigin:true,
rewrite: (path) => path.replace(/^\/api/, "")
}
}
},
resolve:{
alias:[
{
find:'@',
replacement:resolve(__dirname,'src')
}
]
}
})
2.路由
//在src目录下新建router文件夹,在router里创建index.ts文件
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Layout from '../components/HelloWorld.vue'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'HelloWorld',
component:()=>import('@/components/HelloWorld.vue'),
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
3.pinia和pinia-plugin-persist
//在src目录下新建store文件夹,在store里创建index.ts文件
import { createPinia } from 'pinia'
// 引入持久化插件
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
// 使用该插件
store.use(piniaPluginPersist)
export default store
// //在src目录下新建store文件夹,在store里创建user.ts文件
import { defineStore } from 'pinia'
interface IUserInfo {
}
export const userStore = defineStore('userStore', {
state: () => {
return {
userinfo:<IUserInfo>{}
}
},
actions:{
upUserInfo(val:IUserInfo) {
this.userinfo = val
}
},
// 使用该插件,开启数据缓存
persist: {
//这里存储默认使用的是session
enabled: true,
strategies: [
{
//key的名称
key: 'userinfo',
//更改默认存储,我更改为localStorage
storage: localStorage,
// 可以选择哪些进入local存储,这样就不用全部都进去存储了
// 默认是全部进去存储
paths: ['userinfo']
}
]
}
})
4.axios
// 在src目录下新建utils文件夹,在utils里创建service.ts文件
import axios from 'axios'
const service = axios.create({
baseURL:'https://www.xxx.com/api',
timeout:5000
})
// 请求拦截
service.interceptors.request.use(config=>{
let token = localStroage.getItem('token')
if(token) {
config.headers = config.headers || {}
config.headers.Authorization = token
}
return config
},err=>Promise.reject(err))
// 响应拦截
service.interceptors.response.use(config=>{
return config
},err=>Promise.reject(err))
export default (url:string, data = {}, method = 'GET') => {
return service({
url,
data,
method
})
}
5.main.ts
import { createApp } from 'vue'
import './style.css'
import router from './router'
import store from './store'
import App from './App.vue'
const app = createApp(App)
app.use(router).use(store).mount('#app')