Vue3和TypeScript学习笔记coderwhyDay10之VueCLI、Vite

Vue CLI脚手架

什么是脚手架？
在真实开发中，我们不可能像之前 每个项目都从头到尾来完成所有的webpack配置，这样开发效率会降低。
我们通常使用脚手架来创建一个项目，Vue的项目我们使用的就是Vue CLI脚手架
CLI（Command-Line Interface）命令行界面
我们可以通过CLI选择项目的配置和创建出项目
Vue CLI已经内置了webpack相关的配置，我们不需要从零开始配置

---

Vue CLI安装使用

1.全局安装Vue CLI
这样我们以后就可以在任何文件夹下通过vue命令创建项目了。
npm install @vue/cli -g

升级vue
npm update @vue/cli -g

2.通过vue命令创建项目
vue create 项目的名称

vue创建项目的过程

项目的目录结构

.browserslistrc：适配浏览器的范围

> 1%
last 2 versions
not dead

市场份额大于1%
最后两个版本
还在维护

npm install
npm run serve
npm run build

---

Vue CLI的运行原理（难点）

---

Vite

webpack是目前整个前端使用最多的构建工具，但除了webpack还有些其他的构建工具，如rollup、parcel、gulp、vite等

vite：官方定义的下一代前端开发与构建工具
目前更新到2.4,但依然不算非常稳定。
 

浏览器原生支持模块化

<script src="./src/main.jsx" type="module"></script>

 
不借助于工具，直接使用ES module开发有什么问题？
某些文件不能识别（ts、less、sass、vue等）
模块间依赖过多，对浏览器请求是巨大的消耗
vite帮助我们解决上面的问题

---

vite安装和使用

1.Vite本身也依赖node
npm install vite -g全局安装
npm install vite -D局部安装

2.通过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 postcss-preset-env -D

postcss.config.js

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

---

vite对TypeScript的支持

vite对TypeScript是原生支持的，会直接使用ESBuild来完成编译，直接导入即可

如果我们查看浏览器中的请求，会发现请求的依然是ts代码
因为vite中的服务器Connect会对我们的请求进行转发
获取ts编译后的代码，给浏览器返回，浏览器可以直接进行解析

---

vite原理

vite开发阶段就是一个本地服务器，帮助我们对ts、vue代码做转换，进行请求的时候做对应的转发，把转发后的代码返回给浏览器，浏览器解析执行并显示。
vite1使用Koa，vite2使用Connect来搭建服务器。
Connect对请求的转发做的更好。

---

vite对vue的支持

vite对vue提供第一优先级支持：
vue3单文件组件支持：@vitejs/plugin-vue
vye3JSX支持：@vitejs/plugin-vue-jsx
vue2支持:underfin/vite-plugin-vue2
安装支持vue插件：
npm install @vitejs/plugin-vue @vue/compiler-sfc -D

在vite.config.js中配置插件

const vue = require('@vitejs/plugin-vue')
module.exports = {
  plugins: [
    vue()
  ]
}

---

vite打包项目

直接通过vite build来完成对当前项目的打包
npx vite build
我们可以通过preview的方式，开启一个本地服务器来预览打包后的效果
npx vite preview

配置vite的npm 命令：

 "scripts": {
    "serve": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }

---

vite使用ESBuild解析

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

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

---

vite脚手架工具

在我们使用vite进行实际项目开发中，并不是从零搭建。
使用提供的脚手架工具
npm install @vitejs/app去快速搭建vite项目

过程很简单，一步步来就行。

---

• vue-cli

• vite

• 以上笔记参考coderwhy老师的Vue3和TypeScript。
  老师讲课链接：课程链接