vuejs 学习笔记

vue2停止维护很久了，老项目可能会用到，但新项目会基于AI使用vue3，所以只学习vue3。

虽然AI能够解决绝大部分问题，但是构建程序的乐趣就是去掌握这些规则。

说明

本文档提供 Vue 3 从环境准备到项目运行的完整流程，基于官方推荐工具链整理，可直接复制使用。

环境准备

确保你的本地环境已安装 Node.js（推荐 18+ 版本）。你可以通过以下命令检查：

# 以windows系统为例，在cmd终端中输入
node -v

如果未安装，请前往 Node.js 官网 下载并安装 LTS 版本。

创建新项目（推荐使用 Vite）

Vue 官方推荐使用 create-vue 脚手架，它基于 Vite 构建，能提供极快的启动和热重载体验。

1. 执行创建命令（在终端中运行）：

# 安装vue脚手架，其中npm这个命令由nodejs提供，create为具体操作类型
npm create vue@latest

该命令会自动安装并启动项目创建向导。

2. 配置项目选项：

命令执行后，你会看到一系列可选功能提示（如 TypeScript、路由等）。对于初学者或简单项目，建议按以下配置选择（直接回车选择默认值或输入 n）：

• Project name: <your-project-name> （输入你的项目名，如 my-vue-app）
• Add TypeScript?: No
• Add JSX Support?: No
• Add Vue Router?: No （后续可手动添加）
• Add Pinia?: No （后续可手动添加）
• Add Vitest?: No
• Add ESLint?: Yes （推荐，用于代码规范检查）
• Add Prettier?: Yes （推荐，用于代码自动格式化）

3. 安装依赖并启动：

创建完成后，进入项目目录并安装依赖：

# my-vue-app 是你在上一步创建的项目名字，根据实际的来
cd my-vue-app
npm install
npm run dev

执行 npm run dev 后，终端会输出本地服务器地址（通常是 http://localhost:5173），在浏览器中打开即可看到你的 Vue 应用。

项目结构与运行脚本

创建后的项目目录结构通常如下：

.
├─ src/  
│  ├─ components/     # Vue 组件目录  
│  ├─ App.vue         # 根组件  
│  └─ main.js         # 应用入口文件  
├─ index.html         # 主 HTML 文件  
├─ package.json       # 项目配置和依赖  
└─ vite.config.js     # Vite 构建工具配置

常用的 NPM 脚本命令：

命令	作用
npm run dev	启动开发服务器（带热重载）
npm run build	构建生产版本（输出到 dist/ 目录）
npm run preview	本地预览构建后的生产包

入门后续

• 学习 Vue 基础：阅读 👉 Vue 官方文档 了解模板语法、响应式等概念。
• 编辑器配置：推荐使用 💻 VS Code 并安装 Volar 扩展以获得最佳的 Vue 开发体验✨。