【Vue】从零开始创建一个vue项目

一、环境准备（编程基础配置）

1. 安装 Node.js 与 npm

作用：Node.js 是 JavaScript 运行环境，npm 是包管理工具（类似“应用商店”），Vue 项目依赖它们。

• 步骤：
  1. 访问 Node.js 官网，下载 LTS 版本（长期支持版。
  2. 双击安装包，默认勾选所有选项，一路点击“Next”完成安装。
  3. 验证安装：

     node -v  # 显示版本号
     npm -v   # 显示版本号
     

  4. 配置国内镜像加速（解决下载慢问题）：

     npm config set registry https://registry.npmmirror.com
     

2. 安装 Vue CLI（脚手架工具）

作用：快速生成 Vue 项目模板，类似“工厂流水线”自动创建项目结构。

• 安装命令：

  npm install -g @vue/cli  # -g 表示全局安装，所有项目可用
    #也可以在创建了vue项目之后在项目里安装
    npm install  #cmd里输入就行
  

• 验证安装：

  vue --version  # 显示版本号
  

---

二、创建第一个 Vue 项目

1. 初始化项目

操作流程：

1. 在桌面新建文件夹（如 vue-demo），右键选择“在终端中打开”。
2. 输入命令：

   vue create my-first-app  # my-first-app 是项目名
   

3. 选择配置（新手推荐默认）：
   • 方向键选择 Default (Vue 3)，回车确认。
   • 等待依赖安装完成（进度条走完）。

2. 项目目录解析

生成的文件结构如下（重点部分已标注）：

my-first-app/
├── node_modules/  # 依赖库（无需手动修改）
├── public/        # 静态资源（如图标、HTML模板）
├── src/           # 核心开发目录
│   ├── assets/    # 图片、CSS等资源
│   ├── components/ # 可复用组件（如按钮、导航栏）
│   ├── App.vue    # 根组件（页面入口）
│   └── main.js    # 项目启动脚本
├── package.json   # 项目配置和依赖清单

---

三、VSCode 开发环境配置

1. 安装必备插件

• Volar（Vue 3 官方支持）：提供语法高亮、代码提示。
• ESLint：代码规范检查。
• Prettier：自动格式化代码。
• Vue VSCode Snippets：快速生成代码模板（如输入 vbase 生成组件结构。

2. 优化设置

1. 按 Ctrl + , 打开设置，搜索并启用：
   • Auto Save → onFocusChange（窗口失去焦点时自动保存）。
   • Format On Save → 勾选（保存时自动格式化代码）。

---

四、开发流程详解

1. 启动项目

cd my-first-app    # 进入项目目录
npm run serve      # 启动开发服务器

• 访问地址：浏览器打开 http://localhost:5174，看到欢迎页即成功。

2. 修改页面内容（以 App.vue 为例）

Vue 单文件组件结构：

• 修改效果：保存文件后，页面自动刷新显示新内容。

3. 添加新组件

1. 在 components 文件夹新建 MyButton.vue：

2. 在 App.vue 中引用：

---

五、调试与构建

1. 调试技巧

• 浏览器开发者工具：按 F12 打开，在 Sources 面板调试 Vue 组件。
• VSCode 调试：安装插件 Debugger for Chrome，配置 launch.json 实现断点调试。

2. 项目打包

npm run build  # 生成 dist/ 文件夹（生产环境代码）

• 部署：将 dist 文件夹上传至服务器即可。

---

六、常见问题解决

1. 依赖安装失败：删除 node_modules/ 和 package-lock.json，重新运行 npm install。
2. 端口占用：修改 vite.config.js 中的 server.port 值
3. 代码提示失效：检查 VSCode 插件冲突（如同时启用 Volar 和 Vetur 需禁用后者

---

附录：学习资源推荐

1. 官方文档：Vue.js 官网（优先阅读指南部分）
2. 实战项目：从 TodoList 开始，逐步增加路由、状态管理等功能
3. 社区支持：Stack Overflow、CSDN 技术论坛（搜索错误信息关键词）