（1）案例前提
① 正确安装Node.js与Visual Studio Code。
② 掌握HTML、CSS、JavaScript基础知识。
（2）案例目标
掌握创建并运行Vue.js 3 项目的方法。
（3）案例实现
① 在开发的计算机“E”盘中创建一个文件夹“my-first-vue-project”。
💡 注意：
文件夹的创建位置可以根据实际情况自行选择。
② 打开Visual Studio Code软件，点击【FIle】导航，选择【Open Folder】选项，在打开的文件对话框中选择创建好的文件夹“my-first-vue-project”，如图1-3-1所示。
③ 点击【Terminal】导航，选择【New Terminal】选项新建终端，如图1-3-2所示。
④ 在终端中输入“npm create vue@latest”开始创建Vue.js 3 项目，如图1-3-3所示。
⑤ 填写项目名称“first-vue-project”，若不填写将使用默认名称“vue-project”，点击“Enter”键继续，如图1-3-4所示。
🔔 注意：
可以根据开发实际需要填写项目名称，但项目名称中尽量不要使用中文。
⑥ 选择项目所需的技术支持（本案例无需使用，选择默认即可）完成项目创建，如图1-3-5所示。
📌Vue.js 3 项目创建过程中遇到需要选择的选项，详细描述如下。
1.“Add TypeScript?”：是否在项目中添加TypeScript。
2.“Add JSX Support?”：是否在项目中添加JSX语法。
3.“Add Vue Router for Single Page Application development?”：是否为单页应用程序开发添加Vue Router。
4.“Add Pinia for state management?”：是否添加Pinina进行状态管理。
5.“Add Vitest for Unit Testing?”：是否添加Vitest进行单元测试。
6.“Add an End-to-End Testing Solution?”：是否添加端对端测试解决方案。
7.“Add ESLint for code quality?”：是否添加ESLint以提高代码质量。
8.“Add Vue DevTools 7 extension for debugging? (experimental)”：是否添加Vue DevTools 7 扩展（实验）进行调试。
⑦ 执行“cd first-vue-project”命令，进入项目所在的文件夹，执行“npm install”命令，为Vue.js 3 项目安装依赖，如图1-3-6所示。
⑧ 执行“npm run dev”命令，运行Vue.js 3 项目，如图1-3-7所示。
⑨ 按下【Ctrl】按键，左键点击“http://localhost:5173/”链接，在浏览器打开Vue.js 3 项目，如图1-3-8所示，项目创建并运行成功。
⑩ 在“src”文件夹下创建一个新文件“HelloWorld.vue”，“HelloWorld.vue”文件的内容如下。
⑪ 编辑“App.vue“文件，编辑完成后“App.vue”文件的内容如下。
🔔 注意：
在项目创建后App.vue中会自动生成初始代码，在实际开发时根据实际需要进行修改。
⑫ 重新通过浏览器查看页面，如图1-3-9所示。
💡 注意：
项目的“main.js”文件中有默认CSS样式引入，实际项目开发中根据需要进行修改或删除。
⑬ 使用浏览器工具调试页面
查看浏览器工具中的控制台（Console）面板，输出“Hello World”，如图1-3-10所示。
⑭ 使用Vue Devtools调试
使用Vue Devtools查看Components面板中的组件结构和组件数据，如图1-3-11所示。
创作说明
名称：编程指南-Vue.js 3前端开发从学到用完美实践
版本：2024年
网站：http://www.51xueweb.cn
撰写团队：杜宇飞 侯志强 尤飞祥 段玉昆
指导审核：阮晓龙
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/146373.html