创建Vue项目

原创于 2025-06-21 03:30:16 发布 · 625 阅读

CC 4.0 BY-SA版权

文章标签：

一、Vue简介

Vue.js（通常简称为 Vue）是一个用于构建用户界面的渐进式 JavaScript 框架。它由尤雨溪创建，并于2014年首次发布。Vue 的核心库专注于视图层，易于上手，同时也能轻松地与其它库或现有项目整合，也能驱动复杂的单页应用（SPA）。

以下是 Vue 的核心特点和介绍：

1. 渐进式框架

核心思想： Vue 被设计为可以逐步采用的框架。你可以根据需求选择使用它的不同部分：
- 作为轻量级的视图层库，在现有项目中添加交互。
- 使用核心库 + 路由（Vue Router）构建 SPA。
- 加入状态管理（Pinia / Vuex）处理复杂应用状态。
- 结合构建工具（Vite, Vue CLI）和官方支持库（Vue Router, Pinia）构建大型企业级应用。
灵活性： 不需要一开始就接受整个框架的概念和复杂性，可以按需增量学习。

2. 核心特性

声明式渲染： 使用简洁的模板语法（基于 HTML），将数据声明式地渲染到 DOM。Vue 自动处理 DOM 更新。
响应式系统： 基于 JavaScript 对象的访问器属性（getters/setters）和现代 Proxy（Vue 3），Vue 能自动追踪数据依赖。当数据变化时，依赖该数据的视图会自动、高效地更新。
组件系统：
- 允许将 UI 拆分为独立、可复用的小型组件。
- 每个组件管理自己的状态、模板和逻辑。
- 组件树结构清晰，便于开发和维护。
- 支持单文件组件（.vue 文件）：将模板（HTML）、逻辑（JS/TS）和样式（CSS/Scoped CSS）封装在一个文件中，极大提升开发体验和代码组织性。

3. 主要优点

易学易用： API 设计简洁清晰，对具有 HTML、CSS、JS 基础的开发者非常友好。官方文档优秀（尤其中文文档质量很高）。
高性能：
- 虚拟 DOM： 通过高效的虚拟 DOM diff 算法，最小化直接操作真实 DOM 的次数。
- 智能优化： Vue 3 引入的编译时优化（如静态提升、补丁标志）进一步提升了运行时性能。
灵活性与可扩展性： 渐进式特性使其既能用于简单增强页面，也能构建复杂应用。丰富的官方库（Vue Router, Pinia）和庞大的社区生态（UI 库如 Element Plus, Vant；工具库等）提供了强大支持。
优秀的开发体验：
- 强大的 DevTools 浏览器扩展，方便调试。
- 单文件组件（SFC）组织清晰。
- 与 Vite（新一代前端构建工具）深度集成，提供极速的热更新和构建体验。
- 对 TypeScript 支持良好（Vue 3 原生用 TS 重写）。
活跃的社区： 拥有庞大且活跃的全球社区，中文社区尤其活跃，学习资源、第三方库和解决方案丰富。

4. 核心概念

模板语法： 基于 HTML 的扩展，使用插值 {{ }}、指令 v-（如 v-if, v-for, v-on, v-bind, v-model）将数据绑定到 DOM。
组件： 应用的基本构建块。
响应式数据： 使用 ref() 和 reactive()（Vue 3）或 data() 选项（Options API）创建响应式数据。
计算属性： 基于响应式数据派生出复杂逻辑的计算值（computed()）。
侦听器： 响应数据变化执行异步操作或复杂逻辑（watch() / watchEffect()）。
生命周期钩子： 在组件创建、挂载、更新、销毁等不同阶段执行自定义逻辑的函数（如 onMounted(), onUpdated()）。
组合式 API： Vue 3 引入的核心功能，允许使用函数式风格（setup() 函数或 <script setup>）更灵活地组织和复用逻辑代码，尤其适合复杂组件。

5. 生态系统

官方库：
- Vue Router： 官方的路由管理器。
- Pinia： 新一代官方推荐的状态管理库（简洁、强大、类型安全）。
- Vue DevTools： 浏览器调试扩展。
构建工具：
- Vite： 极速的现代构建工具（官方推荐）。
- Vue CLI： 成熟的全功能脚手架工具（现在更推荐 Vite）。
UI 框架： Element Plus, Ant Design Vue, Vant, Quasar, PrimeVue 等。
服务端渲染： Nuxt.js（基于 Vue 的通用/服务端渲染框架）。
静态站点生成： VuePress, VitePress。
测试： Vitest, Jest, Vue Test Utils。

6. 版本

Vue 2： 经典版本，应用广泛，已于 2023 年 12 月 31 日停止维护。
Vue 3： 当前主要版本（发布于 2020 年 9 月），带来了巨大的性能提升、更好的 TypeScript 支持、更小的体积以及全新的组合式 API。强烈建议新项目使用 Vue 3。

总结

Vue.js 是一个易学、灵活、高性能的渐进式 JavaScript 框架。它通过简洁的模板语法、强大的响应式系统和组件化模型，让开发者能够高效地构建用户界面。其渐进式特性使得开发者可以根据项目需求灵活选择功能，从简单的页面增强到复杂的单页应用都能胜任。优秀的性能、活跃的社区、丰富的生态系统以及不断提升的开发体验（尤其是 Vue 3 的组合式 API 和 Vite 集成），使其成为现代 Web 开发中非常流行和强大的选择。

二、创建Vue项目

1.环境搭建

安装node.js,看我前面的文章
node.js安装以及配置教程

2.搭建项目

# Vue 3 + Vite 项目指南

## 项目创建

### 使用 Vite 创建 Vue 项目
```bash
# 使用 npm
npm create vite@latest 项目名称 --template vue

# 使用 yarn
yarn create vite 项目名称 --template vue

# 使用 pnpm
pnpm create vite 项目名称 --template vue

输入 ‘y’点击继续，选择vue

在这里插入图片描述
2.根据自己的需求选择js、ts，我选择的是ts

在这里插入图片描述
3. 然后回车就创建好了

4. 安装依赖

5. 启动项目

6. 界面效果

3.项目结构

3.1 vite默认创建目录结构

项目名称/
├── node_modules/       # 依赖库（通过 npm install 生成）
├── public/             # ✅ 纯静态资源（不参与构建，直接复制到dist）
│   └── favicon.ico     # 网站图标（默认存在）
├── src/
│   ├── assets/         # ✅ 需要编译的静态资源（图片、样式等）
│   ├── components/     # ✅ 公共组件
│   ├── App.vue         # ✅ 根组件
│   ├── main.js         # ✅ 应用入口（也可能是 main.ts）
│   └── style.css       # ✅ 全局样式文件（默认存在）
├── .gitignore          # ✅ Git忽略规则（重要！）
├── index.html          # ✅ 主页面（Vue应用的挂载点）
├── vite.config.js      # ✅ Vite配置文件
├── package.json        # ✅ 项目配置和依赖管理
├── package-lock.json   # ✅ 依赖版本锁定文件（npm install后生成）
└── README.md           # ✅ 项目说明文档（默认存在）

3.2 需要手动创建的扩展目录

目录路径	用途	创建时机
`src/views/`	页面级组件	添加路由时
`src/router/`	路由配置	安装 vue-router 后
`src/store/`	状态管理 (Pinia/Vuex)	需要全局状态管理时
`src/api/`	API 请求封装	对接后端接口时
`src/utils/`	工具函数/辅助类	需要复用工具代码时
`src/composables/`	组合式函数 (Vue 3 特色)	需要逻辑复用时
`src/layouts/`	布局组件	需要多种页面布局时
`src/directives/`	自定义指令	创建自定义指令时
`src/mock/`	Mock 数据	前端数据模拟时
`tests/`	测试文件	添加单元测试时

3.3 完整项目结构示例

my-vue-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── robots.txt
├── src/
│   ├── api/           # ✅ 手动创建 - API 请求
│   ├── assets/
│   ├── components/
│   ├── composables/   # ✅ 手动创建 - 组合式函数
│   ├── router/        # ✅ 手动创建 - 路由配置
│   ├── store/         # ✅ 手动创建 - 状态管理
│   ├── utils/         # ✅ 手动创建 - 工具函数
│   ├── views/         # ✅ 手动创建 - 页面组件
│   ├── App.vue
│   ├── main.js
│   └── style.css
├── tests/             # ✅ 手动创建 - 测试文件
├── .env               # ✅ 手动创建 - 环境变量
├── .eslintrc.js       # ✅ 手动创建 - ESLint 配置
├── .gitignore
├── index.html
├── package.json
├── README.md
└── vite.config.js

4.常用命令

命令	作用
`npm run dev`	启动开发服务器
`npm run build`	生产环境打包
`npm run preview`	预览生产包
`npm lint`	代码检查

5.核心配置

5.1`vite.config.js` 基础配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,       // 自定义端口
    open: true        // 自动打开浏览器
  }
})

6.添加功能

6.1安装路由

npm install vue-router@4

6.2安装状态管理

npm install pinia

6.3安装 UI 库（Element Plus）

npm install element-plus

7.开发技巧

7.1.环境变量配置

创建 .env.development：

VITE_API_URL=http://localhost:3000/api

代码中使用：

const apiUrl = import.meta.env.VITE_API_URL

7.2 CSS 预处理器（Sass）

npm install -D sass

使用示例：

<style lang="scss">
$primary-color: #42b983;
.header {
  color: $primary-color;
}
</style>

8.常见问题

问题1：端口被占用

修改 vite.config.js：

server: {
  port: 8080  // 更换端口
}

问题2：Vue文件语法高亮失效

VSCode 需安装：

禁用 Vetur 插件
安装 Volar 和 TypeScript Vue Plugin

问题3：网络代理配置

// vite.config.js
server: {
  proxy: {
    '/api': {
      target: 'http://your-backend.com',
      changeOrigin: true
    }
  }
}

9. 生产部署

构建项目：

npm run build

预览生产包：

npm run preview

提示：使用 Vite 的冷启动速度比传统打包工具快 10-100 倍，适合快速开发和原型验证