前期工作

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 vue

npm 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 -g
npm install @vue/cli –g
或
npm install -g @vue/cli@版本号 vue@版本号

3、验证vue安装

npm list vue
npm 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

---