创建 Vue 3 项目的三种常用方法（新手必看）

更新日期: 2025-07-12阅读: 35标签: 项目分享

复制链接

新浪微博

QQ 好友

扫一扫分享

想开始用 vue 3 开发网页应用？第一步就是创建项目。这里介绍三种最实用的方法，操作简单，选一个适合你的就行。

一、用 Vue CLI（适合熟悉 Vue 生态的开发者）

Vue CLI 是老朋友了，功能强大，配置灵活。确保安装了 Node.js (建议版本 14.18+ 或 16+)。

打开命令行工具（终端、CMD 或 PowerShell）。安装或更新 Vue CLI 到最新版：

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

创建新项目：

vue create my-vue3-project

选择 Vue 3 预设（用键盘上下键移动，回车确认）。

等待安装完成。进入项目并启动：

cd my-vue3-project
npm run serve

优点：项目配置成熟，集成 webpack，插件生态丰富。
适合：需要复杂配置、企业级应用或熟悉 Vue CLI 的开发者。

二、用 Vite（推荐！速度快，体验好）

Vite 是现在创建 Vue 3 项目的首选工具，启动和热更新速度超快。

确保安装了 Node.js (版本 12+，建议 14.18+ 或 16+)。

打开命令行工具。创建项目：

npm create vite@latest my-vue3-app -- --template vue
# 或者
yarn create vite my-vue3-app --template vue

选择 Vue 后，再选 Vue (不是 Vue-ts 除非你需要 TypeScript)。

进入项目目录安装依赖：

cd my-vue3-app
npm install
# 或者
yarn

启动开发服务器：

npm run dev
# 或者
yarn dev

优点：极速冷启动，即时热更新，开箱即用，体验流畅。
适合：大多数新项目，追求开发效率的开发者。

三、直接用 CDN 引入（快速原型或简单页面）

想快速试试 Vue 3 或写个小页面？直接在 html 里引入 Vue CDN 最省事。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Vue 3 CDN 示例</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        {{ message }} <button @click="reverseMessage">反转文字</button>
    </div>

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

        createApp({
            setup() {
                const message = ref('你好 Vue 3!');
                function reverseMessage() {
                    message.value = message.value.split('').reverse().join('');
                }
                return {
                    message,
                    reverseMessage
                };
            }
        }).mount('#app');
    </script>
</body>
</html>

优点：无需构建工具，零配置，打开浏览器就能运行。
适合：学习基础概念、小型页面、简单功能演示。

怎么选？看这里

Vite：首选！速度快，现代工具链，开发体验好。
Vue CLI：需要特定 Webpack 配置或插件时使用。
CDN：快速写 Demo 或学习基础语法时用。

常见问题

Vue CLI 创建项目时看不到 Vue 3 选项？

升级 Vue CLI 到最新版：npm update -g @vue/cli。

Vite 项目安装依赖失败？

检查 Node.js 和 npm/yarn 版本是否够新。

CDN 方式适合做大项目吗？

不适合，大型项目推荐用 Vite 或 Vue CLI 构建。

掌握这三种方法，你就能轻松启动 Vue 3 项目了。Vite 是当前最推荐的方式，速度快，配置简单。动手试试吧！

链接: https://fly63.com/article/detial/12858