脚手架Vue CLI和Vite

什么是脚手架

CLI：Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架，vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置

操作步骤

• 要求有node版本要在8.9以上和webpack
• 安装vue脚手架npm install -g @vue/cli
  如果安装失败==>以管路员的身份打开终端，npm clean cache -force
• 检查版本vue version
• 现在版本是4了，因为要用脚手架2的模板，所以要安装npm install -g @vue/cli-init
• 脚手架2初始化项目：vue init webpack 文件名
• 脚手架3初始化项目项目：vue create 文件名

• 配置过程（CLI2）
  image.png

• 生成的文件功能解析
  image.png

• CL3文件初始化模板配置

  
  
  image.png

runtimecompiler和runtime-only区别

• runtimecompiler：template -->抽象语法树--> render--> 虚拟dom -->UI
• runtime-only:render--> 虚拟dom -->UI(相比于楼上，性能更高，代码量更少)

cli3如何配置

• 启动配置服务器
• 在终端任意目录下输入命令vue ui
  导入对应的vue文件进行管理
  
  image.png
• 关于在cli3额外添加配置文件
  新建文件
  
  image.png
  
  然后在里面用commom.js进行导出，导出的内容会和所有的配置信息存在一起

箭头函数的this是怎么找

答案： 最近作用域的this（就近原则）一层一层往外找this，碰到箭头函数就再往上找

image.png

Vite（node12版本以上）

• 新型前端构建工具，能够显著提高前端开发体验
• 由两部分组成：一个服务器，热替换（HMR）速度快，二是一套构建指令

ESBuild为什么这么快呢？

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

• 使用方法

  
  
  image.png
  
  

  之后再 npm install 将需要的包都引入进来