vite 搭建vue3项目

初始化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')