Vue3项目搭建教程，一文吃透（Create-vue、Vite、Webpack）

前期工作

1、安装node.js

2、安装npm

ps：版本号需要和vue对应

create-vue搭建

1、同时按window+R键，输入cmd，打开命令提示符窗口，cd命令进入自己本地目录，比如：

bash 复制代码

cd  E:\IdeaProject\

2、输入命令安装并执行create-vue，这是官方的项目创建命令

bash 复制代码

npm init vue@latest

3、输入你的项目名称，回车

4、经过一系列选择，选择完毕敲击回车进行选择所需项

5、输入提示的命令，项目初始化完成

bash 复制代码

  cd vue3
  npm install
  npm run dev

6、点击链接访问即可

7、项目结构

Vite搭建

1、进入工作目录输入以下命令进行Vite项目创建，由于npm不一致，导致命令有所不同

bash 复制代码

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

bash 复制代码

npm install --save-dev webpack
或
npm install webpack -g

2、安装vue.js

需要同时安装Vue和vue-cli 这两个Node package。

bash 复制代码

npm install vue -g
npm install @vue/cli --g
或
npm install -g @vue/cli@版本号 vue@版本号

3、验证vue安装

bash 复制代码

npm list vue
npm list vue -g

验证安装是否成功：

4、创建webpack项目

bash 复制代码

vue create 你的项目名称

5、交互模式进行选择

6、选择Default，会自动创建；也可以选择Manually select features(手动模式)，有兴趣的可以试试

7、依旧是按照提示输入命令，点击链接即可访问

8、项目结构

项目结构详细说明

├── .vscode 目录。

│　　　├──　v

│　　　└──　v

│

├── node_modules 目录（vue 项目的文件依赖存放在这个文件夹。）

│　　　├──　所有在package.json 中定义的第三方包都会被自动下载，保存在该文件夹下。

│　　　├──　v

│　　　└──　v

│

├── public 目录：存放项目公共资源。如网站LOGO等。

│ │ 通常我们不需要对public文件夹内的资源做任何修改。

│ │ 后续在构建打包时，public内容会直接放到dist文件夹内plugins插件资源；

│　　　├──　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 |