Vue3 项目创建知识汇总
编程小白也能看懂的 Vue3 项目创建指南 – 从零开始，全面解析！
一、前置准备
1. 安装 Node.js
Vue 项目需要 Node.js 环境，就像手机需要充电器才能工作一样。
- 访问 Node.js 官网 下载安装包
- 安装时勾选 “Add to PATH”（添加到系统路径）
- 安装完成后，打开终端（命令提示符）检查是否成功：
node -v # 显示版本号如 v16.14.0
npm -v # 显示版本号如 8.3.1
npm -v # 显示版本号如 8.3.1
小贴士： 推荐安装 LTS（长期支持版），更稳定可靠
2. 包管理工具
Node.js 自带 npm，但也可以选择更快的 yarn：
# 安装 yarn
npm install -g yarn
# 检查 yarn 版本
yarn -v
npm install -g yarn
# 检查 yarn 版本
yarn -v
二、创建 Vue3 项目
1. Vue CLI 方式（传统）
Vue 官方提供的脚手架工具，适合初学者：
# 安装 Vue CLI
npm install -g @vue/cli
# 创建项目
vue create my-project
# 选择 Vue3 预设
→ 选 “Manually select features”
→ 勾选 Vue 3.x
→ 其他选项按需选择
npm install -g @vue/cli
# 创建项目
vue create my-project
# 选择 Vue3 预设
→ 选 “Manually select features”
→ 勾选 Vue 3.x
→ 其他选项按需选择
2. Vite 方式（推荐🔥）
新一代构建工具，速度极快！
# 使用 npm
npm create vite@latest my-project
# 选择 Vue → Vue
# 或者使用 yarn
yarn create vite my-project
# 选择 Vue → Vue
npm create vite@latest my-project
# 选择 Vue → Vue
# 或者使用 yarn
yarn create vite my-project
# 选择 Vue → Vue
重要： Vite 是 Vue 作者开发的新工具，启动速度比传统工具快10倍以上！
3. 项目安装依赖
创建项目后，需要安装依赖包：
# 进入项目目录
cd my-project
# 使用 npm 安装
npm install
# 或使用 yarn 安装
yarn install
cd my-project
# 使用 npm 安装
npm install
# 或使用 yarn 安装
yarn install
三、项目结构解析
使用 Vite 创建的 Vue3 项目典型结构：
my-project/
├── node_modules/ # 项目依赖包
├── public/ # 静态资源（不经过构建）
├── src/ # 源代码目录
│ ├── assets/ # 图片等资源
│ ├── components/# 可复用组件
│ ├── App.vue # 主应用组件
│ └── main.js # 应用入口文件
├── index.html # 页面模板
├── package.json # 项目配置和依赖
└── vite.config.js # Vite 配置文件
├── node_modules/ # 项目依赖包
├── public/ # 静态资源（不经过构建）
├── src/ # 源代码目录
│ ├── assets/ # 图片等资源
│ ├── components/# 可复用组件
│ ├── App.vue # 主应用组件
│ └── main.js # 应用入口文件
├── index.html # 页面模板
├── package.json # 项目配置和依赖
└── vite.config.js # Vite 配置文件
核心文件解析
main.js – 应用入口
import { createApp } from ‘vue’
import App from ‘./App.vue’
// 创建 Vue 应用实例
const app = createApp(App)
// 挂载到 #app 元素
app.mount(‘#app’)
import App from ‘./App.vue’
// 创建 Vue 应用实例
const app = createApp(App)
// 挂载到 #app 元素
app.mount(‘#app’)
App.vue – 根组件
<template>
<div>
<h1>Hello Vue 3!</h1>
<MyComponent/>
</div>
</template>
<script setup>
import MyComponent from ‘./components/MyComponent.vue’
</script>
<style scoped>
h1 { color: #42b883; }
</style>
<div>
<h1>Hello Vue 3!</h1>
<MyComponent/>
</div>
</template>
<script setup>
import MyComponent from ‘./components/MyComponent.vue’
</script>
<style scoped>
h1 { color: #42b883; }
</style>
四、运行与构建
1. 启动开发服务器
在项目根目录执行：
# 使用 npm
npm run dev
# 使用 yarn
yarn dev
npm run dev
# 使用 yarn
yarn dev
访问 http://localhost:3000 查看效果
2. 项目构建
生成生产环境代码：
# 使用 npm
npm run build
# 使用 yarn
yarn build
npm run build
# 使用 yarn
yarn build
构建结果在 dist/ 目录
3. 常用命令总结
- npm run dev – 启动开发服务器
- npm run build – 构建生产版本
- npm run serve – 预览生产版本（需先构建）
- npm run lint – 代码格式检查
Vue3 特性演示
{{ count }}
五、核心概念
1. Composition API
Vue3 全新特性，代码组织更灵活：
<script setup>
import { ref, onMounted } from ‘vue’
// 响应式数据
const count = ref(0)
// 方法
function increment() {
count.value++
}
// 生命周期钩子
onMounted(() => {
console.log(‘组件已挂载’)
})
</script>
import { ref, onMounted } from ‘vue’
// 响应式数据
const count = ref(0)
// 方法
function increment() {
count.value++
}
// 生命周期钩子
onMounted(() => {
console.log(‘组件已挂载’)
})
</script>
2. 单文件组件 (SFC)
Vue 的特色，一个文件包含三部分：
- <template> – HTML 模板
- <script> – JavaScript 代码
- <style> – CSS 样式
3. 响应式原理
Vue3 使用 Proxy 实现响应式：
- ref – 用于基本类型（数字、字符串等）
- reactive – 用于对象和数组
- computed – 计算属性
- watch – 监听数据变化
注意： 修改 ref 的值需要使用 .value，在模板中会自动解包不需要
4. 组件通信
组件间数据传递方式：
- Props – 父组件向子组件传递数据
- Emits – 子组件向父组件发送事件
- Provide/Inject – 跨层级组件通信
- Vuex/Pinia – 状态管理库