前期工作
1、安装node.js
2、安装npm
ps：版本号需要和vue对应
create-vue搭建
1、 同时按window+R键，输入cmd，打开命令提示符窗口，cd命令进入自己本地目录，比如：
cd E:\IdeaProject\
2、输入命令安装并执行create-vue，这是官方的项目创建命令
npm init vue@latest
3、输入你的项目名称，回车
4、经过一系列选择，选择完毕敲击回车进行选择所需项
5、输入提示的命令，项目初始化完成
cd vue3 npm install npm run dev
6、点击链接访问即可
7、项目结构
Vite搭建
1、进入工作目录输入以下命令进行Vite项目创建，由于npm不一致，导致命令有所不同
npm 6.x版本：npm create vite@latest my-vue-app --template vuenpm 7+, extra double-dash is needed:npm create vite@latest my-vue-app -- --template vue
2、输入命令后，也会有一系列选择
3、选择Yes后，会省略npm installl、npm run dev的步骤，直接一步启动，选择链接即可访问
4、项目结构
Webpack搭建
1、安装webpack
npm install --save-dev webpack或npm install webpack -g
2、安装vue.js
需要同时安装Vue和vue-cli 这两个Node package。
npm install vue -gnpm install @vue/cli –g或npm install -g @vue/cli@版本号 vue@版本号
3、验证vue安装
npm list vuenpm list vue -g
验证安装是否成功：
4、创建webpack项目
vue create 你的项目名称
5、交互模式进行选择
6、选择Default，会自动创建；也可以选择Manually select features(手动模式)，有兴趣的可以试试
7、依旧是按照提示输入命令，点击链接即可访问
8、项目结构
项目结构详细说明
├── .vscode 目录。
│ ├── v
│ ├── v
│ └── v
│
├── node_modules 目录 （vue 项目的文件依赖存放在这个文件夹。）
│ ├── 所有在package.json 中定义的第三方包都会被自动下载，保存在该文件夹下。
│ ├── v
│ └── v
│
│
├── public 目录：存放项目公共资源。如网站LOGO等。
│ │ 通常我们不需要对public文件夹内的资源做任何修改。
│ │ 后续在构建打包时，public内容会直接放到dist文件夹内plugins插件资源；
│ ├── v
│ ├── v
│ └── v
│
│
├── src 目录 ：存放 vue 项目的源代码。其下的各个文件（文件夹）分别为：
│ ├── assets 目录 ：资源文件，存放 css，图片等资源。
│ ├── component 目录 ：组件文件夹，存放 vue 的公共组件（核心）
│ │ （注册于全局，在整个项目中通过关键词便可直接输出）。
│ │
│ ├── router 目录 ：用来存放 index.js，用来配置路由，定义各个页面对应的URL。
│ ├── store 目录 ：组件文件夹，存放 vue 的公共组件
│ ├── views 目录：放主体页面，vue 文件是可以用来充当路由 view 的。
│ ├── tool：用来存放工具类 js，
│ │ 将 js 代码封装好放入这个文件夹可以全局调用
│ │ （如api.js，http.js 是对 http 方法和 api 方法的封装）。
│ ├── main.js：是项目的入口文件，初始化 vue 实例，并引入所需要的插件。
│ ├── app.vue：是项目的主组件，所有页面都是在该组件下进行切换的。
│ ├──
│ └── v
│
│
├── package.json 存放项目的依赖配置
├── .gitignore。
├── tsconfig.json
├── tsconfig.node.json
├──index.html
└──vite.config.ts
三者的不同和比较
| 对比项 | Webpack | Vite | create-vue |
| 定位 | 通用打包构建工具 | 新一代前端构建工具 | Vue 项目脚手架 （项目生成器） |
| Vue 配套 | vue-cli（老脚手架）底层 | create-vue（新脚手架）底层 | 生成 Vue 项目模板 |
| 启动原理 | 一次性全量打包所有文件 | 浏览器原生 ESM，按需加载 | 无构建能力，仅生成代码 |
| 启动速度 | 项目越大越慢（十几秒起步） | 秒开，几乎无等待 | 不参与项目启动 |
| 热更新 HMR | 改动需重新打包，延迟高 | 毫秒级更新，几乎无感 | 无热更新功能 |
| 生产打包内核 | Webpack 自身 | Rollup | 生成 Vite 配置，靠 Vite 打包 |
| 适用场景 | 老项目、复杂多端、兼容低版本浏览器 | Vue3 新项目、追求开发效率 | 快速新建标准 Vue3 工程 |
| 配置文件 | webpack.config.js | vite.config.js | 生成 vite.config.js |
喜欢的记得收藏、点赞、关注哟
