Vue3.0 + Vite 初体验

Vue3.0 已经发布一段时间了，特别是还发布了一个打包构建工具 Vite，据说是可以干掉 webpack 的，趁这段时间有空，本人也体验了一下。

想使用 Vue3.0 不一定要用 Vite，vue-cli 也可以构建。

$ npm install -g @vue/cli

确保已经升级到最新的版本：

$ npm update -g @vue/cli
$ vue --version

然后创建项目：

$ vue create vue3-demo

选择第二个 Vue 3 Preview，或者自定义安装

使用 CLI 构建的项目还是使用 webpack 进行打包的。这里介绍下用 vite 构建。首先安装 vite 构建工具：

$ npm install -g create-vite-app

创建项目：

# 下面两个命令都可以
$ create-vite-app vue3-demo
$ cva vue3-demo

跟 CLI 不一样，vite 目前没有提供命令行交互的选项，就是按照默认的模板进行创建的。CLI 创建项目会自动从 npm 拉取依赖，而 vite 创建项目没有拉取依赖，因此执行命令之后很快就创建完成了。

创建完成的项目结构是这样的：

package.json 中可以看到依赖非常少，只有 vite 和 @vue/compiler-sfc ，没有 babel，因为 vite 是通过浏览器去解析模块。

接下来手动拉一下依赖：

$ npm install

然后启动项目：

$ npm run dev