创建 Vue 项目的多种方式
创建 Vue 项目有多种方式，每种方式都有其适用场景和优缺点。以下是主要的几种创建方式：
1. Vite（推荐用于新项目）
Vite 是目前 Vue 官方推荐的构建工具，具有极快的启动速度和热更新。
创建命令
# 使用 npm
npm create vite@latest my-vue-app -- --template vue
# 使用 yarn
yarn create vite my-vue-app --template vue
# 使用 pnpm
pnpm create vite my-vue-app --template vue
# 创建 Vue + TypeScript 项目
npm create vite@latest my-vue-app -- --template vue-ts
特点
- 极快的冷启动和热重载
- 开箱即用的支持
- 优化的构建输出
- 丰富的插件生态系统
2. Vue CLI（传统方式）
Vue CLI 是 Vue 官方之前推荐的标准工具，功能完善但相对较重。
安装和创建
# 全局安装 Vue CLI
npm install -g @vue/cli
# 创建项目
vue create my-vue-app
# 或者使用图形化界面
vue ui
创建选项
运行 vue create 后会出现交互式选项：
- ✅ Babel（ES6+ 转译）
- ✅ TypeScript（可选）
- ✅ Vue Router（路由管理）
- ✅ Vuex/Pinia（状态管理）
- ✅ CSS 预处理器（Sass/Less）
- ✅ ESLint（代码检查）
- ✅ 单元测试（Jest）
- ✅ E2E 测试（Cypress）
3. 直接从 CDN 引入
适合简单的页面或学习用途，不需要构建步骤。
<!DOCTYPE html>
<html>
<head>
<title>Vue CDN 示例</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
</body>
</html>
4. create-vue（官方新工具）
Vue 官方推出的新项目脚手架工具，基于 Vite。
# 使用 npm
npm create vue@latest
# 使用 yarn
yarn create vue
# 使用 pnpm
pnpm create vue
这个工具会提供交互式选项让你选择需要的功能。
5. 手动配置 Webpack
适合需要高度自定义配置的高级用户。
# 初始化项目
mkdir my-vue-app && cd my-vue-app
npm init -y
# 安装核心依赖
npm install vue@next
npm install -D webpack webpack-cli webpack-dev-server vue-loader @vue/compiler-sfc
然后需要手动创建 webpack.config.js 和项目结构。
6. 在线 playground
适合快速原型开发和分享代码。
- Vue SFC Playground：https://play.vuejs.org/
- StackBlitz：https://stackblitz.com/
- CodeSandbox：https://codesandbox.io/
各方式对比
| 方式 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| Vite | 新项目、开发体验要求高 | 速度快、现代化配置 | 生态相对较新 |
| Vue CLI | 企业级项目、需要稳定 | 功能完善、生态成熟 | 启动速度较慢 |
| CDN | 简单页面、学习 | 无需构建、简单直接 | 不适合复杂项目 |
| create-vue | 新项目、官方推荐 | 交互式配置、基于Vite | 相对较新 |
| 手动Webpack | 特殊需求、自定义配置 | 完全可控 | 配置复杂 |
| 在线Playground | 快速原型、代码分享 | 无需安装、即时可见 | 功能有限 |
选择建议
- 新手学习：从 CDN 或 Vite 开始
- 新项目开发：推荐使用 Vite 或 create-vue
- 企业级项目：Vue CLI 或 Vite 都可以，根据团队熟悉度选择
- 快速原型：使用在线 playground
- 特殊需求：考虑手动配置 Webpack
示例：使用 Vite 创建项目的完整流程
# 1. 创建项目
npm create vite@latest my-vue-app -- --template vue
# 2. 进入项目目录
cd my-vue-app
# 3. 安装依赖
npm install
# 4. 启动开发服务器
npm run dev
# 5. 构建生产版本
npm run build
# 6. 预览生产构建
npm run preview
根据你的具体需求选择合适的创建方式，大多数情况下推荐使用 Vite，因为它提供了最佳的开发体验和性能。