05 | 项目启动：搭建Vue 3工程化项目第一步
大圣
该思维导图由 AI 生成，仅供参考
你好，我是大圣，欢迎进入课程的第二部分——基础入门篇。
在课程导读篇，我们了解了 Vue 3 的新特性以及从 Vue 2 升级到 Vue 3 的方法。相信你现在已经和小圣同学一样，迫不及待地想做一个实际的项目。当然了，在实战中学习 Vue 3 也是最好并且最快的学习方式。
不过，你先别着急。在基础入门篇，我会用 5 讲的篇幅，带你学习 Vue 3 的核心功能，包括项目搭建、Composition API、响应式、组件化和动画。这 5 讲结束后，你就会对 Vue 3 的核心功能有一个整体的了解，为我们全家桶实战篇的学习打下坚实的基础。
实际开发中，除了 Vue 3 这个库，我们还需要 Vue 3 的最新全家桶，也就是 Vue 3 的周边生态，这其实就和士兵需要武器装备是一样的。今天这次，我会手把手带你安装和构建 Vue 3 开发环境。
环境准备
在之前的语法演示中，我们直接使用 script 引入 Vue 3，从而在浏览器里实现了所有调试功能。但是在实际的项目中，我们会使用专门的调试工具。在项目上线之前，代码也需要打包压缩，并且考虑到研发效率和代码可维护性，所以在下面，我们需要建立一个工程化的项目来实现这些功能。
你能在下图中看到我们现在要用到的工具，VS Code 写 Vue 3 的代码，直接在 Chrome 浏览器里展示，我们会在这个基础之上逐步添加新的工具。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文详细介绍了使用Vite创建Vue 3项目的环境准备和搭建过程。作者建议使用Node.js和VS Code进行开发，并推荐安装Volar插件以获得全面的Vue 3开发支持。通过命令行创建Vite初始化项目，并进行依赖安装和项目启动。作者介绍了如何细化src目录，搭建源码的骨架架构，并展示了热更新的开发体验。此外，还介绍了在多页面项目中使用vue-router和Vuex的安装和框架搭建。文章还提到了项目架构的全景图，从环境的准备到项目的初始化，再到搭建完成项目雏形，整个项目架构的全景图也在项目开发过程中逐渐完善。读者可以从中了解到Vue 3项目搭建的基本流程和注意事项，以及如何规范项目结构和使用相关工具。整体而言，本文以实际操作为主线，为读者提供了清晰的指导和实践经验。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《玩转 Vue 3 全家桶》，新⼈⾸单¥68
《玩转 Vue 3 全家桶》，新⼈⾸单¥68
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(103)
- 最新
- 精选
ch3cknullvite官方收集的一些和vite相关的项目，包括插件，模板，都分类整理好的，地址如下 https://github.com/vitejs/awesome-vite作者回复: 赞赞赞
2021-10-2734
南山1. vuex 的数据本地持久化插件 2. 接口数据的mock， json-server 3. 埋点的sdk 4. @vueuse 库，封装常用的hooks作者回复: 收到
2021-10-27423
奇奇希望老师能够使用TS来演示代码 集成 EditorConfig 配置，集成 husky 和 lint-staged，代码提交时候检查 ESLint 规则，通过再提交作者回复: 组件库那一节会使用husky
2021-10-28313- Geek_da0e92希望老师用vite+vue3.2+ts
作者回复: 为了降低课程上手难度，项目贯穿下来还是用的Javascript ，vite和vue3是用的
2021-10-27611 
cskangElement3 比较适合桌面端，手机端组件库老师推荐用什么？作者回复: 手机端vant用着还是不错的
2021-10-2710
Mèow大圣老师，你的架构图是怎么画的？作者回复: 用的语雀 也推荐给你
2021-11-029
我叫小灰我可能会加入lodash和axios这两个库作者回复: 这两个库也是很多项目必备的
2021-10-288
乐叶如果路由不使用hash模式，可以使用createWebHistory作者回复: +1
2021-10-277
学渣rUa一哈จุ๊บvite真的太快了，啥时候大圣老师能开个与之相关的课程呢？作者回复: vite其实不需要独立开课，咱们这个专栏就会讲
2021-10-277
王鸿轩想问下大圣老师 vue3.2 插件该怎么配置 vetur 和 volar 都使用吗，冲突问题如何解决作者回复: 咦，我现在是禁了vetur，只用volar
2021-10-2726
收起评论