实用指南：创建 Vue 项目的多种方式

创建 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，因为它提供了最佳的开发体验和性能。

posted @ 2025-09-04 08:09 yjbjingcha 阅读(60) 评论(0) 收藏举报

刷新页面返回顶部