党建业务深度融合的“检察样本”
网页链接
#利津县融媒体中心#云南“现代化边境小康村”建设的四个样本网页链接
Vite 2.0 已经正式发布了，你还在用webpack吗？
我们见证了webpack、Rollup和Parcel等工具的变迁，它们极大地改善了前端开发者的开发体验
我给大家推荐下一代前端开发与构建工具Vite
目前已经升级到2.0版本，灵活，稳定，极速
对比webpack打包工具它有如下优点：
1.极速的服务启动，使用原生 ESM 文件，无需打包
2.轻量快速的热重载，无论应用程序大小如何，极快的模块热重载（HMR）
3.丰富的功能，对 TypeScript、JSX、CSS 等支持开箱即用
4.优化的构建，可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建
5.通用的插件，在开发和构建之间共享 Rollup-superset 插件接口
6.完全类型化的API，灵活的 API 和完整 TypeScript 类型
Vite 2.0 升级后主要改进了如下内容：
1.多框架支持,Vite 提供了 Vue, React, Preact, Lit Element 项目模版
2.全新插件机制和 API
3.基于 esbuild 的依赖预打包，30 秒预打包的项目现在只需要不到两秒
4.更好的 CSS 支持
5.服务端渲染 (SSR) 支持
6.旧浏览器支持
Vite 官方文档还提供了从 Vite 1.0 迁移至 Vite 2.0 的说明：
网页链接
作为一个有追求的前端开发人员，你考虑使用并升级吗？
关注司达叔讲前端，走在技术最前沿
#前端##前端框架##前端开发##编程开发#
【Vue3新特性Teleport，你了解吗？】
Vue鼓励我们通过将UI和相关行为封装到组件中来构建UI，组件之间可以嵌套，从而构成一个UI树。然而，有时候组件模板的一部分在逻辑上属于该组件，但从技术角度来看，应该将模板的这一部分移到DOM中的其他地方，位于Vue应用程序实例之外。
一个常见的场景是创建一个包含全屏模态的组件。在大多数情况下，模态的逻辑都是存在于组件中的，但是你会发现，模态的定位很难通过CSS来解决，使得你不得不考虑对组件进行拆分。
Vue 3官网给出了一个例子，有如下的HTML结构：
<body>
<div style="position: relative;">
<h3>Tooltips with Vue 3 Teleport</h3>
<div>
<modal-button></modal-button>
</div>
</div>
</body>
modal-button组件在嵌套很深的div元素中渲染。modal-button组件的代码如下：
const app = Vue.createApp({});
ponent('modal-button', {
template: `
<button @click="modalOpen = true">
Open full screen modal!
</button>
<div v-if="modalOpen" class="modal">
<div>
I'm a modal!
<button @click="modalOpen = false">
Close
</button>
</div>
</div>
`,
data() {
return {
modalOpen: false
}
}
})
modal-button组件有一个<button>元素来触发模态的打开，以及一个具有.modal样式类的div元素，它包含模态的内容和一个用于自我关闭的按钮。
.modal样式类使用了一个样式表属性：“position: absolute;”，当modal-button组件在上面的HTML结构中渲染时，你会发现一个问题，由于模态在嵌套很深的div中渲染，样式属性position: absolute将相对于父级div元素来应用。为了解决这个问题，Vue 3给出了一个内置组件teleport，该组件允许我们控制在DOM中的哪个父节点下渲染HTML片段。
teleport组件有两个prop，如下所示：
to：字符串类型，必需的prop。其值必须是有效的查询选择器或者HTML的元素名（如果在浏览器的环境中使用）。teleport组件的内容将被移动到指定的目标元素中。
disabled：布尔类型，可选的prop。disabled可以用于禁用teleport组件的功能，这意味着它的插槽内容将不会被移动到任何位置，而是在周围父组件中指定<teleport>的地方渲染。
修改modal-button组件的代码，使用<teleport>来告诉Vue“将这个HTML传送到body标签下”，代码如下所示：
ponent('modal-button', {
template: `
<button @click="modalOpen = true">
Open full screen modal! (With teleport!)
</button>
<teleport to="body">
<div v-if="modalOpen" class="modal">
<div>
I'm a teleported modal!
(My parent is "body")
<button @click="modalOpen = false">
Close
</button>
</div>
</div>
</teleport>
`,
data() {
return {
modalOpen: false
}
}
})
现在，当我们单击“Open...”按钮，Vue会正确地将模态的内容在body标签下渲染。
喜欢我的文章欢迎关注、转发、评论、点赞和收藏。
#Vue.js##vue3##前端#
