VueCli 和 Vite

努力进化的程序猿
264 阅读4分钟

VueCli 和 Vite

Vue CLI 脚手架

  • Vue 脚手架的定义

    • 在真实开发中，我们不可能没一个项目从头来完成所有的 webpack 配置，否则开发的效率会大大降低；
    • 在真实开发中，通常使用脚手架来创建一个项目，Vue 的项目我们使用的就是 Vue 的脚手架；
    • 脚手架其实是建筑工程中的一个概念，在软件工程中也会将一些帮助我们搭建项目的工具称之为脚手架；

  • Vue 的脚手架就是Vue CLI:

    • CLI 是 Command-Line Interface,翻译为命令行界面；
    • 可以通过 CLI 选择项目的配置和创建出我们的项目；
    • Vue CLI 已经内置了 webpack 相关的配置，我们不需要从零来配置；

Vue CLI 的安装和使用

  • 安装 Vue CLI

    • 进行全局安装，这样可以在任何时候都可以通过 vue 的命令来创建项目；

      npm install @vue/cli -g

  • 升级 Vue CLI:

    • 升级版本命令：

      npm update @vue/cli -g

  • 通过 Vue 的命令来创建项目

    vue create 项目的名称

认识 Vite

  • webpack 是目前整个前端使用最多的构建工具，但是除了 webpack 之后也有其他的一些构建工具：

    • 比如 rollup、parcel、gulp、vite等；
  • 官方定位：下一代前端开发与构建工具；
  • Vite(法语意为“快速的”)，是一种新型的前端构建工具，能够显著提升前端开发体验。

Vite 的构造

  • 主要由两部分组成：

    • 一个开发服务器，基于原生 ES 模块提供了丰富的内建功能，HMR 的速度非常快速；
    • 一套构建指令，使用 rollup 打开代码，并且进行了预配置，可以输出生成环境的优化过的静态资源；

浏览器原生支持模块化

  • 如果我们不借助于其他工具，直接使用 ES Module 来开发的问题

    • 首先，我们会发现在使用 loadash 时，加载了上百个模块的 js 代码，对于浏览器发送请求是巨大的消耗；
    • 其次，代码中如果有 TypeScript、less、vue 等代码时，浏览器并不能直接识别；
  • 事实上，vite 帮助我们解决了上面的问题；

Vite 的安装和使用

  • Vite 依赖于 Node，需要安装 Node 环境

  • 安装 vite：

    npm install vite -g(全局)

    npm install vite -D(局部)

  • 通过 vite 启动项目

    npx vite

Vite 对 css 的支持

  • vite 可以直接支持 css 的处理

    • 直接导入 css 即可；

  • vite 可以直接支持 css 预处理器，比如 less

    • 直接导入 less；

    • 安装 less 编译器；

      npm install less -D

  • Vite 直接支持 postcss 的转换：

    • 只需安装 postcss，并且配置 postcss.config.js 的配置文件即可；

      npm install postcss-preset-env -D

module.exports = {
  plugins: [require("postcss-preset-env")],
};
​

Vite 对 TypeScript 的支持

  • vite 对 TypeScript 是原生支持的，它会直接使用 ESBuild 来完成编译：

    • 只需直接导入即可

  • 若我们查看浏览器中的请求，会发现请求依旧是 ts 的代码：

    • 因为 vite 中的服务器 Connect 会对我们的请求进行转发；
    • 获取 ts 编译后的代码，给浏览器返回，浏览器可以直接进行解析；

Vite 对 vue 的支持

  • vite 对 vue 提供第一优先级的支持：

    • Vue3 单文件组件支持：@vitejs/plugin-vue
    • Vue3 JSX 支持：@vitejs/plugin-vue-jsx
    • Vue2 支持: underfin/vite-plugin-vue2

  • 安装支持 Vue 的插件：

    npm install @vitejs/plugin-vue -D

  • 在 vite.config.js 中配置插件:
const vue = require("@vitejs/plugin-vue");
​
module.exports = {
  plugins: [vue()],
};
​

Vite 打包项目

  • 可以直接通过 vite build 来完成对当前项目的打包工具：

    npx vite build

  • 可以通过 preview 的方式。开启一个本地服务预览打包后的效果：

    npx vite preview

ESBuild 的解析

  • 特点：

    • 超快的构建速度，不需要缓存；
    • 支持 ES6 和 CommonJS 的模块化；
    • 支持 ES6 的 Tree Shaking；
    • 支持 Go、JavaScript 的 API；
    • 支持 TypeScript、JSX 等语法编译；
    • 支持 SourceMap；
    • 支持代码压缩；
    • 支持拓展其他插件；

ESBuild 的构建速度

  • 使用 Go 语言编写，可以直接转换成机器代码，无需经过字节码；
  • ESBuild 可以充分利用 CPU 的多内核，尽可能和让它们饱和运行；
  • ESBuild 的所有内容都是从零开始编写的，而不是第三方，从一开始就可以考虑各种性能问题；

Vite 脚手架工具

  • 在开发中，我们不可能所有的项目都使用 vite 从零去搭建

  • Vite 的两个工具：

    • vite：相当于是一个构建工具，类似于 webpack、rollup；
    • @vitejs/create-app: 类似于 vue-cli、create-react-app;

  • 使用脚手架工具;

    npm install @vitejs/create-app -g

    create-app

avatar
文章
阅读
粉丝