Vue框架入门教程：创建Vue3项目并完成本地页面预览

在前端开发内容学习中Vue框架入门教程创建Vue3项目并完成本地页面预览是常见主题。很多人在阅读时会遇到概念分散、步骤不清和注意点难以归纳的问题。本文按照基础概念、操作流程和关键细节对相关内容进行整理。

完成后应看到的Vue本地页面

最终结果是在浏览器中访问本地开发地址看到Vue项目的默认页面。这个页面说明项目依赖安装、开发服务器启动和浏览器访问链路已经跑通是后续学习组件、路由和状态管理前的第一道验证。

图1浏览器能打开Vue欢迎页说明项目创建和本地运行已经成功。

准备Node.js和Vue项目工具

Vue项目依赖Node.js和npm管理包。开始前先执行node -v和npm -v能看到版本号再继续。老教程中常见vue-cli新项目也可以使用Vite本文按脚手架创建项目的思路讲重点是让新手理解完整流程。

项目目录建议使用英文路径例如D:ue-demo或用户目录下的vue-demo避免中文路径导致依赖安装或终端命令报错。

创建Vue3项目并选择配置

第1步安装Vue脚手架或使用创建命令

如果使用Vue CLI可以执行npm install -g @vue/cli安装脚手架再用vue create demo3创建项目。创建过程中选择Vue3相关预设即可。

npm install -g @vue/cli
vue create demo3

如果你使用Vite也可以执行npm create vite@latest选择Vue模板。两种方式的学习重点相同先生成项目结构再启动开发服务。

第2步等待依赖安装完成

项目创建过程会下载依赖时间受网络影响。终端没有报错并返回命令输入状态时说明创建过程结束。不要在依赖还没安装完时强行关闭终端。

认识Vue项目目录结构

进入项目后你会看到src、public、package.json等文件。src是主要开发目录components通常放组件App.vue是默认根组件package.json记录启动脚本和依赖。

图2先认识项目结构后续修改页面内容时就能快速定位到src和组件文件。

新手不要一开始就修改很多文件。建议先打开src/App.vue改一行标题文字保存后观察浏览器是否自动刷新。

启动开发服务器并验证页面

第3步进入项目目录执行启动命令

在终端执行cd demo3进入项目目录再运行npm run serve或项目提示的启动命令。如果是Vite项目常见命令是npm run dev。

图3启动命令输出本地地址后复制地址到浏览器即可验证页面。

整体来看Vue框架入门教程创建Vue3项目并完成本地页面预览的重点在于把核心概念、操作流程和注意事项串起来理解。实际使用时可以先确认基础条件再结合具体场景逐项排查和调整这样处理同类问题会更稳妥。