脚手架vuecli和vite的安装的使用

前端寒舒
647 阅读2分钟

vuecli和vite的安装的使用

01.脚手架:就是一个搭建项目的工具

  • 搭建项目通常使用clil来配置和创建。
  • Vue的脚手架就是Vue CLI：vuecli中已经内置了webpack相关的配置。

02.vue cli安装和使用

安装vuecli一般情况下安装的是最新版本

//全局安装
npm install @vue/cli -g

老版本的话可以通过下面的命令来升级

npm update @vue/cli -g

创建项目我们使用下面命令

vue create 项目名称

03.Vite的安装和使用

Vite依赖Node环境，并且Vite要求Node版本是大于12版本的。

npm install vite -g 全局安装

npm install vite -d 局部安装

通过vite 启动项目

npx vite

Vite对css的支持

vite可以直接支持css的处理,直接导入css就可以，然后安装less编译器；

npm install less -D

vite直接支持postcss的转换：

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

npm install postcss postcss-preset-env -D

Vite对TypeScript的支持

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

  • 只需要直接导入即可；
  1. 如果我们查看浏览器中的请求，会发现请求的依然是ts的代码：
  • 这是因为vite中的服务器Connect会对我们的请求进行转发；
  • 获取ts编译后的代码，给浏览器返回，浏览器可以直接进行解析；

：在vite2中，已经不再使用Koa了，而是使用Connect来搭建的服务器

  • Vite对vue的支持
  1. vite对vue提供第一优先级支持：
  2. Vue 3 单文件组件支持：@vitejs/plugin-vue
  3. Vue 3 JSX 支持：@vitejs/plugin-vue-jsx
  4. Vue 2 支持：underfin/vite-plugin-vue2

安装支持vue的插件：

npm install @vitejs/plugin-vue -D

在vite.config.js中配置插件：

import vue from '@vitejs/plugin-vue';
module.exports ={
    plugins:[
        vue()
    ]
}

Vite打包项目

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

npx vite build

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

npx vite preview

ESBuild解析

ESBuild的特点：

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

ESBuild的构建速度: ESBuild的构建速度很快

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