Vue3+Vite实践 01
一、环境准备
1. 安装 Node.js
Vite 和 Vue 项目运行都依赖 Node 环境。
推荐安装 Node 16+ / Node 18+ 稳定版
下载地址：Node.js — Run JavaScript Everywhere
2.验证环境
安装完成后，打开终端输入以下命令验证：
node -v npm -v输出版本号即代表安装成功。
二、创建 Vue3 项目
1.进入项目存放目录
创建一个空文件夹，用于存放Vue项目。
打开终端
#示例：进入D盘的vue-project文件夹 cd D:\vue-projects # 示例：进入桌面的vue-project文件夹 cd ~/Desktop/vue-projects2.执行创建命令
npm create vue@latest注：1.@latest表示拉取最新版Vue模板
2.首次执行会提示Need to install the following packages: create-vue@xxx，输入y回车即可。
3. 交互式配置项目
执行命令后，会出现交互式提问，按回车选择默认 / 推荐选项，以下是逐行解释：
| 提问内容 | 推荐选择 | 含义说明 |
|---|---|---|
Project name: | vue3-study | 项目名称（只能小写、短横线，不能有中文 / 空格） |
Add TypeScript? | No | 类型语法（新手先不学，后期再加） |
Add JSX Support? | No | React 语法支持（Vue 项目无需） |
Add Vue Router for Single Page Application development? | Yes | Vue 路由（必备，做页面跳转） |
Add Pinia for state management? | Yes | Vue 官方状态管理（必备，替代 Vuex） |
Add ESLint for code quality? | Yes | 代码规范检查（必备） |
Add Prettier for code formatting? | Yes | 代码格式化（必备） |
配置完成后，终端会显示项目创建成功！
三、启动 Vue3 项目
1. 进入项目目录
# 进入刚才创建的项目文件夹（项目名和你输入的一致） cd vue3-study2. 安装项目依赖
Vue 项目依赖第三方包，执行命令安装：
npm install等待安装完成（终端无报错即可）。
3. 启动开发服务器
npm run dev启动成功后，终端会显示以下内容：
➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ ready in 300ms4. 访问项目
打开浏览器，输入地址：http://localhost:5173/，或ctrl+鼠标左键点击http://localhost:5173/即可看到Vue3 欢迎页面，说明项目创建并启动成功 ！
四、第一个 Vue 组件
修改根组件src/App.vue，编写最简单的 Vue3 代码，验证开发环境：
<template> #模板模块 负责写页面展示的HTML内容，比如文字、按钮、图片等 <div> <p>我的第一个 Vue3 项目！</p> </div> </template> <script setup> # 脚本模块 负责写JS逻辑，比如定义数据、函数、调用接口等 </script> <style scoped> #样式模块 负责写 CSS 样式，美化页面结构 </style>保存文件，浏览器自动更新。
总结
- 核心流程：安装 Node → 执行
npm create vue@latest创建项目→ 安装依赖 → 启动项目； - 所有代码写在
src目录； - Vue3 默认使用组合式 API
<script setup>。