关于前端:Vue30-Vite-初体验

6次阅读

共计 587 个字符,预计需要花费 2 分钟才能阅读完成。

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
正文完
 0