天行健，君子以自强不息；地势坤，君子以厚德载物。
每个人都有惰性，但不断学习是好好生活的根本，共勉！
文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。
燕山雪花大如席，片片吹落轩辕台。
——《北风行》
文章目录
- Vite构建vue3的单页应用
- 1. 命令执行的位置
- 2. 创建项目
- 3. 填写项目信息
- 4. 运行项目
- 5. 访问项目
- 6. 关闭项目
- 7. 使用vscode运行项目
- 8. 构建版本
Vue3入门
Vite构建vue3的单页应用
1. 命令执行的位置
先cd到一个目录，这个目录是接下来创建的项目所在的目录
我这里直接在指定目录打开cmd窗口执行命令
F:\STUDY\Front\Vue\VueProjects\VueTest01
2. 创建项目
这里不需要先安装vue，直接使用npm命进行项目的创建
创建的项目将使用基于 Vite 的构建设置，并允许我们使用 Vue 的单文件组件 (SFC)。
npm create vue@latest
该命令会先安装最新版本的create-vue脚手架然后创建单页应用项目
输入y后回车
3. 填写项目信息
如果不想自己输入可直接使用默认的参数即可，直接回车
输入项目名称
是否使用TS语法，否
是否启用JSX支持，否
是否引入Vue Router进行单页应用开发，是
是否引入Pinia用于状态管理，否
是否引入Vitest用于单元测试，是
是否引入一款端到端测试工具，不需要
是否引入ESLint用于代码质量检测，否
是否引入Vue DevTools 7扩展用于调试，否
如下图
此时项目初始化完成，可以使用vscode工具打开项目vue-project
4. 运行项目
根据命令窗口中的绿色命令操作运行项目
进入项目目录
cd vue-project
安装项目模块，这一步执行结束后，项目目录中会多一个node_modules文件夹，该文件夹中就是下载的项目的依赖模块
npm install
运行项目
npm run dev
执行完以上命令后，项目启动成功，如下
如图，可根据Local后的地址访问项目的首页
5. 访问项目
http://localhost:5173
访问界面如下，即表示项目成功访问
6. 关闭项目
如何关闭项目
在命令窗口界面ctrl+c即可停止项目运行
或者直接关闭运行的命令窗口
7. 使用vscode运行项目
在vscode的左上角的菜单栏中找到Terminal终端
选择New Terminal新建终端
在终端窗口中执行安装模块命令（如果已经安装过了就省略这一步）
npm install
再执行运行项目的命令
npm run dev
执行后界面如下，可通过链接访问项目（按住ctrl键点击鼠标左键即可跳转）
在vscode中关闭运行的项目一样是用ctrl+c
然后输入Y回车即可
也可以选择在终端右侧上面的垃圾桶按钮进行关闭运行的服务
8. 构建版本
项目发布到生产环境前，构建版本，执行以下命令会生成一个./dist文件夹
npm run build
感谢阅读，祝君暴富！
