VueJS - 环境设置

Vue 3 - 环境搭建

搭建 Vue 3 的开发环境有几种方式，从用于快速原型的简单脚本引入，到用于大型应用的复杂构建设置。

使用 CDN / 独立脚本

开始使用 Vue 最快的方式是通过 <script> 标签直接在 HTML 文件中引入它。这适用于学习、原型开发，或将 Vue 集成到现有的非 SPA 项目中。

<!DOCTYPE html>
<html>
<head>
    <title>Vue 3 CDN Example</title>
    <!-- 从 CDN 引入 Vue 3 -->
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <input v-model="message">
    </div>

    <script>
        const { createApp, ref } = Vue;

        createApp({
            setup() {
                const message = ref('Hello Vue 3!');
                return { message };
            }
        }).mount('#app');
    </script>
</body>
</html>

您可以从以下 CDN 获取最新的 Vue 3 脚本 URL：

• unpkg: https://unpkg.com/vue@3（始终指向最新的 v3）
• jsDelivr: https://cdn.jsdelivr.net/npm/vue@3

对于生产环境，推荐链接到特定的版本号（例如 vue@3.2.47），以避免新发布版本可能带来的意外中断。生产构建请使用 .prod.js 版本（例如 https://unpkg.com/vue@3/dist/vue.global.prod.js）。

这种方法不需要任何构建工具，但缺少诸如单文件组件（SFCs）和构建优化等特性。

使用 Vite（推荐的构建工具）

对于现代 Vue 开发，特别是 SPA 应用，使用构建工具至关重要。Vite 是目前官方推荐的 Vue 3 构建工具。它提供了极快的开发服务器启动速度和热模块替换（HMR）。

要创建一个由 Vite 驱动的新 Vue 项目，您需要安装 Node.js（推荐 16+ 版本）。然后，在您的终端中运行以下命令：

# npm
npm create vue@latest

# yarn
yarn create vue@latest

# pnpm
pnpm create vue@latest

此命令将提示您填写项目详细信息，包括：

• 项目名称
• 是否添加 TypeScript 支持
• 是否包含 JSX 支持
• 是否添加 Vue Router 用于路由
• 是否添加 Pinia 用于状态管理
• 是否添加 Vitest 用于单元测试
• 是否添加 Cypress 或 Playwright 用于端到端测试
• 是否添加 ESLint 用于代码检查
• 是否添加 Prettier 用于代码格式化

项目创建后：

# 进入项目目录
cd <your-project-name>

# 安装依赖
npm install
# 或者: yarn install 或 pnpm install

# 启动开发服务器
npm run dev
# 或者: yarn dev 或 pnpm dev

Vite 将启动一个开发服务器，通常在 http://localhost:5173。在浏览器中打开此 URL 即可看到您的 Vue 应用运行。得益于 HMR，您对 .vue 文件（单文件组件）所做的更改将立即反映在浏览器中。

要构建用于生产环境的应用：

npm run build
# 或者: yarn build 或 pnpm build

这将在 dist 目录中创建一个优化后的应用包，可用于部署。

create-vue 创建的项目结构通常如下所示：

my-vue-app/
├── public/             # 静态资源
├── src/
│   ├── assets/         # CSS, 图片, 字体
│   ├── components/     # 可重用 Vue 组件
│   ├── router/         # Vue Router 设置 (如果选择)
│   ├── stores/         # Pinia 存储 (如果选择)
│   ├── views/          # 页面级组件 (常与 router 一起使用)
│   ├── App.vue         # 根组件
│   └── main.js         # 应用入口文件 (创建 Vue 应用)
├── index.html          # 主 HTML 文件 (模板)
├── package.json        # 项目依赖和脚本
├── vite.config.js      # Vite 配置
└── ...                 # 其他配置文件 (tsconfig, eslintrc 等)

使用 Vue CLI（传统构建工具）

Vue CLI (@vue/cli) 是 Vue 2 的标准构建工具，对于 Vue 3 仍在维护中，但由于 Vite 的速度优势，现在新项目推荐使用 Vite。如果您需要在一个现有的 Vue CLI 项目上工作，或者偏好其基于 Webpack 的设置：

首先，全局安装 Vue CLI（如果尚未安装）：

npm install -g @vue/cli
# 或者
yarn global add @vue/cli

然后，创建一个新项目：

vue create my-vue-cli-app

您将被提示选择一个预设（Vue 3 是最新 CLI 版本的默认选项）或手动选择与 create-vue 提示相似的特性。

进入目录并运行开发服务器：

cd my-vue-cli-app
npm run serve
# 或者
yarn serve

开发服务器通常在 http://localhost:8080 启动。

选择合适的搭建方式

• CDN/独立脚本： 最适合快速演示、学习或在现有页面中添加小型 Vue 功能。
• Vite（npm create vue@latest）： 推荐用于所有新的 SPA 项目。提供了最佳的开发体验。
• Vue CLI（vue create）： 适用于维护现有 Vue CLI 项目，或您特别需要基于 Webpack 的设置。