vue3最新开发环境篇

前言

本篇带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。

开发依赖：

• vite

  vite核心依赖

• @vitejs/plugin-vue

  vite集成vue3的插件依赖，在vite.config.ts中配置下，vue功能就可用了。

• typescript

  ts的核心依赖，目前支持到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原子化样式工具，可以实现样式复用、高效编译和自由扩展，这大大提高了组件开发的效率。

待更新。。。