一个Vite+Typescript+Vue3项目

一、关于Vue和Vite

近几年来vue2已经成功过渡升级为Vue3，它对vue的生态带来了一次重大的提升和改革，新增了composition Api这样一个强大的功能，为我们组件选项的开发提供了一个强而有力的手段，另外还有诸如：多根节点，语法更新，双向渲染等的一系列变更，vue生态的跃迁具体可以参考vue3的最新官方文档迁移策略中的信息。

随着Vue3的到来，在面临性能考验的同时，新一代构建工具Vite也随之出现。

当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。我们开始遇到性能瓶颈 —— 使用 JavaScript 开发的工具通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用 HMR，文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。

Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。

二、初始化项目（提前安装typescript和vue）

1.创建项目

使用 NPM:
$ npm init vite@latest
使用 Yarn:
$ yarn create vite
使用 PNPM:
$ pnpm create vite

2.项目依赖选择

①：配置vue-router（npm install vue-router）

另外还需要我们手动创建router的相关文件以及文件夹，vite并没有为我们集成vue全家桶

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import HelloWorld from '@/components/HelloWorld.vue'

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'HelloWorld',
        component: HelloWorld
    }
]

// 创建路由
const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

②：配置@types/node （npm i --save-dev @types/node）

这个插件可以识别我们对ts代码的一些简写，还有识别typescript的版本，如果没有添加，可能会看到一系列ide的报错。

③：配置path插件（npm i path）

通过配置path我们可以使用一些目录的变量，也可以配置@映射我们的src，这基本也是必需的模块，原始的vite项目同样没有集成。

需要配置三个文件，tsconfig.json，tsconfig.node.json，vite.config.ts。

tsconfig.json

{
  "compilerOptions": {
    // 新增参数如下 baseRrl 和 paths
    "baseUrl": ".", 
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
  },
}

tsconfig.node.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true, 
  },
}

vite.config.ts

 base:'./',
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    }
  },

④：预编译语言，虽然集成了loader，但是还需要自己添加对应需要用到的依赖。如less，sass。（npm i less）

同时需要在配置文件vite.config.ts中做好配置。

// https://vitejs.dev/config/
export default defineConfig({
  // 支持 less 样式
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  },
})

三、结语

框架和工具都是与日俱进的，无论是学习什么样的技术，紧跟时代的脚步尤为重要。落后就要挨打是自古以来的道理，前端开发领域也需要不断地去更新自己的前沿技术，掌握更多更好的项目解决方案。Vue3和Vite在未来也将成为前端项目构建的主流，所以更全面的了解和学习它们是必须的途径。