vite+TypeScript+Vue3 项目构建

vite+TypeScript+Vue3

初始化项目

初始化过程中选择要使用的框架及语言

npm create vite@latest  

安装依赖

npm i

安装基础依赖

npm i -save vue-router axios

安装开发所需依赖

less 或 sass

npm i -D less less-loader 

npm i -D sass sass-loader

全局配置

在tsconfig.json中添加配置，全局类型、接口。这个是配置项目中需要编译的文件

"include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "types/**/*.d.ts",
    "types/**/*.ts"
], 

配置项目路径别名

在tsconfig.json中添加配置，处理通过"@/"引入文件时ts编译报错问题

"compilerOptions": {
...
"baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
    ],
      "#/*": [
        "types/*"
    ]
  }
} 

安装响应的type依赖

 npm install @types/node

在vite.config.ts中添加配置，处理通过"@/"引入文件时运行报错问题

import * as path from 'path'

export default defineConfig({
  plugins: [vue()],
  server: {
    host: '0.0.0.0'
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }

})

解决报错

在tsconfig.json 和 tsconfig.node.json中配置

"moduleResolution": "Node",   // 改为Node

// "allowImportingTsExtensions": true,   // 注释掉

src/vite-env.d.ts 中

/// <reference types="vite/client" />
declare module "*.vue" {
  import { DefineComponent } from "vue"
  const component: DefineComponent<{}, {}, any>
  export default component
}

路由配置

创建页面文件夹

在src文件夹下面创建views文件夹，其下传创建home/index.vue文件。创建项目并没有views，所以需要自己创建，当然也可以命名其他语义化的文件夹例如pages

<template>
  <div>首页</div>
</template>
<script lang='ts' setup> import { reactive, ref, toRefs } from 'vue' 
</script>
<style scoped lang="sass">
</style> 

配置路由

在src文件夹下面创建router文件夹，其下创建index.ts文件。用于管理路由的一些配置项

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"
const routers = [{
    path: '/',
    name: 'home',
    component: () => import('@/views/home/index.vue'),},
];

const router = createRouter({
  history: createWebHashHistory(),
  routes: routers as unknown as RouteRecordRaw[]
})

// 路由守卫
router.beforeEach((to, from, next) => {
  next()
})

export default router; 

注册路由并使用

在main.ts文件中

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

const app = createApp(App);
createApp(App).mount('#app')
app.use(router)
app.mount('#app')

APP.vue文件使用router-view组件。

<template>
  <router-view />
</template>
<script lang='ts' setup>
</script>
<style scoped lang="sass">
</style> 

配置axios

配置

在src文件夹下面创建utils文件夹，其下创建request.ts文件

import axios from 'axios'
// 创建axios实例
const request = axios.create({
    baseURL: '',// 所有的请求地址前缀部分
    timeout: 80000, // 请求超时时间(毫秒)
    withCredentials: true,// 异步请求携带cookie
    // headers: {
    // 设置后端需要的传参类型
    // 'Content-Type': 'application/json',
    // 'token': x-auth-token',//一开始就要token
    // 'X-Requested-With': 'XMLHttpRequest',
    // },
})
 
// request拦截器
request.interceptors.request.use(
    config => {
        // 如果你要去localStor获取token,(如果你有)
        // let token = localStorage.getItem("x-auth-token");
        // if (token) {
                //添加请求头
                //config.headers["Authorization"]="Bearer "+ token
        // }
        return config
    },
    error => {
        // 对请求错误做些什么
        Promise.reject(error)
    }
)
 
// response 拦截器
request.interceptors.response.use(
    response => {
        // 对响应数据做点什么
        return response.data
    },
    error => {  
        // 对响应错误做点什么
        return Promise.reject(error)
    }
)
export default request

封装请求

在src文件夹下面创建api文件夹，其下创建index.ts文件

import instance from "@/utils/request";

//一般情况下，接口类型会放到一个文件
// 下面两个TS接口，表示要传的参数
interface ReqLogin {
  name: string
  paw: string
}
interface ReqStatus {
  id: string
  navStatus: string
}


// Res是返回的参数，T是泛型，需要自己定义，返回对数统一管理***
type Res<T> = Promise<ItypeAPI<T>>;
// 一般情况下响应数据返回的这三个参数，
// 但不排除后端返回其它的可能性，
interface ItypeAPI<T> {
  data: T,//请求的数据，用泛型
  msg: string | null // 返回状态码的信息，如请求成功等
  code: number //返回后端自定义的200，404，500这种状态码
}


// post请求 ，没参数
export const LogoutAPI = (): Res<null> =>
  instance.post("/admin/logout");

// post请求，有参数,如传用户名和密码
export const loginAPI = (data: ReqLogin): Res<string> =>
  instance.post("/admin/login", data);

// post请求 ，没参数，但要路径传参
export const StatusAPI = (data: ReqStatus): Res<null> =>
  instance.post(`/productCategory?ids=${data.id}&navStatus=${data.navStatus}`);


//  get请求，没参数，
export const FlashSessionListApi = (): Res<null> =>
  instance.get("/flashSession/list");

// get请求，有参数，路径也要传参  (也可能直接在这写类型，不过不建议,大点的项目会维护一麻烦)
export const ProductCategoryApi = (params: { parentId: number }): any =>
  instance.get(`/productCategory/list/${params.parentId}`, { params });

// get请求，有参数，(如果你不会写类型也可以使用any,不过不建议,因为用了之后 和没写TS一样)
export const AdminListAPI = (params: any): any =>
  instance.get("/admin/list", { params });

使用请求

使用方式一：直接使用(和vue2在cretae上用一样，setup自带async，await在顶层可以直接使用)

<script setup lang="ts">
import { indexAPI} from "@/api/index.ts";
    //直接使用，一般用在进入页面入请求数据的接口
    let res = await indexAPI()
    console.log( "***" ,res);
</script>

使用方式二：使用 async / await，（setup虽然自带async，但单独用await只能在顶层使用，如果在函数下还是要async / await一起写）

<script setup lang="ts">
import { returnApplyListAPi } from "@/api/index.ts";
 
const search = async(val: IUseTableParam) => {
    let res = await returnApplyListAPi({
        ...val,
    })
    console.log( "***" ,res);
    let { list, pageNum, pageSize, total } = res.data
    console.log(list, pageNum, pageSize, total);
}
</script>

使用方式三：使用.then

<script setup lang="ts">
import { returnApplyListAPi} from "@/api/index.ts";
 
const logout = () => {
    returnApplyListAPi({
        ...val,
    }).then((res) => {
         console.log('***',res );
        let { list, pageNum, pageSize, total } = res.data
    })
 
};
</script>

代理

跨域需要代理才写

vite.config.ts文件中

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': { // 匹配请求路径，
        target: '你要代理的地址', // 代理的目标地址
        changeOrigin: true,
        // secure: true, // 是否https接口
        // ws: true, // 是否代理websockets

        // 路径重写，**** 如果你的后端有统一前缀(如:/api)，就不开启；没有就开启
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

扩展插件

@vitejs/plugin-legacy

vite插件@vitejs/plugin-legacy的作用是为打包后的文件提供传统浏览器兼容性支持

npm i -save @vitejs/plugin-legacy

vite.config.ts文件中配置

import legacy from '@vitejs/plugin-legacy'
export default defineConfig({
    plugins: [
        legacy({
            targets: ['defaults', 'not IE 11'],
            additionalLegacyPolyfills: ['regenerator-runtime/runtime']
      }),
        ...
  ],
}) 

vite-plugin-compression

vite插件vite-plugin-compression的作用是做 gzip 压缩， vite-plugin-compress的增强版

npm i -save vite-plugin-compression

vite.config.ts文件中配置

import viteCompression from 'vite-plugin-compression'
export default defineConfig({
    plugins: [
        viteCompression(),
        ...
  ],
}) 

@vitejs/plugin-vue-jsx

vite插件@vitejs/plugin-vue-jsx的作用是为编译JSX文件

npm i -save @vitejs/plugin-vue-jsx

vite.config.ts文件中配置

import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
    plugins: [
        vueJsx(),
        ...
  ],
})