Vue基础知识

数据双向绑定，组件化，单文件组件

全局api： vueextend 、 vueset
实例选项: new Vue() 、 el 、 data 、 compents 都是vue实例选项
实例属性和方法： vm$on 、 vm$data 、 vm$destroy() 在$都是vue的实例和方法
指令： directive
内置组件： <components></compontents> 、 <keep-alive></keep-alive> 、 <router-view></router-view>

数组中不可用的方法：slice，concat；
直接修改数组list[i] = 值，不可以这样直接修改；
Vueset(数组，索引，{值}) vue的全局方法set来更改数组的某一项的值

标签属性和条件渲染
标签属性： v-bind：href='link"; 等效于 :href="link" 动态绑定；
条件渲染： v-if 、 v-else 、 v-show ；
数据绑定： {{}} 、 v-html (原始-HTML)、 v-text ；

事件绑定-内置事件绑定，自定义事件绑定
v-on:click="run" 等效于 @:click="run" 事件绑定；
自定义事件绑定： 父组件自定义事件
<my-compented @my-event='toggle'></my-compented>
子组件触发 my-event 自定义事件； this$emit('my-event', opation)；
父组件执行toggle 函数；

计算属性和数据监听
computed选项 -计算属性：根据我们调用属性来跟新，调用的属性没有变更，我们computed选项里面的方法读取的是缓存；

页面内容响应数据v-once
如果你需要页面内容响应数据的变化，就不加v-once。
如果你需要页面内容渲染后，不随数据的变化而变化，就加上这个。
对于一些固定不变的组件，在调用时我们可以加上v-once，只在第一次渲染执行，保存数据在内存中，后面再调用直接从内容中提取，提高执行效率。

应用

组件的通信
<p:is = "动态的组件名"></p> 等同于 <动态的组件名></动态的组件名> 动态绑定组件
注：Vue有个单项数据流的概念：即父组件传递给子组件的参数，子组件不能直接修改；防止引用类型参数被修改后，如果父组件中其他地方也使用了此参数会受到影响。

子组件 props 接受的两种形式：
数组： ['first-name','two-name'] ，从父组件传递两个属性值；
动态展现： {{firstName}}
对象：

slot：插槽
父组件插件里面定义的内容放到子组件 slot 中：

子组件

vue高级功能--过渡和动画

自定义指令：

使用 vue-cli的优势：
成熟的vue项目架构设计；
本地测试服务器；
集成打包上线方案 webpack

npm install vue-cli -g ：全局安装vue-cli
vue init webpack my-project ：初始化项目
npm install 安装项目依赖

npm run dev ：在localhost启动测试服务器；
npm run bulid ：生成上线目录（部署）

a、安装 vue-router

b、配置路由

6、关闭eslint
dev模式下，默认会做eslint检测，若要关闭，打开 config/indexjs ，设置 useEslint: false ，${}占位符，多行字符串

7、生命周期

8、支持es6
es6中很多新特性很好用class、promise、then、catch、（数组转换符号）、函数设置参数默认值等
a、安装babel-polyfill

b、在入口mainjs文件当中引入:

c、找到build文件夹下的webpackbaseconfjs

文章参考： 慕课网-欧米雪儿lyy

1在until 目录里添加 一个MyPluginjs 文件
Vuejs 的插件有一个公开方法 install。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

2在 mainjs 引入

3在其他需要的组件使用就可以

日常开发使用组件库一般都能满足大部分的需求，不过有些功能组件可能库里并没有，这里开源一些特定项目可能会使用到的组件，希望可以帮助到大家~

无论组件的 dom 位置在页面何方，会准确计算鼠标位置以及自动在右侧悬浮一个查看区域，并且当右侧位置超过边界后，查看区域会自动出现在左边。

boxSize : 设置放大镜主体框的大小，会自动在右侧生成一个与之同样大小的查看放大图像的悬浮框，默认500。

minImgUrl : 放大镜小图的 url 。

maxImgUrl : 放大镜大图的 url 。

autoReverse : 是否开启右侧距离超过边界时，悬浮框自适应在左侧。默认 true 。

direction : 悬浮框的方向，默认 right 右侧。可选 left 。

实现了功能。会将传入的一维数组的日期集合，按年月格式化为对象，在渲染某个月时，只会渲染对应当月的签到天数，数组拥有海量数据也不会大量渲染。

组件调用：

checkIns : 传入一个签到日期的一维数组集合，可以是时间戳、 2019-11-11 、 20191111 格式。

size : 签到组件的整体大小，默认 500 ，大小自适应。

实现了功能。右击创建标签，双击编辑标签，可以单个移除，也可以全部清除，保存到本地缓存，导出为。

isShowSaveBtn : 是否显示保存按钮，默认 true ，会将标签数据保存到本地缓存。

src : 需要添加标签的 url 。

width ：的宽，默认500。

theme : 主题色，默认 #3b8bcc 。

仿某电商的注册验证，不过使用纯 canvas 进行绘制，包括抠出来的拼图以及的渲染。而且在验证成功派发的事件里会记录用户滑动过程中上下分别抖动的最大距离。(可能机器是不会抖的，增加了一点点的安全性)

radius : 拼图突出圆心的半径值，也就是绘制的拼图的大小，默认 10 。

src : 单个 url 或多个 url 数组的集合，当为多个时，验证失败或成功都会随机选择另外一张。

width : 验证区域的宽，是 canvas 容器的 width 。

height : 验证区域的高。

theme : 主题色，默认 #369 。

success : 验证成功的回调，会派发一个对象出来，分别为上下波动的最大值。

fail : 验证没通过的回调。

两种模式，一种是传入时间戳或 2022-5-12-17-20 或 20225121720 这样大于当前时间的格式。另一种是传入 60 这样的秒数，开始倒数之后刷新页面不会重新计时。没有做任何 css 的美化，只使用作用域插槽派发出对应的值。

time ： 传入大于当前时间的时间格式。

isSMSMode : 是否秒数倒数模式，默认 false 。

totalTime : 倒数模式的最大秒数。

year : 年;

month : 月;

date : 日;

hours : 小时;

minutes : 分钟;

seconds : 秒钟;

timeLeft : 倒数剩余秒数

end ：倒计时结束。

start ：开始。

pause ：暂停。

采用自定义指令形式，会将指令作用在 img 上的标签最终替换为 canvas 标签。使用离屏 canvas 进行绘制，一个绘制图像，另一个绘制水印，最终合并为一个 canvas 标签。

src : 的 url 。

text : 水印的文字。

opacity : 水印的透明度，默认 03 。

rotate : 旋转角度，默认 20 。

fontSize : 水印字体大小，默认 20 。

type : 水印绘制的方式，默认是 repeat 全屏重复绘制。只绘制一条水印时，可选 left-top 左上， right-top 右上， right-bottom 右小， left-bottom 左下。

拖拽的具体内容用户完全可以自己编写，也可以自己编写拖拽的控制点。

data ：数组格式， Dom 有对应的渲染数组，当 Dom 位置变了之后，数组也会发生变化，传递给组件内，改变后组件派发出来。

watchData ：会将改变的数组派发出来，监听这个方法接收。

drag ：用户自己定义拖拽的控制点，没有时拖拽 Dom 项任意任意位置都可以。

'辅助'完成大家来找茬游戏。

更多的组件后续会持续添加以及优化，欢迎 pr 各种你使用到功能组件。源码地址 vue-gn-components ，如果对你有帮助，还请给个 Star 了，这也是我持续完善这个项目，持续的动力。

使用 Vue3 的 defineAsyncComponent 特性可以让我们延迟加载组件。这意味着它们仅在需要时从服务器加载。

这是一个改善初始页面加载的好方法，因为我们的应用程序将以较小的块加载，而不必在页面加载时加载每个组件。

以下示例来自官网 异步组件 ：

我们还可以使用 import 从其他文件轻松添加 Vue 组件。

这是使用 defineAsyncComponent 的最简单方法，但我们也可以传入一个完整的选项对象，该对象配置了几个更高级的参数。

一般默认就已足够。

我们简单的模拟请求文章数据的 ArticleListvue 组件：

我们使用 defineAsyncComponent 延迟加载 组件，并使用 Suspense 元素包装这个组件：

默认情况下，我们使用 defineAsyncComponent 定义的所有组件都是可挂起的。

这意味着，如果组件的父链中存在 Suspense ，它将被视为该 Suspense 的异步依赖项。我们的组件加载、错误、延迟和超时选项将被忽略，而将由 Suspense 处理。

最终效果如下：

用户将看到 Loading，然后在 1s 之后请求完数据后，展示完整的组件。

当创建包含数十个组件的大型项目时， defineAsyncComponent 可能非常有用。当我们使用延迟加载组件时，我们可以加快页面加载时间，改善用户体验，并最终提高应用程序的保留率和转换率。

题主是否想询问“金格电子签章组件服务器异常的原因”？如下。
1、金格电子签章服务未启动或者异常，可以检查一下金格电子签章服务是否启动正常，以及相关配置是否正确。
2、前端代码中访问金格电子签章服务的URL地址是否正确，可以检查一下代码中的URL是否正确。
3、网络连接问题，可以检查一下网络连接是否正常，是否存在防火墙或其他安全软件的限制。
4、金格电子签章组件版本问题，可以检查一下组件版本是否正确，是否存在兼容性问题。

vue常用组件库无非这些，一直在思索一个问题，组件能否条件编译，类似于客户端或者服务器的，在编译期去除，打包就会被忽略

因此尝试在一个自定义的脚手架内，引入了3套组件库，实现了在 env 声明组件库可动态编译的效果

若是配置成功，无需单独引入样式
若是配置成功，重置配置变量会被覆盖

首页和官网一致，vue cli3 环境

---