DTCloud

Vite 是一个基于 ES 模块的构建工具，旨在提供快速、轻量级的开发体验。与传统的打包工具不同，Vite 利用浏览器原生支持的模块加载能力，实现了更快的冷启动和热模块替换。它支持 Vue.js、React 和其他前端框架，并且具有开发服务器和优化的构建配置，可以大大提升前端项目的开发效率。

Ajax是一种异步的Web开发技术，用于在不刷新整个页面的情况下向服务器发送请求和接收响应。Slot插槽是Vue中一个强大的特性，它允许我们在组件中定义可插入的内容。通过使用Slot插槽，我们可以在父组件中向子组件传递任意的HTML或组件，实现更灵活和可重用的组件设计。使用插槽：在父组件中，使用子组件标签的起始标签和结束标签之间放置要插入的内容。导入Axios：在需要进行Ajax请求的Vue组件中，导入Axios库。元素将被插入到子组件的插槽中，从而在页面中显示出来。定义插槽：在子组件的模板中，使用。

MQTT（Message Queuing Telemetry Transport，消息队列遥测传输协议），是一种基于发布/订阅（publish/subscribe）模式的"轻量级"通讯协议，是 TCP/IP 的再封装，由 IBM 在 1999 年发布。MQTT 最大优点在于，地开销，少流量实现网络通信。

这个过程是通过一个依赖收集器来实现的，每个computed属性都有一个对应的Watcher对象，它会在computed属性被访问时收集所有依赖于它的属性，并在这些属性发生变化时触发更新。同时，由于computed属性是基于依赖的，所以它的计算结果会被缓存起来，只有在依赖的属性发生变化时才会重新计算，从而提高了性能。同时，由于computed属性是基于依赖的，所以它的计算结果会被缓存起来，只有在依赖的属性发生变化时才会重新计算，从而提高了性能。6.对数据进行动态响应，例如根据用户的输入动态计算某个属性的值。

Vue的computed属性是一种计算属性，它的值是根据其他属性计算而来的。Vue会自动追踪computed属性所依赖的属性，并在这些属性发生变化时重新计算computed属性的值。computed属性的实现原理是使用了Vue的响应式系统。当一个computed属性被访问时，Vue会检查它所依赖的属性是否发生了变化，如果发生了变化，就会重新计算computed属性的值。

创建监听路由函数，路径发生变化后，动态去获取数据给路由添加key值。可以在根路由上为其分配一个唯一key。采用$route.fullpath作为其唯一key。这样vue就回认为内部路由每个都是不同的路由，在跳转时便会强制刷新组件。

Vue3 新增了一个叫做组合式 api 的东西，英文名叫 Composition API。因此 Vue3 的 script 现在支持三种写法。1)最基本的 Vue2 写法setup() 属性无论是代码行数，还是代码的精简度，如果对 Vue 很熟悉，那么，推荐使用如果是前端新人，那么，推荐先学习第一种写法。因为第一种写法的学习负担更小，先学第一种方式，掌握最基本的 Vue 用法。第一种写法，跟过去 Vue2 的写法是一样的，所以不过多介绍。

指令是Vue.js的一种特殊语法，它可以将DOM元素与Vue.js实例中的数据绑定起来。状态管理是Vue.js的一种机制，它可以帮助开发者管理应用程序的状态，并使得应用程序更加可预测和可维护。指令是Vue.js的一种特殊语法，它可以将DOM元素与Vue.js实例中的数据绑定起来。v-bind指令可以将DOM元素的属性与Vue.js实例中的数据绑定起来，使得DOM元素的属性可以自动更新。状态管理是Vue.js的一种机制，它可以帮助开发者管理应用程序的状态，并使得应用程序更加可预测和可维护。

Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度集成，可以非常方便地实现单页面应用程序（SPA）的路由功能。Vue Router 的原理主要是通过监听 URL 的变化，根据不同的 URL 显示不同的组件，从而实现页面的切换和跳转。总的来说，Vue Router 的原理比较简单，主要是通过路由配置、路由匹配和路由跳转来实现页面的切换和跳转。同时，Vue Router 还提供了一些高级功能，比如路由懒加载、路由嵌套等，可以帮助我们更好地管理和组织应用程序的路由。

请确保按照上述步骤正确安装和配置Less Loader，并正确引入Less文件和使用Less样式。对象中，你可以添加自定义的Less配置选项。例如，你可以设置全局变量、修改Less的行为等。这样，你就可以在Vue 3中使用Less来编写样式，并将其应用于组件中。是你的Less文件路径，根据你的项目结构进行调整。

在assets/style下创建variables.less。在main.js中引入variables.less文件。在assets/style下创建theme.less。主要通过切换class改变全局变量，实现换肤。先上主要文件目录结构。

在项目根目录创建 postcss.config.js 文件。上面的代码与安装的flexible.js不同。在main.js中引入。

1.引入vant 组件 上拉list2.后端数据做了分页处理，获取接口数据，渲染到页面上,(此处只会显示一页的数据)3.设置属性去实现效果，loading,finished为vant组件中提供的4.每次滚动到底部后把页面数+1，发送一次请求获取新分页数据.5.获取完数据，将新获取的数据跟上一页获取的数据做一个合并，6.判断加载完毕，数据的长度小于1，则finished设置为true,表示所有数据加载完毕**初始设置loading 为true，数据加载成功，设置为false。

= -1;});if (!f) {})usersPermissions 表示当前用户所具备的权限，正常该数据应该是从服务端加载而来，但是我这里简单起见，就直接定义好了。

【代码】vue项目结合,vant 实现中轮播图中，点击图片放大图片。

Vue 和 React 都是用于构建 UI 界面的流行框架。它们的哲学也有很多相似的地方，我们可以认为这些特性是流行前端框架的一个趋势。

前端开发中，如果涉及列表渲染，都会提示或要求每个列表项使用唯一的 key，那很多开发者就会直接使用数组的 index 作为 key 的值，而并不知道 key 的原理。那么以下会讲解 key 的作用以及为什么最好不要使用 index 作为 key 的属性值。

在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。

大屏设计器项目开发纪实之项目搭建篇。

写这篇文章为了解决现在没有⼀个合集 ，所以我参考其他文档， 及自己的测试最后得出完整的方案。

概念：ssr（server side render）服务端渲染优点：1.有利于搜索引擎的SEO操作，由于搜索引擎爬取的是完全渲染出来的页面。2.对于网络慢或运行慢的设备，可提供良好的用户体验。3.可以减少对服务器的请求。缺点：1.开发受限制，比如mounted生命周期钩子不能用了，因为它只有在客户端页面转换成SPA页面的过程中才会被激活，而ssr只是将服务端生成的html字符串传递给客户端，所以不会执行该生命周期钩子。2.构建和部署的要求比较多，比如服务端要配置node.js环境。

1.如果想要在vite创建的脚手架工程中使用TypeScript，则只需如下即可，3.vite的配置文件，在根目录下新建一个vite.config.js文件。2.如果想要在vite创建的脚手架工程中使用SCSS，则需要如下，4.安装Vuex，参考Vue2的引入方式。5.安装路由，参考Vue2的引入方式。

写这篇文章为了解决现在没有一个合集，所以我参考其他文档，及自己的测试最后得出完整的方案。

【代码】基于vue2写一个echarts 插件。

则在在中再举个例子：巧用$props$porps用于记录从父组件传入子组件的所有被props捕获以及不是class与style的参数。如则在在中，props的值为title:′title′。props的值为{title:'title'}。props的值为title:′title′。props可以用于自组件和孙组件定义的props都相同的情况，如：妙用函数式组件函数式组件相比于一般的vue组件而言，最大的区别是非响应式的。它不会监听任何数据，也没有实例（因此没有状态，意味着不存在诸如cre

Vue3 脚手架使用vue-cli创建脚手架vue create myapp # 创建vue3工程，vue-cli版本必须在4.5.13以上运行项目，npm run serve

Vue3 reactive作用: 定义一个对象类型 或 数组类型的响应式数据（基本类型不要用它，要用ref函数）<template> <div>{{ job.type }}</div> <div>{{ arr }}</div></template><script>import { reactive } from 'vue' // 一定要引入reactiveexport

Vue3 ref1. setupsetup是所有组合式api的入口。setup函数的两种返回值：返回对象返回函数代码示例，<template></template><script>export default { steup() { return{} }}</script><style scoped></style>2. ref作用: 定义一个响应式的数据<templ

Vue2 自定义video样式具体实现，请看如下代码详解，<template> <div> <div style="width: 100%; height: 50px"></div> <div class="player"> <video id="myVideo" ref="video" src="../assets/video/sintel.mp4"></video>

Vue2 跑马灯效果在index.html文件中引入jquery-1.8.3.min.js和jquery.liMarquee.js文件，<!DOCTYPE html><html lang=""><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content

Vue2 生命周期图示如下，beforeCreate：在这个生命周期函数中无法通过vm访问到data中的数据、methods中配置的方法，所以这里的this不是vm。created：在这个生命周期函数中可以通过vm访问到data中的数据、methods中配置的方法（在内存中），所以这里的this是vm。beforeMount：在这个生命周期函数中页面呈现的是未经Vue编译的DOM结构，无法操作DOM。mounted：在这个生命周期函数中页面呈现的是经过Vue编译的DOM结构，可以操作DOM。

vue中wangEditor的使用安装wangEditor，npm install wangeditor --save代码如下，<template><div id="richText" style="width:100%;"></div></template><script>import { ref, onMounted } from 'vue'import E from 'wangeditor'setup() { c

Vue2 SSR服务端渲染概念：ssr（server side render）服务端渲染优点：有利于搜索引擎的SEO操作，由于搜索引擎爬取的是完全渲染出来的页面。对于网络慢或运行慢的设备，可提供良好的用户体验。可以减少对服务器的请求。缺点：开发受限制，比如mounted生命周期钩子不能用了，因为它只有在客户端页面转换成SPA页面的过程中才会被激活，而ssr只是将服务端生成的html字符串传递给客户端，所以不会执行该生命周期钩子。构建和部署的要求比较多，比如服务端要配置node.js环境。

Vue2 单个页面倒计时的实现要实现多个计数器倒计时，可以抽象出来写成函数，使用定时器每间隔1秒钟去倒计时，等时间等于0时，将定时器清零，这个会出现一个问题，就是如何清除多个定时器，这里可以采用将初始化的定时器都放到一个数组里，清除定时器就是将这个数组里的定时器都遍历出来并清理就行了，代码如下，let tempTimerArr = []export function timeCoutDown(timer, China_utc_time, fn) { let futureTime = toTim

Vue2 消息订阅与发布需要安装pubsub-js库来实现消息订阅与发布，npm install pubsub-js #安装pubsub-js类库在School.vue文件中，<template></template><script>import pubsub from 'pubsub-js'export default { name: 'School', data() { return { name: '张三',

Vue2 数据代理原理原理：通过Object.defineProperty()把data中的所有属性添加到vm上，为没一个添加到vm上的属性都指定一个getter/setter，在getter/setter内部区操作data中的属性，一旦更改某个属性就会调用set()方法实现响应式。...

Vue2 根据电脑分辨率不同，获取图片自适应的高度使用ref获取图片的offsetHeight属性，即可调整图片大小，<template><img src="../../assets/secondHead/CarAndProDetail_bg_head.png" alt="" style="width:100%;" ref="headimg"><img src="../../assets/back/back.png" ref="back" @click="back"

Vue2 将js ES6兼容IE浏览器使用@babel-polyfill，可以将 Vue 中 ES6 的语法转成兼容 IE 内核的语法，配置如下，安装@babel-polyfill，注意这里要用 npm 源地址，淘宝源不行npm install --save @babel/polyfill在 main.js 中加入，import "@babel/polyfill";再在 babel.config.js 文件中添加，module.exports = { entry: ["@ba

Vue2 vue-pdf插件安装 vue-pdf 插件，npm install --save vue-pdf<template><div class="pdf"> <pdf ref="pdf" :src="pdfUrl"> </pdf></div></template><script>import pdf from "vue-pdf"export default { components: {

Vue2 跑马灯效果在 Vue 中使用 jquery.liMarquee.js 插件，在 public 目录 index.html 中引入 jquery.liMarquee.js，在 vue 组件中的 mounted 属性里，使用 liMarquee()方法开启轮播图效果，示例代码如下，<template> <div class="jq22-container"> <div class="str3-2 str_wrap"> <span>1&lt