菜鸟-创作你的创作

前端vue3框架搭建及创建项目工程完整步骤(小白版) 

lichongyang

下面给你一份真正小白也能一步步照着做的《Vue 3 框架搭建 & 创建项目完整流程》。
我会 不跳步、不省略、不假设你会，每一步都解释「为什么要做」。
👉 照着做，100% 能跑起来。

🚀 Vue 3 项目搭建（小白保姆级教程）

适合：
✔ 第一次学前端
✔ 从 0 开始用 Vue 3
✔ 想知道“每一步在干嘛”的人

一、准备工作（必须先做）

✅ 1️⃣ 安装 Node.js（最重要）

Vue 项目必须用 Node.js。

① 下载

👉 打开官网：
https://nodejs.org

选择：LTS（长期稳定版）
❌ 不要选 Current

② 安装注意事项（一路点 Next）

✔ 勾选：Add to PATH
✔ 允许安装 npm

③ 验证是否安装成功

Windows

node -v
npm -v

Mac

node -v
npm -v

看到版本号 = 成功 🎉

二、选择创建 Vue 3 项目的方式（推荐）

方式说明推荐
Vue CLI老项目❌
Vite + Vue 3官方推荐✅

👉 我们用：Vite

三、创建 Vue 3 项目（重点）

✅ 1️⃣ 打开终端

Windows

Mac

✅ 2️⃣ 创建项目

npm create vite@latest

回车后，按提示一步一步来👇

✅ 3️⃣ 交互式选择（照着选）

项目名

Project name: vue3-demo

（随便起）

选择框架

Select a framework: Vue

选择语言

Select a variant: JavaScript

（小白建议先用 JS）

看到：

Done. Now run:

说明项目创建成功 🎉

四、启动 Vue 3 项目

进入项目目录

cd vue3-demo

安装依赖

npm install

（第一次会慢一点，耐心等）

启动项目

npm run dev

终端会看到：

Local: http://localhost:5173/

打开浏览器访问

👉 http://localhost:5173

看到 Vue 页面 = 成功 ✅

五、Vue 3 项目目录结构（小白必看）

vue3-demo
│
├─ node_modules     依赖（不用动）
├─ public           公共资源
├─ src              ⭐ 核心代码
│   ├─ assets       图片、样式
│   ├─ components   组件
│   ├─ App.vue      根组件
│   └─ main.js      ⭐ 入口文件
│
├─ index.html       首页模板
├─ package.json     项目配置
└─ vite.config.js   Vite 配置

👉 你 90% 的时间都在 src 里

六、第一个 Vue 3 页面（实操）

打开 src/App.vue

<template>
  <h1>Hello Vue 3 👋</h1>
</template>

<script setup>
</script>

<style>
h1 {
  color: red;
}
</style>

保存后
👉 浏览器会自动刷新（热更新）

七、Vue 3 基础语法（入门必会）

1️⃣ 数据绑定

<script setup>
const msg = '你好，Vue3'
</script>

<template>
  <p>{{ msg }}</p>
</template>

2️⃣ 事件绑定

<script setup>
const clickMe = () => {
  alert('点我干嘛 😄')
}
</script>

<template>
  <button @click="clickMe">点我</button>
</template>

3️⃣ 双向绑定

<script setup>
import { ref } from 'vue'
const name = ref('')
</script>

<template>
  <input v-model="name" />
  <p>你输入的是：{{ name }}</p>
</template>

八、安装常用插件（项目必备）

1️⃣ Vue Router（路由）

npm install vue-router

2️⃣ Axios（请求接口）

npm install axios

九、推荐开发工具（强烈建议）

✅ VS Code 插件

十、新手最常见错误（避坑）

❌ Node 没装
❌ npm 版本太低
❌ 没 cd 进项目目录
❌ 端口被占用
❌ Vue2 / Vue3 混着学

十一、完整流程回顾（记住这个）

安装 Node
↓
npm create vite
↓
cd 项目
↓
npm install
↓
npm run dev
↓
浏览器访问
退出移动版