vue3 + vite + ts 搭建項目

1.通過vite 腳手架

npm init vite hello-vue3 -- --template vue

2.按裝依賴，啟動項目

  npm i

  npm run dev

3.修改vite配置文件

  找到vite.confing.ts   並添加

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    }
  },
  plugins: [vue()],
  base: './', // 打包路徑
  server: {
    port: 3000, // 服務端口號
    open: true, // 服務啟動時是否自動打開瀏覽器
    cors: true, // 允許跨域
    proxy:{
      '/api':{
        target:'http://www.xxxx.com.cn',
        changeOrigin:true,
        rewrite:(path) =>path.replace('/api','')
      }
    }
  }
})

注：這塊會有找不到path 的問題，我們需要先安裝類型聲明文件
npm install --save-dev @types/node

4.添加路由

   安裝 npm i vue-router@4

    創建 src/router/index.ts 文件

　main.ts 文件中掛載 

import router from './router/index'
createApp(App).use(router).mount('#app')；

  5.添加vuex

    安裝npm i vuex@next

    創建 src/store/index.ts 文件

　main.ts 文件中掛載 

import storefrom './store'
createApp(App).use(store).mount('#app')；
用法：

import { useStore } from 'vuex';
const store = useStore();
console.log(store.state);

 6.添加axios

    安裝npm i axios

    創建 src/api/axios.ts 文件

    創建 src/api/api.ts 文件

　main.ts 文件中掛載 

import axios from './api/axios'
import api from './api/index'

const app = createApp(App);
app.config.globalProperties.$axios = axios;
app.config.globalProperties.$api = api;
這里需要用到全局掛載變量
注：axios.ts文件里為axios的封裝
   index.ts是將所有的接口定義整合

let api:any = {}
let apiFiles = import.meta.globEager('./**/*.ts');
let model: any = {};
for (const key in apiFiles) {
    if(key!='./axios.ts'){
        if (Object.prototype.hasOwnProperty.call(apiFiles, key)) {
            model[key.replace(/(\.\/|\.ts)/g, '')] = apiFiles[key].default;
        }
    }

}
for (const key in model) {
    api = Object.assign({},model[key])
}
export default api；

下面這個是所有接口的內容

export default {
    data1: '/querySupplierTypeList', //列表
    data: '/data/sk/101010100.html', //html
}
在頁面中的用法：

import { getCurrentInstance } from 'vue';
const store = useStore();
const { proxy } =getCurrentInstance();
const message =store.state.massage;
console.log(proxy.$api.data);
const fun = ()=>{
   proxy.$axios({
      url:proxy.$api.data,
      method:'get',
      data:{}
   })
}

最后重新啟動一下我們的項目：
npm run dev