Vite construit le projet vue3+TS

1.Initialiser le projet

npm init vite@latest

2. Entrez le nom du projet

3. Sélectionnez le framework, ici nous choisissons vue

4.Sélectionnez TS 

5. Démarrez le projet

 6. Le projet a démarré avec succès

Remarque : 1. Lors du développement avec vscode, il est recommandé d'utiliser volar et de désactiver le plug-in Vetur qui était couramment utilisé dans vue2. 

          2. Il doit être configuré pour prendre en charge l'introduction des fichiers vue, sinon il sera signalé en rouge

7. Modifiez vite.config.ts

/*
 * @Author: chuxiuli [email protected]
 * @Date: 2023-02-16 15:58:03
 * @LastEditors: chuxiuli [email protected]
 * @LastEditTime: 2023-02-21 10:44:17
 * @FilePath: \chizhou-ts-economyd:\project\vite\vite-project\vite.config.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
import { resolve } from 'path'
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        AntDesignVueResolver({
          importStyle: 'less', // 一定要开启这个配置项
        }),
      ],
    }),
  ],
  base: './',	//不加打包后白屏
  server: {             
    host: 'localhost',	
    port: 9527,      
    open: true
  },
  resolve:{   
    //别名配置，引用src路径下的东西可以通过@如：import Layout from '@/layout/index.vue'
    alias:[   
      {
        find:'@',
        replacement:resolve(__dirname,'src') 
      }
    ]
  },
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: { // 在这里自定义主题色等样式
          'primary-color': '#1da57a',
          'link-color': '#1da57a',
          'border-radius-base': '2px',
        },
        javascriptEnabled: true,
      },
    },
  },
})

 8. Installer le routage

npm install vue-router@4

(1) Créez le dossier du routeur sous src et créez un nouveau index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/home',
    name: 'home',
    component:()=>import('../components/HelloWorld.vue')
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

(2) Importer les itinéraires de montage dans 2.main.ts

import { createApp } from 'vue'
import './common.scss'
import store from './store'
import router from './router'
import App from './App.vue'
createApp(App).use(store).use(router).mount('#app')

9. Installez Axios

npm install axios 

En même temps, créez un nouveau fichier request.ts dans le dossier utils

// 首先先引入aixos
import axios from 'axios'
import ipConfig from './ip-config';
// 创建一个axios 实例
const service = axios.create({
    baseURL: ipConfig.baseIp, // 基准地址
    timeout: 5000 // 超时时间
})
 
// 添加请求拦截器
service.interceptors.request.use(function (config:any) {
    // 在发送请求之前做一些处理，数据转换，配置请求头，设置token,,设置loading等
    config.headers={
        'Content-Type':'application/json;blob' //配置请求头
    }
    const token=localStorage.getItem('token')
   if(token){
      config.headers['Authorization'] = 'Bearer ' + token
   }
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
 
// 添加响应拦截器
service .interceptors.response.use(function (response:any) {
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});
 
// 最后导出
export default service 

Il convient de noter qu'il peut y avoir plusieurs environnements dans le projet réel, donc le baseurl est configuré dynamiquement. Créez un nouveau fichier ip-config.ts.

const env:any=import.meta.env.MODE;
const IP={
     development:{//开发环境
        baseIp:'http://59.203.198.112:18088/yzt-cloud3/',
     },
     loca:{//本地环境
      baseIp:'ccccccccc'
     },
     prod:{//生产环境
        baseIp:'http://59.203.198.112:18088/yzt-cloud2/',
     },
     test:{
        baseIp:'http://59.203.198.112:18088/yzt-cloud1/',//测试环境
     }
};
export default IP[env];

Le fichier package.json correspondant est configuré comme suit

"scripts": {
    "dev": "vite",
    "loca": "vite --mode loca",
    "build": "vue-tsc && vite build",
    "test":"vue-tsc && vite build --mode test",
    "prod":"vue-tsc && vite build --mode prod",
    "preview": "vite preview"
  },

 Pour exécuter la commande correspondante, il existe trois environnements : local, test et production.

Exécuter localement : npm run locala

Emballage de test : npm run test

Emballage de production : npm run prod

10. Créez un nouveau fichier http.ts pour encapsuler les méthodes de requête telles que get, post et put.

import request from './request';
interface paramsObj{
     method:string,
     url:string,
     params?:any,
     data?:any
}
const http ={
    get(url,params){
        const config: paramsObj={
            method: 'get',
            url:url
        }
        if(params) config.params=params
        return request(config)
    },
    post(url,params){
        const config: paramsObj = {
            method: 'post',
            url:url
        }
        if(params) config.data = params
        return request(config)
    },
    put(url,params){
        const config: paramsObj = {
            method: 'put',
            url:url
        }
        if(params) config.params = params
        return request(config)
    },
    delete(url,params){
        const config: paramsObj = {
            method: 'delete',
            url:url
        }
        if(params) config.params = params
        return request(config)
    }
}
export default http

Enfin, elle est introduite globalement dans le fichier main.ts, et chaque composant de page peut appeler directement la méthode.

createApp(App).config.globalProperties.$http=http//全局挂载

11. Configurez l'inter-domaine dans le fichier vite.config.ts