搭个项目玩玩 Vue3 + script setup + ts + Vite + Volar

原创已于 2022-03-21 21:52:04 修改 · 340 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

于 2022-03-21 21:51:38 首次发布

本文介绍了如何使用Vite创建Vue3+TS项目，包括项目目录结构解析、初始化命令、遇到的运行错误及解决方法。Vite使用esbuild快速转译TS，但不进行类型检查，推荐结合vue-tsc进行类型验证。同时，文章提到了如何在tsconfig.json中配置跳过第三方包类型检查。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 Vite 创建 vue + ts 项目

执行执行，创建项目模板


	$ npm init vite@latest
	√ Project name: ... v3_demo
	√ Select a framework: » vue
	√ Select a variant: » vue-ts
	
	Scaffolding project in C:\Users\admin\Desktop\v3_demo...
	
	Done. Now run:
	
	  cd v3_demo
	  npm install
	  npm run dev

	
	├── public                  # 不需要打包的静态资源
	│   └── favicon.ico
	├── src
	│   ├── api                 # 后台 API 接口封装
	│   ├── assets              # 需要打包的静态资源
	│   ├── components          # 公共组件
	│   ├── composables         # 通用的组合式 API
	│   ├── layout              # 页面布局模板
	│   ├── plugins             # 插件
	│   ├── router              # 路由
	│   ├── store               # Vuex 存储
	│   ├── styles              # 样式
	│     └── index.scss        # 全局通用样式
	│   ├── utils               # 工具模块
	│   ├── views               # 路由页面
	│   ├── App.vue             # 根组件
	│   ├── main.ts             # 入口模块
	│   ├── shims-vue.d.ts      # 补充 .vue 模块类型声明
	│   └── vite-env.d.ts       # 补充 vite 类型声明
	├── .gitignore
	├── README.md
	├── index.html
	├── package-lock.json
	├── package.json
	├── tsconfig.json
	└── vite.config.ts

vite新建vue3项目运行报错
创建完项目，肯定是要安装依赖包，再运行，但是盆友们会发现，运行直接报错了

admin@DESKTOP-ABKQLS5 C:\Users\admin\Desktop\v3_demo
$ npm run dev

> v3_demo@0.0.0 dev
> vite

events.js:292
      throw er; // Unhandled 'error' event
      ^

Error: spawn C:\Users\admin\Desktop\v3_demo\node_modules\esbuild\esbuild.exe ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19)
    at onErrorNT (internal/child_process.js:465:16)
    at processTicksAndRejections (internal/process/task_queues.js:80:21)
Emitted 'error' event on ChildProcess instance at:
    at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
    at onErrorNT (internal/child_process.js:465:16)
    at processTicksAndRejections (internal/process/task_queues.js:80:21) {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'spawn C:\\Users\\admin\\Desktop\\v3_demo\\node_modules\\esbuild\\esbuild.exe',
  path: 'C:\\Users\\admin\\Desktop\\v3_demo\\node_modules\\esbuild\\esbuild.exe',
  spawnargs: [ '--service=0.12.22', '--ping' ]
}

解决办法： node ./node_modules/esbuild/install.js
4. 在 Vite 创建的项目中，是默认没有ESLint的
5. Vite中 TS 的说明

Vite 天然支持引入 .ts 文件。
Vite 仅执行 .ts 文件的转译工作，并不执行任何类型检查。并假设类型检查已经被你的 IDE 或构建过程接管了（你可以在构建脚本中运行 tsc --noEmit 或者安装 vue-tsc 然后运行 vue-tsc --noEmit 来对你的 *.vue 文件做类型检查）。
Vite 使用 esbuild 将 TypeScript 转译到 JavaScript，约是 tsc 速度的 20~30 倍，同时 HMR 更新反映到浏览器的时间小于 50ms。
注意因为 esbuild 只执行转译工作而不含类型信息，所以它不支持 TypeScript 的特定功能例如常量枚举和隐式 “type-only” 导入。你必须在你的 tsconfig.json 中的 compilerOptions 里设置 “isolatedModules”: true，这样 TS 才会警告你哪些功能无法与独立编译模式一同工作

vue-tsc 和 tsc
tsc 只能验证 ts 代码类型
vue-tsc 可以验证 ts + Vue Template 中的类型（基于 Volar）
建议在 package.json 中新增一个 scripts 脚本用来单独执行 TS 类型验证：

	"scripts": {
	  ...
	  "build": "npm run tsc && vite build",
	  "tsc": "vue-tsc -noEmit"
	}

-noEmit 表示只验证类型，不输出编译结果
7. 跳过第三方包类型检查, 在tsconfig.json中添加:

	{
	  "compilerOptions": {
	    ...
	    "baseUrl": "./",
	    "skipLibCheck": true
	  }
	}

Vue3 的TS具体语法，这里不再赘述，不会的小伙伴可以直接参考