前端学习笔记--Vue.js 3.0

网友投稿 866 2022-05-30

文章内容输出来源:大前端高薪训练营

大前端学习笔记--Vue.js 3.0

一、Vue.js 源码组织方式

1. 源码采用TypeScript重写

提高了代码的可维护性。大型项目的开发都推荐使用类型化的语言,在编码的过程中检查类型的问题。

2. 使用Monorepo管理项目结构

使用一个项目管理多个包,把不同功能的代码放到不同的package中管理,每个功能模块都可以单独发布,单独测试,单独使用。

3. 不同构建版本

Vue3中不再构建UMD模块化的方式,因为UMD会让代码有更多的冗余,它要支持多种模块化的方式。Vue3中将CJS、ESModule和自执行函数的方式分别打包到了不同的文件中。在packages/vue中有Vue3的不同构建版本。

cjs(两个版本都是完整版,包含编译器)

vue.cjs.js

vue.cjs.prod.js(开发版,代码进行了压缩)

global(这四个版本都可以在浏览器中直接通过scripts标签导入,导入之后会增加一个全局的Vue对象)

vue.global.js(完整版,包含编译器和运行时)

vue.global.prod.js(完整版,包含编译器和运行时,这是开发版本,代码进行了压缩)

vue.runtime.global.js

vue.runtime.global.prod.js

browser(四个版本都包含esm,浏览器的原生模块化方式,可以直接通过

支持模块的script默认延迟加载

有了type="module"的模块是延迟加载的,类似于script标签设置defer

在文档解析完成后,也就是DOM树生成之后,触发DOMContentLoaded事件前执行

2. Vite as Vue-CLI

Vite 在开发模式下不需要打包可以直接运行

Vue-CLI开发模式下必须对项目打包才可以运行

Vite在生产环境下使用Rollup打包

基于ES Module的方式打包

Vue-CLI使用Webpack打包

3. Vite特点

快速冷启动

按需编译

模块热更新

4. Vite创建项目

Vite创建项目

npm init vite-app cd npm install npm run dev

1

2

3

4

基于模板创建项目

npm init vite-app --template react npm init vite-app --template preact

1

2

JavaScript Vue web前端

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:性能工具之 Gatling 开发环境搭建
下一篇:Java中的Properties类详解Properties配置文件
相关文章