Vue3 + Vite2 + TypeScript 开发模板分享（实用）随着 vue3 的使用人数越来越多，我们的新项目

注意：本文使用的项目模板是：vue3-template （点击查看源码）

1. 搭建框架

之前我们使用的都是 Vue-cli 创建项目，当然现在依旧可以使用 Vue-cli 创建 Vue3 项目，但是此处我们讨论的是使用 Vite 创建 Vue + Ts 项目。

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

or

$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

创建的过程会让你选择使用 Vue 框架，使用 Vue + Ts，确定之后可得到下面的结构

. 
├── public 
└── src 
    ├── assets 
    ├── components
    │   └── HelloWorld 
    ├── App.vue
    └── main.ts

这里可以看到，之前我们使用 Vue-cli 创建的模板就像一间精装房，可以拎包入住，然而 Vite 创建的模板只有一个框架，需要我们自己添加功能。接下来我们就来创建一些必要的基础功能。

2. 毛坯装修

基础的框架只提供：

components 公用组件
assets 资源文件

我们创建模块之后的结构：

. 
├── public 
└── src 
    ├── assets 
    │   ├── ts 
    │   ├── img 
    │   └── scss 
    ├── components 
    │   ├── Header 
    │   └── global 
    ├── interface  
    ├── enum 
    ├── plugins
    ├── router 
    ├── services 
    ├── store
    ├── utils
    ├── views 
    │   ├── home 
    │   └── notFound
    ├── App.vue
    ├── constant.ts
    └── main.ts

接下来我就介绍一下各模块的功能：

Views

用于存放所有的页面。内部创建了一个模板文件 home 作为首页使用，引入了一些功能例子。

Router

路由
此处 Router 我分为了两个文件：
1. router.ts 用于存放 router 配置
2. router.interceptor.ts 用于处理 router 触发时候的事件：

Composables

用于存放 `vue` 文件中 `setup` 内部的方法，一般是功能点。

Interface

数据类型

Enum

枚举值

Plugins

引入插件
引入了 VantUI
1. Vant.ts 按需引入 Vant 组件
2. Vant.scss 可以覆盖源码的样式

Services

接口服务
1. api.ts 定义接口
2. pendding.ts 处理接口重复的方法
3. request.ts 封装 axios 使用

Store

vuex 
引入了 vuex-persistedstate 数据持久化插件

Utils

全局方法

3. 软装

配置文件系统路径的别名

新增 vite.config.ts 文件

// 开发过程中为了方便使用，我在 `vite.config.ts` 中使用固定字符替代路径
// 路径简写
resolve: {
    alias: [
      { find: '@views', replacement: resolve(__dirname, 'src/views') },
      { find: '@services', replacement: resolve(__dirname, 'src/services') },
      { find: '@images', replacement: resolve(__dirname, 'src/assets/img') },
      { find: '@scss', replacement: resolve(__dirname, 'src/assets/scss') },
    ]
}


// 这样在代码中如果引入图片可以使用：
<img src="~@images/bg_404.png" />

// 引入页面或者组件：
import Home from '@views/home/index.vue'

Scss预处理

scss 在 vite 中不需要额外引入 loader，需要 yarn add sass 才可以使用。

. 
├── ...
└── scss 
    ├── main.scss      公用样式
    ├── mixin.scss     公用方法
    ├── reset.scss     默认样式
    └── variable.scss  公用变量

`scss` 文件我写了4个主要的公共样式：
1. 这些样式中 `mian.scss` 基本在每个页面都会使用，写了一些页面的基础样式。
2. `mixin.scss` 写了一些常用的 `scss` 方法：定位、导入图片、页面滚动、文字限制、横线等。
3. `reset.scss` 就是初始设置页面。
4. `variable.scss` 定义常用变量、定义所有的颜色方便后续修改。

// vite.config.js 添加 css 全局预处理
  css:{
    preprocessorOptions: {
      scss: {
        // 每个页面都无需再引入即可直接使用两个文件中的变量和方法
        additionalData: `
            @import "src/assets/scss/mixin.scss";
            @import "src/assets/scss/variable.scss";`
      }
    }
  }
  
// 在 home 页面使用
// 文字加下1px划线
h1 {
    position: relative;
    @include hairline(bottom, $colorRed);
}

viewport适配

此模板使用 viewport 适配，具体内容请移步《lib-flexible与viewport--关于移动端适配方案的替换》

分环境打包

vite 官网有具体说明。

在页面中可以使用 import.meta.env 调用数据，但是在vite.config 中无法使用 import.meta.env，所以需要新增获取 .env 数据的操作。

import { defineConfig, loadEnv } from 'vite' // 引入 loadEnv

// 使用 loadEnv(mode, process.cwd()) 来获取 .env 中的内容
if (loadEnv(mode, process.cwd()).VITE_VIS) {
    // ...
}

打包分析

打包分析配置需要在分环境打包配置结束之后使用

安装 yarn add -D rollup-plugin-visualizer。
创建 .env.vis 环境变量新增 VITE_VIS=true。
在 vite.config.ts 中新增插件。

import visualizer from "rollup-plugin-visualizer"

// 打包分析
if (loadEnv(mode, process.cwd()).VITE_VIS) {
    plugins.push(
        visualizer({
        open: true,
        gzipSize: true,
        brotliSize: true,
        })
    );
}

在 package.json 新增 "build:vis": "vue-tsc --noEmit && vite build --mode vis"。
运行 yarn build:vis 即可出现分析打包页面，查看每个包的体积，从而优化代码，降低整体体积。

配置文件

放置打包之后也可自由更改的配置文件，对于部署项目时配管人员更改字段具有极大的便利性。

. 
├── public 
    ├── ...
    └── config.local.js

// 在 index.html 中加入这段 script 引入配置文件
<script>
  document.write(unescape("%3Cscript src='./config.local.js?_t="+ Math.random() +"' type='text/javascript'%3E%3C/script%3E"));
</script>

// 文件内容
window.LOCAL_CONFIG = {
  IS_OPEN_VCONSOLE: true
}

4. 待续...

“装修”到这其实已经可以达到“拎包入住”，但是为了提升使用的便利性，后续会添加或持续完善以下功能：