Vue3 + Vite2 + TypeScript 开发模板搭建

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

1. 搭建框架

以前咱们使用的都是 Vue-cli 建立项目，固然如今依旧可使用 Vue-cli 建立 Vue3 项目，可是此处咱们讨论的是使用 Vite 建立 Vue + Ts 项目。css

$ 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，肯定以后可获得下面的结构html

. 
├── public 
└── src 
    ├── assets 
    ├── components
    │   └── HelloWorld 
    ├── App.vue
    └── main.ts
复制代码

这里能够看到，以前咱们使用 Vue-cli 建立的模板就像一间精装房，能够拎包入住，然而 Vite 建立的模板只有一个框架，须要咱们本身添加功能。接下来咱们就来建立一些必要的基础功能。vue

2. 毛坯装修

基础的框架只提供：java

components 公用组件
assets 资源文件

咱们建立模块以后的结构：ios

. 
├── 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
复制代码

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

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 中使用固定字符替代路径github

// 路径简写
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 中是能够直接使用的，不须要额外引入 loadervuex

. 
├── ...
└── 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--关于移动端适配方案的替换》npm

分环境打包

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. 待续...

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