前一段时间招聘前端开发,发现好多开发连基本的创建项目都不会,这里总结一下
在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
)。 - 构建速度较慢(尤其是大型项目)。
- 依赖Webpack,配置复杂但灵活(需手动修改
方式二、Vue
- 创建命令:
npm create vue@latest
方法三、Vite
-
npm create vite 按提示选择vue、React、Angular等框架 再选择语言js