vue3项目搭建

原创于 2025-07-29 08:56:57 发布 · 667 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue3 #vite

前一段时间招聘前端开发，发现好多开发连基本的创建项目都不会，这里总结一下

在Vue 3中，使用Webpack和Vite创建的项目文件结构及语言（JS/TS）的选择有以下主要区别：

1. 创建方式与文件结构差异

方式一、Webpack(Vue CLI)

创建命令：
vue create project-name

典型文件结构：

├── public/              # 静态资源（直接复制到dist）
│   └── index.html        # 主HTML模板 
├── src/
│   ├── assets/          # 静态资源（需打包处理）
│   ├── components/      # Vue组件 
│   ├── App.vue           # 根组件 
│   └── main.js           # 入口文件（JS/TS）
├── babel.config.js       # Babel配置 
├── vue.config.js         # Webpack自定义配置 
└── package.json          # 依赖和脚本

特点：
- 依赖Webpack，配置复杂但灵活（需手动修改vue.config.js ）。
- 构建速度较慢（尤其是大型项目）。

方式二、Vue

创建命令：
npm create vue@latest

方法三、Vite

npm create vite
按提示选择vue、React、Angular等框架
再选择语言js、ts等

要执行vite命令必须在全局和项目中安装。
全局安装 npm install -g vite 查看是否安装 npm list -g vite

项目中安装 npm install vite --save-dev
创建的项目内容比较精炼

典型文件结构：

├── public/              # 静态资源（直接复制到dist）
├── src/
│   ├── assets/          # 静态资源（Vite原生支持现代格式）
│   ├── components/      # Vue组件 
│   ├── App.vue           # 根组件 
│   └── main.js           # 入口文件（JS/TS）

|-------index.html #注意这个文件的位置，和vue2不同

├── vite.config.js        # Vite专属配置 
└── package.json

特点：
- 原生ES模块支持，启动和热更新极快。
- 更简洁的配置（如无需Babel，默认支持ES6+）。

2. 语言选择（JS/TS）

选择时机：
- Webpack/Vite均支持：在创建项目时通过命令行交互选择：
  - 使用npm create vue@latest时，会提示是否选择TypeScript。
  - 使用vue create时，需手动勾选TypeScript选项。
- 默认生成文件：
  - 选择TS时，入口文件为main.ts ，组件语法为<script setup lang="ts">。
  - 选择JS时则为main.js 和普通<script setup>。
后续切换：
- 手动修改文件扩展名（如.js→.ts），并安装@types/node等类型依赖。
- 需更新配置文件（如tsconfig.json 或vite.config.js 中的类型声明）。

3. 关键配置差异

配置项	Webpack (Vue CLI)	Vite
配置文件	`vue.config.js`	`vite.config.js`
TS支持	需安装`@vue/cli-plugin-typescript`	原生集成，无需额外插件
构建速度	较慢（基于打包器）	极快（ESM按需编译）