---

天行健，君子以自强不息；地势坤，君子以厚德载物。

---

每个人都有惰性，但不断学习是好好生活的根本，共勉！

---

文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。

---

燕山雪花大如席，片片吹落轩辕台。
——《北风行》

---

---

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

---

感谢阅读，祝君暴富！

---