创建 Vue 3 项目的三种常用方法（新手必看）
想开始用 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 是当前最推荐的方式，速度快，配置简单。动手试试吧！
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
