企业官网建设流程全解析

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

标签：vue3、vite、前端、脚手架
简介：本文记录使用 Vite 脚手架创建 Vue3 项目完整实操步骤，包含命令、截图说明，适合课堂随堂练习。

一、环境准备

前提：电脑已经安装 Node.js，打开PowerShell或者CMD终端，输入下面命令验证环境

node-vnpm-v>配图1：终端查看node版本截图，能输出版号代表环境正常。## 二、使用 Vite 脚手架创建 Vue 项目在终端执行脚手架创建命令：npmcreate vue@latest 执行后，终端会弹出一系列配置选项，按照下面选择：1. Project name：`my-app-vue`（项目名称）2. Add TypeScript?`No`3. Add JSX Support?`No`4. Add Vue RouterforSingle Page Application?`Yes`5. Add Piniaforstate management?`Yes`6. Add VitestforUnit testing?`No`7. Add an End-to-End Testing Solution?`No`8. Add ESLintforcode quality?`No`9. Add Prettierforcode formatting?`Yes`>配图2：终端创建项目时的交互式选项截图。## 三、进入项目目录，安装依赖脚手架生成项目文件之后，依次执行下面两条命令：cdmy-app-vuenpminstall`cdmy-app-vue`：进入项目文件夹`npminstall`：自动读取 package.json，下载项目需要的全部依赖包>配图3：npminstall安装依赖的终端截图。## 四、启动开发服务器依赖安装完成，执行启动命令：npmrun dev 终端会输出本地访问地址，一般是`http://localhost:5173/`打开浏览器访问该地址，就能看到 Vue 默认欢迎页面。>配图4：npm run dev 启动成功，显示访问地址的终端截图。>配图5：浏览器打开 Vue 初始页面截图。## 五、使用 VSCode 打开项目code. 在项目根目录终端执行上面命令，用 VSCode 打开项目，查看项目目录结构。 项目核心目录说明： -`src`：源代码文件夹，页面、组件全部放在这里 -`src/components`：存放 Vue 组件文件 -`src/App.vue`：根组件 -`package.json`：项目配置文件，记录项目脚本、依赖信息>配图6：VSCode 打开项目目录树截图。## 六、停止项目服务终端按`Ctrl + C`，即可终止当前运行的开发服务器。## 七、总结本次使用 Vite 官方脚手架快速搭建 Vue3 项目，整体流程：1. 校验 Node 环境2.`npmcreate vue@latest`创建项目3.`cd`进入项目目录4.`npminstall`安装依赖5.`npmrun dev`启动项目预览 Vite 脚手架相比旧版 vue-cli 启动速度更快，是 Vue3 推荐的项目构建工具。