前言
本篇带vue新手从0搭建最新vue3开发环境，提供工具整合的最佳实践，为后续vue学习以及项目开发效率提速。
vite脚手架与各种工具最新版的整合教程已更新完成！
视频学习地址：vite5整合vue3开发环境实战
配套思维导图：
node安装与配置
1.下载与安装
node版本选择要考虑所使用工具和框架（最新版）整合的兼容性。可参考项目（截止到目前）在github上package.json中对node依赖版本的最低要求，如下一代前端构建工具vite要求"node": "^18.0.0 || >=20.0.0"；主流vue3 ui框架element plus要求"node": ">= 18"；样式检查工具stylelint要求"node": ">=18.12.0"；
基于这些考虑，选择大版本号18的最新长期稳定版的安装程序：
按机器对应的系统版本自行选择，这里下载下来的安装包为node-v18.20.4-x64.msi，双击安装，全程下一步，也可自行设置安装位置，这里设置为d:\Programs\node\nodejs\。安装完成后该路径会被自动添加到系统环境变量path中，因此可在cmd命令行任意路径下直接使用命令：node、npm：
同时通过npm默认安装第三方node模块的存放路径为~/AppData/Roaming/npm，~代表用户目录，并自动将其配置到用户环境变量path下。
2.调整npm目录
如果不想使用默认的npm目录，如考虑到系统盘的容量，可自行调整。新建两个目录：
打开命令终端，执行：
# 设置第三方node模块安装目录
npm config set prefix "D:\Programs\node\npm"
# 设置npm缓存目录
npm config set cache "D:\Programs\node\npm-cache"
替换npm的用户环境变量path中的配置项为D:\Programs\node\npm。
3.切换npm下载源
全局安装一个好用的npm源管理工具nrm：
npm i -g nrm
使用方式：
# 查看npm源列表
nrm ls
# 切换npm源
nrm use taobao
vite构建项目
基于配置简洁和构建速度快的考虑，选择vite脚手架来创建vue项目。
官方参考文档 - 搭建第一个vite项目
生成步骤
在本地准备一个练习目录：E:\vue_learning\code\001_hello_vue，为便于项目的拷贝和后续迭代，项目名统一叫demo。打开命令终端，执行：
# 切换到路径：E:\vue_learning\code\001_hello_vue
# 调用最新的创建工具
npm create vite@latest
这里通过交互式命令创建了一个使用typescript语言的vue3项目。
运行项目
# 安装依赖
# 进入目录：E:\vue_learning\code\001_hello_vue\demo
npm i
# 启动dev服务
npm run dev
访问地址：http://localhost:5173/
看到经典的双V页面
IDE（集成开发环境）
这里选择最智能、开发效率最高的webstorm。
安装步骤
下载最新版进行安装。
安装位置可自行设定：
添加桌面快捷方式，并设置右键打开项目
执行后续安装。
开始使用
右键打开项目
第一次使用，不导入设置
因为是收费版本，选择30天试用，在弹出对话框中，点信任项目。打开项目开发窗口后，进行webstorm基本设置。
File | Settings，字体设置
快捷键设置
创建npm快捷运行项
插件
基本的vue.js、eslint、以及样式插件stylelint、less、sass、tailwindss等等都内置了。这里再安装一个常用的翻译插件translator，以辅助我们看英文文档。
认识vue项目结构
public目录
站点静态资源发布目录。试着练习下
应用入口
index.html为单页面应用的访问入口，在vite中可以直接用<script>标签引用type="module"的模块文件，这种引入方式目前主流浏览器都支持。
src/main.ts为应用的启动入口，会在其中基于vue的根组件App来创建一个应用实例，并挂载到一个dom元素上。在该文件中该可以对全局样式进行导入以及进行组件的全局注册。
src/assets预留的静态资产目录，一般用来存放需要打包的图片、字体图标等等静态资源。
src/style.css默认生成的全局样式文件，全局样式和组件样式文件存放位置可自行组织。
src/vite-env.d.ts通过reference注释语法引入基本的样式、图片等等静态资源股文件的typescript类型声明定义。
src/App.vue和src/components/*.vue为应用的vue组件定义文件。App.vue为应用根组件，可以在其中声明路由标签并结合vue-router实现路由页面切换。一般页面组件会和UI组件用不同的目录区分，比如页面组件放在src/views下，自定义UI组件放在src/components下。相比vue2，vue3可以在.vue文件中编写setup形式的脚本，应用Composition API来简化组件开发。同时vite还支持模板内容渲染和事件绑定更方便更灵活的jsx、tsx形式的文件扩展，集成它们会非常简单。
package.json
"type": "module"，模块使用方式是基于ES Module的。
命令脚本：
-
dev
启动一个本地开发服务器，支持热更新
-
build
生产环境打包
-
preview
预览打包生成的目录结构和代码
依赖部分，生产依赖只用到vue，目前最新版本3.4.29。
开发依赖：
-
vitevite核心依赖
-
@vitejs/plugin-vuevite集成vue3的插件依赖，在
vite.config.ts中配置下，vue功能就可用了。 -
typescriptts的核心依赖，目前支持到5.2以上的版本 -
vue-tsc该
ts编译工具支持对vue组件中的ts语法进行编译
tsconfig
vite脚手架生成的ts配置包含了两套：tsconfig.node.json包含了针对vite脚手架构建的ts模块的编译选项，这里脚手架的构建文件是vite.config.ts；tsconfig.app.json则包含了针对vite应用中ts相关文件各方面的编译选项，要应用编译选项的文件包括ts、tsx和vue。
具体的配置选项可以参照文档注释（光标移动到配置的key上）。
vite.config.ts
它是整个vite脚手架工具的配置文件。生成的最简配置中只应用了vue插件，以支持各种vue文件的加载和编译。后续，我们会完成其他vite插件的设置，以实现vite脚手架其他功能的集成和扩展。
jsx集成
习惯了用react开发的小伙伴都知道，写jsx是种非常好的体验，感谢vite的vue相关插件的支持，使得可以写jsx风格的代码来生成组件内容了。
将App.vue改造成一个最简单的App.tsx形式：
import { defineComponent } from 'vue'
// 通过defineComponent来实现setup语法和jsx风格的组件模板渲染
export default defineComponent({
// 在setup方法种实现数据模型、事件定义以及模板渲染等逻辑
// 参数可接收组件属性定义对象、vue上下文中可注入的组件实例，如：slots、emit、expose等
setup(props, ctx) {
console.log(props, ctx)
// jsx语法返回的模板渲染内容
return () => (
<div>hello tsx</div>
)
}
})
main.ts中引入App的方式改为import App from './App'，这里.tsx后缀可省略。存在的编译问题：
在tsconfig.app.json的compilerOptions配置选项下增加"jsxImportSource": "vue"，然后重启webstorm，编译错误消失。启动dev服务，访问页面，报错：
需要按照和配置@vitejs/plugin-vue-jsx插件。用npm i -D @vitejs/plugin-vue-jsx命令安装。并在vite.config.ts中新增配置：
...
import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
plugins: [..., vueJsx()],
})
重启服务，ok！
有关tsx应用开发的细节，请参考笔者的基于TSX的Vue3组件开发技能一文。
eslint、prettier集成
日常协同开发，统一风格可以方便别人理解你的代码，也减少提交代码仓库产生的冲突。
eslint最新版的配置方式已变更
最新版支持flat方式的配置方式，测试时发现与vite插件vite-plugin-eslint不能很好的兼容，毕竟vite-plugin-eslint最新版本的发布距离现在也有两年多了。为此我们依然采用eslint老版本的配置方式。
需要安装的依赖：
eslint@8.57.0
eslint核心依赖@typescript-eslint/parser@7.10.0
eslint的ts语法解析器@typescript-eslint/eslint-plugin@7.10.0
eslint检查ts文件代码的插件eslint-plugin-vue@9.22.0
eslint检查vue文件代码的插件vite-plugin-eslint@1.8.1
eslint和vite整合的vite插件prettier@3.2.5
prettier核心依赖eslint-plugin-prettier@5.1.3
eslint整合prettier的插件eslint-config-prettier@9.1.0
用于关闭eslint和prettier有冲突的依赖
配置步骤
一键安装：
npm i -D eslint@8.57.0 @typescript-eslint/parser@7.10.0 @typescript-eslint/eslint-plugin@7.10.0 eslint-plugin-vue@9.22.0 vite-plugin-eslint@1.8.1 prettier@3.2.5 eslint-plugin-prettier@5.1.3 eslint-config-prettier@9.1.0
新建.eslintrc.json以完成eslint配置
{
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": ["plugin:vue/vue3-recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended"],
"parser": "vue-eslint-parser",
"parserOptions": {
"ecmaVersion": "latest",
"parser": "@typescript-eslint/parser",
"sourceType": "module"
},
"plugins": ["@typescript-eslint", "vue", "prettier"],
"rules": {}
}
eslint配置说明
这里首先指定了eslint作用的环境，然后在extends选项中按照覆盖顺序指定了预定义的eslint规则库。然后指定eslint分析器为vue-eslint-parser，并设置分析选项：基于最新ecma版本以module的模块化为源类型使用ts版本的eslint分析器进行分析。
plugins中指定要应用的eslint插件。
最后的rules配置项中可以追加个别的检查规则。
新建prettier代码格式定义文件.prettierrc.cjs：
module.exports = {
// 一行最多多少个字符
printWidth: 150,
// 指定每个缩进级别的空格数
tabWidth: 2,
// 使用制表符而不是空格缩进行
useTabs: false,
// 在语句末尾是否需要分号
semi: false,
// 是否使用单引号
singleQuote: true,
// 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
quoteProps: "as-needed",
// 在JSX中使用单引号而不是双引号
jsxSingleQuote: true,
// 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
trailingComma: "none",
// 在对象文字中的括号之间打印空格
bracketSpacing: true,
// jsx 标签的反尖括号需要换行
jsxBracketSameLine: false,
// 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
arrowParens: "always",
// 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
rangeStart: 0,
rangeEnd: Infinity,
// 指定要使用的解析器，不需要写文件开头的 @prettier
requirePragma: false,
// 不需要自动在文件开头插入 @prettier
insertPragma: false,
// 使用默认的折行标准 always\never\preserve
proseWrap: "preserve",
// 指定HTML文件的全局空格敏感度 css\strict\ignore
htmlWhitespaceSensitivity: "css",
// Vue文件脚本和样式标签缩进
vueIndentScriptAndStyle: false,
//在 windows 操作系统中换行符通常是回车 (CR) 加换行分隔符 (LF)，也就是回车换行(CRLF)，
//然而在 Linux 和 Unix 中只使用简单的换行分隔符 (LF)。
//对应的控制字符为 "\n" (LF) 和 "\r\n"(CRLF)。auto意为保持现有的行尾
// 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
endOfLine: "auto"
}
最后在vite.config.ts中加入vite-plugin-eslint插件配置：
vite.config.ts：
...
import eslintPlugin from 'vite-plugin-eslint'
export default defineConfig({
plugins: [
...,
eslintPlugin({
lintOnStart: true, // 启动vite服务时执行eslint检查
fix: true // 对可修复的代码进行修复
})
]
})
注意
这里的vite-plugin-eslint插件引入会有ts编译错误，修改其package.json，找到"import": "./dist/index.mjs"这一行，改为下面形式："import": { "types": "./dist/index.d.ts", "default": "./dist/index.mjs" }
使用方式
有两种应用eslint检查的方式：通过命令脚本或webstorm插件。
在package.json中配置命令脚本：
{
...,
"scripts": {
...,
"eslint": "eslint src --ext .js,.cjs,.vue,.ts,.jsx,.tsx --ignore-path .gitignore --fix",
"prettier": "prettier --write \"./**/*.{html,vue,ts,js,cjs,tsx,jsx,json,md}\""
},
...
}
还可以配置webstorm插件：
stylelint集成
tailwindcss集成
样式开发借助tailwindcss原子化样式工具，可以实现样式复用、高效编译和自由扩展，这大大提高了组件开发的效率。
待更新。。。
