创建Vue项目

概述

Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。本文介绍使用 Vite 创建 Vue 项目的方法，这是 Vue 3 官方推荐的现代构建工具。

使用 Vite 创建 Vue 项目

Vite 是一个更快的构建工具，提供极速的开发服务器启动和热更新。

1. 创建项目

npm create vue@latest my-project
# 或者使用 yarn
yarn create vue my-project

2. 选择功能

Vite 会询问是否包含以下功能：

• TypeScript - 类型安全的 JavaScript 超集
• JSX Support - 支持 JSX 语法
• Vue Router - 官方路由管理器
• Pinia - 状态管理（Vue 3 推荐）
• Vitest - 单元测试框架
• End-to-End Testing - 端到端测试
• ESLint - 代码质量检查
• Prettier - 代码格式化

3. 安装依赖并启动

cd my-project
npm install
npm run dev

项目结构

使用 Vite 创建的 Vue 项目结构：

my-project/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── router/
│   ├── stores/
│   ├── App.vue
│   └── main.js
├── package.json
├── vite.config.js
└── index.html

常用命令

开发

npm run dev

构建

npm run build

预览构建结果

npm run preview

代码检查

npm run lint

最佳实践

1. 使用 TypeScript：提高代码质量和开发体验
2. 配置 ESLint 和 Prettier：保持代码风格一致
3. 使用 Vue Router：管理页面路由
4. 使用 Pinia：状态管理
5. 组件化开发：将功能拆分为可复用的组件

注意事项

• 确保 Node.js 版本兼容（推荐 16+）
• 根据项目需求选择合适的功能
• 考虑项目的长期维护和团队协作需求