好的，我给你整理一份 Vue 3 框架搭建及创建项目工程的完整步骤（小白版），从环境准备到项目运行，全流程示例，非常适合前端新手。

🚀 Vue3 框架搭建及创建项目工程完整步骤（小白版）

一、环境准备

1️⃣ 安装 Node.js

Vue3 需要 Node.js 环境，建议版本 Node.js ≥ 16。

node -v
npm -v

✅ 输出版本号即安装成功

2️⃣ 安装包管理工具（npm 或 yarn）

Node.js 自带 npm，如果想用 Yarn：

npm install -g yarn

验证：

yarn -v

3️⃣ 安装 Vue CLI（可选，但推荐用 Vite）

Vue3 现在推荐使用 Vite 创建项目，因为速度更快。

  • 全局安装 Vite（可选）：
npm install -g create-vite

二、创建 Vue3 项目

1️⃣ 使用 Vite 创建项目（推荐）

# 创建项目
npm create vite@latest my-vue3-app
# 或者简写
npm create vite my-vue3-app

执行后，会出现交互选择：

  • Project name: my-vue3-app
  • Framework: Vue
  • Variant: Vue + JavaScript 或 Vue + TypeScript（小白建议选择 JavaScript）

2️⃣ 进入项目目录

cd my-vue3-app

3️⃣ 安装依赖

npm install

4️⃣ 启动项目

npm run dev

终端会显示本地访问地址，例如：

Local: http://localhost:5173/

打开浏览器访问即可看到 Vue3 默认页面。

三、项目结构解析

my-vue3-app/
 ├─ node_modules/       # 依赖库
 ├─ public/             # 静态资源
 ├─ src/
 │   ├─ assets/         # 图片等资源
 │   ├─ components/     # Vue组件
 │   ├─ App.vue         # 根组件
 │   └─ main.js         # 入口文件
 ├─ index.html          # 入口 HTML
 ├─ package.json        # 项目配置
 └─ vite.config.js      # Vite 配置

1️⃣ main.js

Vue3 项目入口文件，挂载 App 根组件：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

2️⃣ App.vue

根组件模板示例：

<template>
  <div id="app">
    <h1>欢迎使用 Vue3</h1>
    <HelloWorld msg="小白版 Vue3 Demo"/>
  </div>
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<style>
#app {
  padding: 20px;
  font-family: Arial, sans-serif;
}
</style>

3️⃣ 创建组件示例

src/components/HelloWorld.vue：

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

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  msg: String
})
</script>

<style scoped>
p {
  color: #42b983;
  font-size: 20px;
}
</style>

四、常用命令总结

命令作用
npm create vite@latest my-vue3-app创建 Vue3 项目
cd my-vue3-app进入项目目录
npm install安装依赖
npm run dev启动开发服务器
npm run build打包生产环境代码
npm run preview预览打包后的生产环境

五、推荐小白操作技巧

  1. 组件开发：每个功能写一个组件，放在 src/components/
  2. 样式管理：使用 scoped 避免全局污染
  3. 模块化：Vue3 + <script setup> 结构简洁
  4. 资源管理：静态文件放 public 或 assets
  5. 调试工具：安装 Vue Devtools 浏览器插件，调试组件状态

好的，我帮你生成一个 Vue3 小白版全流程示例项目模板，包含基础组件、路由、状态管理（Pinia）、打包配置和启动说明，一键可开发。

📦 Vue3 小白版全流程示例项目模板

1️⃣ 创建项目

# 使用 Vite 创建 Vue3 项目
npm create vite@latest vue3-demo
cd vue3-demo

# 安装依赖
npm install

2️⃣ 安装常用插件

# Vue Router（路由管理）
npm install vue-router@4

# Pinia（状态管理）
npm install pinia

3️⃣ 项目结构示例

vue3-demo/
 ├─ node_modules/
 ├─ public/                   # 静态资源
 ├─ src/
 │   ├─ assets/               # 图片、样式等
 │   ├─ components/           # 通用组件
 │   │   └─ HelloWorld.vue
 │   ├─ views/                # 页面组件
 │   │   ├─ Home.vue
 │   │   └─ About.vue
 │   ├─ router/               # 路由配置
 │   │   └─ index.js
 │   ├─ store/                # Pinia 状态管理
 │   │   └─ counter.js
 │   ├─ App.vue
 │   └─ main.js
 ├─ index.html
 ├─ package.json
 └─ vite.config.js

4️⃣ 配置 Vue Router

src/router/index.js：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

5️⃣ 配置 Pinia 状态管理

src/store/counter.js：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

6️⃣ 配置入口文件

src/main.js：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'

const app = createApp(App)
app.use(router)
app.use(createPinia())
app.mount('#app')

7️⃣ 示例页面组件

src/views/Home.vue：

&lt;template>
  &lt;div>
    &lt;h1>首页&lt;/h1>
    &lt;p>计数器：{{ counter.count }}&lt;/p>
    &lt;button @click="counter.increment">+1&lt;/button>
  &lt;/div>
&lt;/template>

&lt;script setup>
import { useCounterStore } from '../store/counter'

const counter = useCounterStore()
&lt;/script>

src/views/About.vue：

&lt;template>
  &lt;div>
    &lt;h1>关于页面&lt;/h1>
    &lt;router-link to="/">返回首页&lt;/router-link>
  &lt;/div>
&lt;/template>

8️⃣ 根组件

src/App.vue：

&lt;template>
  &lt;div id="app">
    &lt;nav>
      &lt;router-link to="/">首页&lt;/router-link> |
      &lt;router-link to="/about">关于&lt;/router-link>
    &lt;/nav>
    &lt;router-view>&lt;/router-view>
  &lt;/div>
&lt;/template>

&lt;style>
nav {
  margin-bottom: 20px;
}
&lt;/style>

9️⃣ 启动项目

# 启动开发服务器
npm run dev

# 打包生产环境
npm run build

# 预览打包结果
npm run preview

浏览器访问 http://localhost:5173/，即可看到完整小白版 Vue3 项目效果：

  • 路由切换（Home / About）
  • Pinia 计数器状态管理
  • 基础组件示例