配置环境

1. 安装Nodejs

Node.js 中文网

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统。

http://nodejs.cn/

2. 构建Vite项目

Vite中文网

下一代前端开发与构建工具 使用原生 ESM 文件，无需打包! 无论应用程序大小如何，都始终极快的模块热重载（HMR） 对 TypeScript、JSX、CSS 等支持开箱即用。 可选 "多页应用" 或 "库" 模式的预配置 Rollup 构建 在开发和构建之间共享 Rollup-superset 插件接口。 灵活的 API 和完整 TypeScript 类型。

https://vitejs.cn/

3. 编译器 & 插件

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

https://code.visualstudio.com/

• Vue Language Features (Volar)（官方语法提示）

• TypeScript Vue Plugin (Volar)（如果使用TS的话）

• Vue 3 Snippets（快捷输入）

Vue目录结构

• public 下面的不会被编译 可以存放静态资源

• assets 下面可以存放可编译的静态资源

• components 下面用来存放我们的组件

• App.vue 是全局组件

• main.ts 全局的ts文件

• index.html 非常重要的入口文件 （webpack，rollup 他们的入口文件都是enrty input 是一个js文件 而Vite 的入口文件是一个html文件，他刚开始不会编译这些js文件 只有当你用到的时候 如script src="xxxxx.js" 会发起一个请求被vite拦截这时候才会解析js文件）

• vite.config/ts 这是vite的配置文件具体配置项 后面会详解

具体学习

小满zs的个人空间_哔哩哔哩_Bilibili

小满zs，精通Vue2,Vue3,React,Angular,Nginx,Linux,nodeJs等单词拼写;小满zs的主页、动态、视频、专栏、频道、收藏、订阅等。哔哩哔哩Bilibili，你感兴趣的视频都在B站。

https://space.bilibili.com/99210573

视频

Vue3 + vite + Ts + pinia + 实战 + 源码 +全栈_哔哩哔哩_bilibili

Vue3 + vite + Ts + pinia + 实战 + 源码 +全栈共计109条视频，包括：小满Vue3（课程导读）、小满Vue3 （第一章 Vue概述）、小满Vue3（第二章 环境搭建）、小满Vue3（第二章-2 nvm，nrm使用教程）、小满Vue3（第三章 认识目录和SFC）、小满Vue3（第三章-2 npm run dev 全过程）、小满Vue3（第三章-3 ...

https://www.bilibili.com/video/BV1dS4y1y7vd

文档

Vue3_小满zs的博客-CSDN博客

自定义博客皮肤VIP专享 点击选择上传的图片 格式为PNG、JPG，宽度*高度大于1920*100像素，不超过2MB，主视觉建议放在右侧，请参照线上博客头图 请上传大于1920*100像素的图片！ 点击选择上传的图片 图片格式为PNG、JPG，不超过1MB，可上下左右平铺至整个背景 点击选择上传的图片 图片格式为PNG、JPG，图片宽度*高度为300*38像素，不超过0.5MB 自定义博客皮肤 小满zs CSDN认证博客专家 CSDN认证企业博客 关注 关注数：788 文章数：42 文章阅读量：158471 文章收藏量：650

https://xiaoman.blog.csdn.net/category_11618172.html

尝试

Vue Template Explorer

Auto Import

1. (22条消息) Vue3_小满zs的博客-CSDN博客