全部学科
Python全栈
python
NodeJS全栈
nodejs
📅 2026-05-20 6 分钟 ✍️ juanwangdev

项目创建

Vue 3 项目推荐使用 Vite 作为构建工具,启动快速且支持开箱即用的开发体验。

使用 Vite 创建项目

命令行创建

Bash
npm create vue@latest my-project

交互式提示中可选择:

  • TypeScript 支持
  • Vue Router
  • Pinia 状态管理
  • ESLint / Prettier
  • 单元测试(Vitest)

安装依赖并启动

Bash
cd my-project
npm install
npm run dev

项目结构

JavaScript
my-project/
├── src/
│   ├── assets/          # 静态资源
│   ├── components/      # 组件文件
│   ├── router/          # 路由配置
│   ├── stores/          # 状态管理
│   ├── App.vue          # 根组件
│   └── main.js          # 入口文件
├── index.html           # HTML 模板
├── vite.config.js       # Vite 配置
└── package.json         # 项目依赖

入口文件解析

text
// main.js
import { createApp } from 'vue'
import App from './App.vue'

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

createApp 创建应用实例,mount 挂载到指定 DOM 元素。

Vue 3 不再强制使用 new Vue() 的构造函数形式,统一采用 createApp API。

要点总结

  • 使用 npm create vue@latest 创建项目
  • Vite 是官方推荐的构建工具
  • 入口文件通过 createApp().mount() 启动应用
想在手机上练习这篇文章的配套题目?
使用微信卷王开发者小程序,打开首页顶部扫码功能识别二维码
← 上一篇 Vue简介
下一篇 → 模板语法
扫码体验小程序
加载中
想在手机上刷题学习?
使用微信卷王开发者小程序,打开首页顶部扫码功能识别二维码