创建vue3项目

目录

为什么使用vite

webpack和vite的比较

分析说明 

官网上webpack和vite启动流程图

webpack和vite项目的启动时间比较

创建项目 

 分步创建

使用附加命令行直接创建

 使用vscode启动项目

官网链接

---

说明：这里创建的是vue3+vite项目

为什么使用vite

与webpack相比较，vite启动更快速。

webpack和vite的比较

分析说明 

Vite使用的是esbuild 预构建依赖，esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快。
webpack启动时会分析依赖关系，接着编译打包，最后才交给本地服务器进行渲染。所以项目模块越多，依赖越多，启动越慢。
即使使用模块热更新（HMR），也会随着模块变多，造成的打包文件bundle体积变大，从而拖慢响应速度。
vite启动时会先启动开发服务器，请求模块时也会按需动态编译显示。
因为现代浏览器本身支持ES-Module，所以会自动向依赖的Module发出请求。
所以vite就将开发环境下的模块文件作为浏览器的执行文件，而不是像webpack进行打包后交给本地服务器

总结来说就是vite在启动时需要将文件打包成bundle文件，因此不需要分析模块之间的依赖关系，只在需要时对某个模块内容进行编译。
当改动某个模块时，也不需要像webpack那样将该模块以及依赖的模块都编译一次，所以热更新效率也会更高。

官网上webpack和vite启动流程图

webpack:

 vite：

webpack和vite项目的启动时间比较

创建项目 

 分步创建

1、使用npm create vite@latest命令

2、 Ok to proceed? (y)

3、输入项目名称 ? Project name: » vite-project

4、选择框架

5、 选择语言

 整个过程的截图：

使用附加命令行直接创建

使用附加的命令行选项直接指定项目名称和你想要使用的模板，命令如下：

npm 6.x版本的命令：

npm create vite@latest my-vue-app --template vue

npm是7或者7以上版本的命令：

npm create vite@latest my-vue-app -- --template vue

执行过程如下：

 使用vscode启动项目

 注意：在第一次运行项目之前需要先安装vite，否则会报错

 执行npm install命令之后重新启动项目：

启动后的界面：

官网链接

想要更详细了解可以查看官网：

vue3官网：https://cn.vuejs.org/

vite官网：https://vitejs.cn/