Vue3+Vite实践 01

一、环境准备1. 安装 Node.jsVite 和 Vue 项目运行都依赖 Node 环境。推荐安装 Node 16 / Node 18 稳定版下载地址Node.js — Run JavaScript Everywhere2.验证环境安装完成后打开终端输入以下命令验证node -v npm -v输出版本号即代表安装成功。二、创建 Vue3 项目1.进入项目存放目录创建一个空文件夹用于存放Vue项目。打开终端#示例进入D盘的vue-project文件夹 cd D:\vue-projects # 示例进入桌面的vue-project文件夹 cd ~/Desktop/vue-projects2.执行创建命令npm create vuelatest注1.latest表示拉取最新版Vue模板2.首次执行会提示Need to install the following packages: create-vuexxx输入y回车即可。3. 交互式配置项目执行命令后会出现交互式提问按回车选择默认 / 推荐选项以下是逐行解释提问内容推荐选择含义说明Project name:vue3-study项目名称只能小写、短横线不能有中文 / 空格Add TypeScript?No类型语法新手先不学后期再加Add JSX Support?NoReact 语法支持Vue 项目无需Add Vue Router for Single Page Application development?YesVue 路由必备做页面跳转Add Pinia for state management?YesVue 官方状态管理必备替代 VuexAdd 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 vuelatest创建项目→ 安装依赖 → 启动项目所有代码写在src目录Vue3 默认使用组合式 APIscript setup。