vite+vue3+Ts搭建基础项目框架

62 阅读 0 评论 41 点赞

我是靠谱客的博主乐观保温杯，最近开发中收集的这篇文章主要介绍vite+vue3+Ts搭建基础项目框架，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

随着前端技术的更新，程序员们的技术栈也要不断跟上，本来想躺平，不料却被推着走。

上个月开发团队新来一个项目需求，要求开发技术栈vue2更换成vue3，毫无准备的小编一脸懵，嗯？怎么说换就换了？没提前通知也没给时间学习，直接上手就是干？就离谱0.0！

vue3项目基础框架搭建流程

一.创建项目

首先使用vite初始化项目，然后在初始化过程中选择vue+typeScript

npm init vite

二.安装依赖

需要注意的是上面这种创建项目的方式跟传统方式不一样，它不会自动安装依赖，也就是没有node_modules包的，需要我们自己手动安装依赖，这也就是为什么使用vite创建项目会很快的原因，所以我们需要使用npm i 安装依赖

npm i

初始化依赖后再安装平时项目开发都经常会使用的基础依赖vue-router、vuex、axios

npm i -save vue-router vuex axios

安装开发所需依赖。我经常使用是less，如果有习惯使用sass的可以替换掉

npm i -D less less-loader

三.ts全局配置

在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/*"
    ]
  }
}

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

// 引入path时会标红，需要安装响应的type依赖 npm i @types/node
import * as path from 'path'
// 或 const path = require('path')
export default ({ mode }) => {
  return defineConfig({
      resolve: {
          alias: {
              '@': path.join(__dirname, 'src'),
              '#': path.join(__dirname, 'types'); 
        }
    },})
}

五.创建页面文件夹

在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="less">
</style>

六.配置路由

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

//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文件中引入使用。这里提醒一下app.use(router)需要写在app.mount(‘#app’)前面，问题在于需要先安装router之后才能把app挂载到’#pp’标签中，否则无法使用router

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);

import router from './router'
// 初始化路由
app.use(router)
app.mount('#app')

如果上面app.use(router)写在app.mount(‘#app’)后面，那么这里使用将没有效果，因为是router里面的组件

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

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

七.配置vuex

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

//index.ts
import { createStore } from 'vuex'
export const store = createStore({
  state() {
    return {

  }},
  getters: {},
  mutations: {},
  actions: {},
  modules: {}
})

在main.ts文件中引入

...
// 初始化vuex
import store from './store'
app.use(store)

八.封装axios请求接口，配置请求拦截器

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

1.在request.ts文件配置请求拦截器

// request.ts
import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
const service = axios.create({
  timeout: 60000,
  baseURL: ''
})

// 请求失败回调函数处理
const error = (error: { request: AxiosRequestConfig, response: AxiosResponse }) => {
  if (error.response.status === 401) {
    // 登录状态过期或未登录}
  return Promise.reject(error)
}

// 请求前
service.interceptors.request.use((request: AxiosRequestConfig) => {
  return request
}, error)

// 响应后
service.interceptors.response.use((response: AxiosResponse) => {
  return response
}, error)

export { service as axios }

2.在src文件夹下面创建interface文件夹，其下创建request.ts文件，配置请求接口需要的类型

// request.ts
/** 普通数据响应 */
export interface ResDataStruct<T = any> {
  /** 响应内容体 */
  data: T,
  /** api响应信息 */
  message: string,
  /** api响应编码 */
  code: number,
  /** api接口返回是否成功 */
  success: boolean,
  /** api接口查询数据库总数 */
  total: number | string | null,
}

3.在index.ts文件封装axios请求。封装axios请求的方式有很多种，我这里是使用创建对象实例的方式去封装，我觉得这样更加方便管理。如果有更好的封装方法也可以在下面评论留言

// index.ts
import { ResDataStruct } from "@/interface/request";
import { axios } from "@/utils/request"
export const httpApi = new class {
    constructor() {
        // 请求接口路径
        this.loginApi = '/login/login' // 登录
  }
    Login( data: Object)){
        return axios<ResDataStruct<T>>({ url: this.loginApi, method: "post", data })
  }
}

九.创建全局配置文件

在src文件夹下另外创建一些配置文件夹,以及在相应的文件夹下创建index.ts文件。如：

hooks(配置全局共用函数)
interface(定义全局接口类型)
types(定义全局类型别名)

当然这里这些配置只是为了更方便去管理数据而已，我是喜欢分得清楚一点，这样在后续迭代中就会比较好维护一些。

十.扩展

基础的框架搭建到这里就可以了，下面是一些扩展插件，看需要自己添加，但大部分项目我觉得应该都是需要的。

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

// npm 安装依赖
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']
      }),
        ...
  ],
})

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

// npm 安装依赖
npm i -save vite-plugin-compression

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

3.vite插件vite-plugin-rsw的作用 - 基于 vite 实现的 webAssembly 插件，支持热更新，友好的报错提示

// npm 安装依赖
npm i -save vite-plugin-rsw

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

// npm 安装依赖
npm i -save @vitejs/plugin-vue-jsx

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