前言
在众多前端构建工具中，vite可谓是新兴的后起之秀，大有取代webpack之势。
本系列文章分为上、中、下三篇，从实战入手，通过使用vite搭建一个较为完整、可实际进行项目开发的Vue脚手架来学习并掌握前端工程。
1. 创建项目
//使用pnpm
pnpm create vite
//使用npm
npm init vite@latest
//使用yarn
yarn create vite
2. 启动项目
pnpm install
pnpm run dev
3. 项目目录
├── node_modules
├── pnpm-lock.yaml
├── public
├── src
├── index.html //入口文件
├── tsconfig.json
├── tsconfig.node.json
├── package.json
└── vite.config.ts //配置文件
4. 更改入口文件位置
一般情况下，index.html入口文件是在项目根目录下。如果想把它放在其他位置，可以通过配置项来修改：
// vite.config.ts import { defineConfig } from 'vite'
// 引入 path 包注意两点: // 1. 为避免类型报错，你需要通过 `pnpm i @types/node -D` 安装类型 // 2. tsconfig.node.json 中设置 `allowSyntheticDefaultImports: true`，以允许下面的 default 导入方式
import path from 'path'
import react from '@vitejs/plugin-react'
export default defineConfig({
// 手动指定项目根目录位置
root: path.join(__dirname, 'src')
plugins: [react()]
})
5. 引入CSS工程化
5.1 使用css预编译工具
css预编译工具支持css的嵌套、变量接下来，在项目如引入scss。
pnpm i sass -D
安装后，无需任何配置，就可以使用scss文件来编写样式了。
5.1.1 手动引入
//variable.scss
$theme:red
在vue文件中引入：
<template>
<p>Hello World</p>
</template>
<style lang="scss" scoped>
@import '../css/variable.scss';
p {
color: $theme;
}
</style>
实现效果：
5.1.2 自动引入
在实际开发中，有一些通用的样式变量会被多次使用。如果每次使用都要手动引入的话，很不方便。可以通过vite配置实现自动引入:
import { defineConfig,normalizePath } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
const variablePath = normalizePath(path.resolve('./src/css/variable.scss'))
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
css:{
preprocessorOptions:{
scss: {
additionalData:`@import "${variablePath}"` //注意这个分号
}
}
}
})
上面这段代码中，要注意的是@import后面的分号，如果缺少会报错：
从这个报错中，也可以看出，vite将我们拼接的完整路径字符串插入到了css文件中。
5.2 使用autoprefixer
autoprefixer是一个常用的postcss插件，可以帮我们给css添加样式前缀，以兼容旧浏览器。
pnpm i autoprefixer -D
vite.config.ts配置如下：
import { defineConfig } from 'vite'
import autoprefixer from 'autoprefixer'
export default defineConfig({
css:{
postcss: {
plugins: [
autoprefixer({
// 指定目标浏览器
overrideBrowserslist: ["> 1%","last 2 versions"]
})
]
}
}
})
6. 引入ESLint规范代码
ESLint可以帮助我们检查JS语法是否正确，避免一些低级的错误，以及是否符合一定的规则。
pnpm i eslint -D
初始化，生成配置文件：
npx eslint --init
之后进行命令式交互：
最终会根据选择的内容生成一份.eslintrc配置文件。
但是这时候eslint还是不能正常地进行代码校验：
首先是不能正常的识别vue文件中的html，原因是eslint没有配置vue文件的解析器。在.eslintrc文件中，做如下修改：
'parser': 'vue-eslint-parser',// 修改parser
'parserOptions':{
'parser': '@typescript-eslint/parser' //增加该项
}
修改后结果：
可以看到，eslint已经正常检查代码了，因为配置文件中的规则是要使用单引号，不使用分号。
7. 处理静态资源文件
7.1 加载图片
在vite.config.ts中配置静态资源路径：
export default defineConfig({
resolve: {
// 别名配置
alias: {
'@assets': path.join(__dirname, 'src/assets')
}
}
}
在html中使用：
也可以在css作为背景图引入：
上面两种情况，图片都被解析加载。
7.2 加载svg组件
通过安装vite-svg-loader插件实现以组件的形式加载svg.
pnpm install vite-svg-loader -D
配置vite.config.ts:
import svgLoader from 'vite-svg-loader'
plugins: [svgLoader()]
配置tsconfig.json，不然会报类型错误：
"types":["vite-svg-loader"]
然后就可以将svg作为组件进行使用了：
总结
本文主要介绍了开发阶段中，必不可少的CSS工程化、使用Lint规范代码和处理静态资源。后续文章将介绍使用Rollup打包、代码分割和polyfill等内容，敬请期待~
