使用脚手架新建 Vue 项目全过程

使用脚手架新建 Vue 项目全过程标签vue3、vite、前端、脚手架简介本文记录使用 Vite 脚手架创建 Vue3 项目完整实操步骤包含命令、截图说明适合课堂随堂练习。一、环境准备前提电脑已经安装 Node.js打开PowerShell或者CMD终端输入下面命令验证环境node-vnpm-v配图1终端查看node版本截图能输出版号代表环境正常。## 二、使用 Vite 脚手架创建 Vue 项目在终端执行脚手架创建命令npmcreate vuelatest 执行后终端会弹出一系列配置选项按照下面选择1. Project namemy-app-vue项目名称2. Add TypeScript?No3. Add JSX Support?No4. Add Vue RouterforSingle Page Application?Yes5. Add Piniaforstate management?Yes6. Add VitestforUnit testing?No7. Add an End-to-End Testing Solution?No8. Add ESLintforcode quality?No9. Add Prettierforcode formatting?Yes配图2终端创建项目时的交互式选项截图。## 三、进入项目目录安装依赖脚手架生成项目文件之后依次执行下面两条命令cdmy-app-vuenpminstallcdmy-app-vue进入项目文件夹npminstall自动读取 package.json下载项目需要的全部依赖包配图3npminstall安装依赖的终端截图。## 四、启动开发服务器依赖安装完成执行启动命令npmrun dev 终端会输出本地访问地址一般是http://localhost:5173/打开浏览器访问该地址就能看到 Vue 默认欢迎页面。配图4npm run dev 启动成功显示访问地址的终端截图。配图5浏览器打开 Vue 初始页面截图。## 五、使用 VSCode 打开项目code. 在项目根目录终端执行上面命令用 VSCode 打开项目查看项目目录结构。 项目核心目录说明 -src源代码文件夹页面、组件全部放在这里 -src/components存放 Vue 组件文件 -src/App.vue根组件 -package.json项目配置文件记录项目脚本、依赖信息配图6VSCode 打开项目目录树截图。## 六、停止项目服务终端按Ctrl C即可终止当前运行的开发服务器。## 七、总结本次使用 Vite 官方脚手架快速搭建 Vue3 项目整体流程1. 校验 Node 环境2.npmcreate vuelatest创建项目3.cd进入项目目录4.npminstall安装依赖5.npmrun dev启动项目预览 Vite 脚手架相比旧版 vue-cli 启动速度更快是 Vue3 推荐的项目构建工具。