vue3项目搭建

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

在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