Vue3 + Vite2 + TypeScript 開發模板搭建

注意：本文使用的項目模板是：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. 毛坯裝修

基礎的框架只提供：

1. components 公用組件
2. 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 中使用固定字符替代路徑

// 路徑簡寫
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

. 
├── ...
└── 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) {
    // ...
}
複製代碼

打包分析

打包分析配置須要在分環境打包配置結束以後使用

1. 安裝 yarn add -D rollup-plugin-visualizer。
2. 建立 .env.vis 環境變量新增 VITE_VIS=true。
3. 在 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,
        })
    );
}
複製代碼

4. 在 package.json 新增 "build:vis": "vue-tsc --noEmit && vite build --mode vis"。
5. 運行 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. 待續...

「裝修」到這其實已經能夠達到「拎包入住」，可是爲了提高使用的便利性，後續會添加或持續完善如下功能：

• 持續完善 scss 公用文件...
• 持續完善 utils 公用文件...
• 移動端適配
• 打包分析
• 分環境打包
• 全局配置文件 config.local.js
• mock-api
• svg-icon