开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

vite介绍 (Vite 官方中文文档 (vitejs.dev))

我们先看下vite官方的一个介绍： Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

一个开发服务器，它基于原生 ES 模块提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）。底层使用esbuild预构建依赖，Esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍
一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

Vite 意在提供开箱即用的配置，同时它的插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。

推荐使用create-vite来使用预制的模版快速创建项目，如pnpm create vite my-vue-app --template vue，目前支持的框架有如下

之前有参加过若川分享的源码共读活动，有关create-vite的源码共读，有兴趣的小伙伴可以去看下。手撕 create-vite 源码

接下来我们开始使用vite从0开始搭建一个vue项目

1.安装使用vite，以及配置文件

pnpm install vite -D

//package.json
{ "scripts": 
    { 
        "dev": "vite", 
        "build": "vite build" 
    } 
 }
 // vite.config.js
 import { defineConfig } from "vite"
 export default defineConfig({})
 //tsconfig.json
 { "compilerOptions": 
      { 
          "target": "esnext",
          "module": "esnext",
          "moduleResolution": "node", 
          "strict": true, 
          "jsx": "preserve", 
          "sourceMap": true,
          "esModuleInterop": true, 
          "lib": ["esnext", "dom", "es2018.promise"]
      }, 
      "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] 
  }

参数	解释
target	用于指定编译之后的版本目标
module	生成的模块形式：none、commonjs、amd、system、umd、es6、es2015 或 esnext 只有 amd 和 system 能和 outFile 一起使用 target 为 es5 或更低时可用 es6 和 es2015
moduleResolution	选择模块解析策略，有 node 和 classic 两种类型 module-resolution
strict	是否启动所有类型检查
jsx	react 模式会生成 React.createElement，在使用前不需要再进行转换操作了，输出文件的扩展名为.js
sourceMap	把 ts 文件编译成 js 文件的时候，同时生成对应的 sourceMap 文件
esModuleInterop	为导入内容创建命名空间,实现 CommonJS 和 ES 模块之间的互相访问
lib	编译时引入的 ES 功能库，包括：es5 、es6、es7、dom 等。如果未设置，则默认为： target 为 es5 时: ["dom", "es5", "scripthost"] target 为 es6 时: ["dom", "es6", "dom.iterable", "scripthost"]
include	include 也可以指定要编译的路径列表，但是和 files 的区别在于，这里的路径可以是文件夹，也可以是文件

2.安装vue3以及vue的vite插件，同时修改vite.config.js，引入@vitejs/plugin-vue。

pnpm install vue pnpm install @vitejs/plugin-vue -D

3. 支持 typescript

typescript是一种基于 JavaScript 的强类型编程语言
vue-tsc可以对 Vue3 进行 Typescript 类型较验

pnpm install typescript vue-tsc -D

4.安装ESLint，配置`.eslintrc.js`以及 `.eslintignore`

ESLinteslint 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具

pnpm install eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin @vue/eslint-config-typescript -D

名称	说明
eslint	ESLint 是一个用于识别和报告在 ECMAScript/JavaScript 代码中发现的模式的工具
eslint-plugin-vue	Vue 的官方 ESLint 插件
@typescript-eslint/parser	一个 ESLint 解析器，它利用 TypeScript-ESTree 允许 ESLint 检查 TypeScript 源代码
@typescript-eslint/eslint-plugin	一个 ESLint 插件，为 TypeScript 代码库提供 lint 规则
@vue/eslint-config-typescript	Vue 的 eslint-config-typescript

5.Prettier ，ESLint 主要解决的是代码质量问题，prettier主要解决的是代码风格问题

pnpm install prettier eslint-plugin-prettier @vue/eslint-config-prettier -D

//.prettierrc.js
module.exports = {
    singleQuote: false, //使用单引号
    semi: false, ////末尾添加分号
    tabWidth: 2,
    trailingComma: "none",
    useTabs: false,
    endOfLine: "auto"
}

6.git hooks

可以在git commit之前检查代码，保证所有提交到版本库中的代码都是符合规范的
可以在git push之前执行单元测试,保证所有的提交的代码经过的单元测试
husky可以让我们向项目中方便添加git hooks,它会自动在仓库中的 .git/ 目录下增加相应的钩子,比如 pre-commit 钩子就会在你执行 git commit命令的时候的触发
lint-staged用于实现每次提交只检查本次提交所修改的文件
mrm可以根据package.json依赖项中的代码质量工具来安装和配置 husky 和 lint-staged
Commitlint 可以规范git commit -m ""中的描述信息

pnpm install mrm -D npx mrm lint-staged

pnpm install @commitlint/cli @commitlint/config-conventional -D

feature	新特性、新功能
fix	修改 bug
perf	优化相关，比如提升性能、体验
refactor	代码重构
revert	回滚到上一个版本
style	代码格式修改
test	测试用例修改

其他的如less，sass，autoprefixer，px2rem都可以直接安装进行配置，

最终的vite-config配置vite.config.ts

import { defineConfig } from "vite"
import { resolve } from "path"
import vue from "@vitejs/plugin-vue"
export default defineConfig({
resolve: {
    alias: {//这里配置别名
        "@": resolve("src")
    }
},
plugins: [vue()],
css: {
    preprocessorOptions: {//可以把全局样式文件全局注入到项目中
        scss: {
            additionalData: '@import "@/styles/theme.scss";'
        },
        less: {
            additionalData: '@import "@/styles/theme.less";'
        }
    }
}
})

使用vite从0开始搭建一个vue项目