插槽可以看到第十九（示例） 17. 安装配置 vue-router17.1 安装yarn add vue-router@next17.2 router/index.jsimport { createRouter, createWebHistory } from vue-router const routerHistory = createWebHistory(); const router = createRouter({ history: routerHistory, routes: [{ path: /, redirect: /home }, { path: /home, component: () => import(@/views/Home) }, { path: /example, component: () => import(@/views/Example) }, ] }) export default router。

18. vuex 数据持久化刷新前，保存到 sessionStorage，刷新后取出存到 vuex（关于 cookie、localStorage、sessionStorage 区别请自行百度了解）// App.tsx 。

setup(){conststore=useStore();onMounted(()=>{window.addEventListener(beforeunload,()=>{sessionStorage

.setItem(“store”,JSON.stringify(store.state));});if(sessionStorage.getItem(store)){store.replaceState

(Object.assign(store.state,JSON.parse(sessionStorage.getItem(store))));}})},19. 使用 KeepAlive 缓存视图组件如果你使用 *.jsx 开发，与原来 *.vue 模板引擎渲染的写法并不相同。

内置组件 | Vue.js ：但我们这里需要引入

// App.tsx import{defineComponent,KeepAlive}from”vue”;import{RouterView}from”vue-router”;exportdefault

defineComponent({name:”App”,render(){return({({Component})=>{return

include={[ServiceList]}>}})}});我们通过 KeepAlive 的 include 去指定我们需要缓存的页面，include 对应我们 createRouter 的 name：

20. KeepAlive 返回原页面回到原位此处省略一大截，直接看到 beforeRouteLeave 和 activated思路：离开页面前保存 scrollTop 值，由于 keep-alive 缓存了整个组件，因此数据不会被刷新，回到该页面后立即执行 activated，此时重新设置 scrollTop。

import{defineComponent,reactive}from”vue”;interfaceIState{scroll?:number;}exportdefaultdefineComponent

({name:”ServiceList”,setup(){conststate=reactive({scroll:0});return{state}},beforeRouteLeave(

to,from,next){this.state.scroll=(this.$refs.serviceListasElement).scrollTop;next();},beforeRouteEnter

(to,from,next){// 从其他地方过来的还是重新查询 next(vm=>{if(!/^\/service\-detail\/[a-zA-Z0-9]+$/.test(from.path)){// @ts-ignore

vm.state.scroll=0;// @ts-ignore vm.state.serviceDate=dayjs();}});},activated(){// @ts-ignore this.$refs

.serviceList.scrollTop=this.state.scroll;},render(){return(

(

)}}>);}});顺便把 JSX 使用插槽的展示在这里

// global component Shell // Shell.tsx import{defineComponent}fromvue;exportdefaultdefineComponent({name

:”Shell”,setup(props,context){return{props}},render(){return<>

{props.title}

{$slots.default

?.()}

;}})21. ESM 导入导出export default function fun(){ … }export function fun(){ … }export type { … } from …

export { … } from …export { default as …, { … } } from …import … from …import { default as …, {} } from …

大概就这些……22. vue3.x composition api在 setup 里面使用22.1 响应式数据ref：单个数据 reactive ：对象import{ref,reactive}fromvue

;interfaceIState{name:string;age:number;}exportdefaultfunctionApp(props,context){letcount=ref

(0);letstate=reactive({name:张三,age:22});return<>;}22.2 routeruseRouterimport{useRouter}from

“vue-router”;exportdefaultfunctionApp(props,context){constrouter=useRouter();return<>;}22.3 storeuseStore

import{useStore}from”vuex”;exportdefaultfunctionApp(props,context){conststore=useStore();return<>;

}22.4 计算属性computedimport{ref,computed}fromvue;exportdefaultfunctionApp(props,context){letfirstVal=ref

(1);letsecondVal=computed(()=>firstVal+1);return<>{secondVal.value};}22.5 监听watchwatchEffect

watchSyncEffectwatchPostEffectimport{ref,watch,watchEffect}fromvue;exportdefaultfunctionApp(props,context

){letval=ref(1);letvalHistory=ref([]);watch(()=>val,(val,preVal)=>{valHistory.push(val);});return

<>{val++}}>点我{valHistory.map(item=>

{item}

)};}22.6 生命周期

import{onMounted}fromvue;exportdefaultfunctionApp(props,context){onMounted(()=>{});return<>;}其余不过多说明，详情可查阅

官方文档

23. Dayjs这玩意是我看到 ant design 用了。删减版 Moment.js，体积要小很多，大部分常用 api 都有。

24. Moment.js

25. vscode：因为在此系统上禁止运行脚本get-ExecutionPolicy set-ExecutionPolicy RemoteSigned

26. 使用 font awesome 426.1 安装yarn add font-awesome26.2 引入// main.js import”font-awesome/css/font-awesome.min.css”

26.3 使用27. lodashLodash 是一个著名的 javascript 原生库，不需要引入其他第三方依赖。

是一个意在提高开发者效率，提高 javascript 原生方法性能的 javascript 库简单的说就是，很多方法 lodash 已经帮你写好了，直接调用就行，不用自己费尽心思去写了，而且可以统一方法的一致性。

Lodash使用了一个简单的 _ 符号，就像 jQuery 的 $ 一样，十分简洁类似的还有 Underscore.js 和 Lazy.js28. i18n 国际化Vue I18n：如果你使用了 Ant Design of Vue（ConfigProvider）：。

29. video.jsVideo.js 是一个为 HTML5 世界从头开始构建的网络视频播放器它支持 HTML5 视频和现代流媒体格式，以及 YouTube、Vimeo 甚至 Flash（通过插件）30. swiper.js

Swiper常用于移动端网站的内容触摸滑动Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！。

31. strapi偶然发现，了解中……Strapi – Open source Node.js Headless CMS 32. vue-apollo：graphql在项目中使用 graphql 接口时，可以使用 Vue Apollo

33. vue 响应式原理

34. 为什么 vue 的 data 是一个函数？vue 组件中的 data 为什么是一个函数vue 组件中的 data 数据都应该是相互隔离，互不影响的，组件每复用一次，data 数据就应该被复制一次，之后，当某一处复用的地方组件内 data 数据被改变时，其他复用地方组件的 data 数据不受影响，就需要通过 data 函数返回一个对象作为组件的状态。

35. vue 的 $nextTick 有什么用？vue 中 this.$nextTick() 的实现和用法在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的DOM。

36. 网页工具36.1 网页版 Photoshop基础编辑功能不收费36.2 png 转 ico在线转换文件，主要是免费还有一个国内的，在线免费转换

36.3 ppt 模板免费 ppt 模板下载36.4 markdown 简历可以免费创建两份简历模板，足够使用了36.5 字体有一些免费的字体可以下载36.6 geojson36.7 bindizip

36.8 toDesk 远程控制36.9 语雀 yuque

36.10 Apipost（接口文档）他们自称比 postman 更好用，我看中的他们可以部署分享接口文档的功能。

36.11 Apifox36.12 天地图36.13 清华大学开源软件镜像站36.14 ECMAScript 新标准

37. npm 版本过低报错：npm ERR! code ERESOLVE在命令后面加上：–legacy-peer-deps

38. vue3.x 定义一个拖拽指令自定义指令 | Vue.jsVue3 自定义指令 | 菜鸟教程import{createApp}fromvueconstapp=createApp({})// 注册

app.directive(my-directive,{// 指令是具有一组生命周期的钩子： // 在绑定元素的 attribute 或事件监听器被应用之前调用 created(){},// 在绑定元素的父组件挂载之前调用

beforeMount(){},// 绑定元素的父组件被挂载时调用 mounted(){},// 在包含组件的 VNode 更新之前调用 beforeUpdate(){},// 在包含组件的 VNode 及其子组件的 VNode 更新之后调用

updated(){},// 在绑定元素的父组件卸载之前调用 beforeUnmount(){},// 卸载绑定元素的父组件时调用 unmounted(){}})// 注册 (功能指令) app.directive

(my-directive,()=>{// 这将被作为 `mounted` 和 `updated` 调用 })// getter, 如果已注册，则返回指令定义 constmyDirective=app.

directive(my-directive)Vue3.x 定义一个拖拽指令面向 fixed 实现拖拽import{createApp}fromvueconstapp=Vue.createApp({})

app.directive(drag,{mounted(el){el.onmousedown=function(e1){// mouse position in this constmouseBoxX=

e1.offsetX;constmouseBoxY=e1.offsetY;document.onmousemove=(e2)=>{constmouseBodyX2=e2.clientX;constmouseBodyY2

=e2.clientY;varx=mouseBodyX2-mouseBoxX;vary=mouseBodyY2-mouseBoxY;const{width,height}=window.getComputedStyle

(el);constcontainerWidth=document.body.clientWidth;constcontainerHeight=document.body.clientHeight;console

.log(width,height,containerWidth,containerHeight);const{x:left,y:top}=getPositionWithBoundary({minX:0

,minY:0,maxX:containerWidth,maxY:containerHeight,X:x,Y:y,width:parseInt(width),height:parseInt(height

),});el.style.left=left+px;el.style.top=top+px;}document.onmouseup=function(){this.onmousemove=this.onmouseup

=null;}}}});functiongetPositionWithBoundary({minX,minY,maxX,maxY,X,Y,width,height}={minX:0,minY:0,maxX

:0,maxY:0,X:0,Y:0,width:0,height:0,},){if(XmaxX)X=maxX-width;if(Y

;if(Y+height>maxY)Y=maxY-height;return{x:X,y:Y,};};39. vue2.x 写一个可拖拽浮窗与38节一样，该拖拽浮窗面向 fixed 使用这是继 React 之后写的（。

带只拖鞋去流浪：WebGIS：OpenLayers 实现弹窗（React））一样的设计思想增加背景透明度调节、双击 header 可进行展示状态切换vue2.x 写一个可拖拽浮窗39.1 属性、插槽、事件说明。

属性类型说明heightprops/Number/500dragBox 高度widthprops/Number/800dragBox 宽度classNameprops/String/””dragBox 类名

stylesprops/Object/{}dragBox 行内样式headerClassNameprops/String/””dragBox header类名headerStylesprops/Object/{}

dragBox haeder行内样式bodyClassNameprops/String/””dragBox body类名bodyStylesprops/Object/{}dragBox body行内样式

titleprops/String/”标题”dragBox 标题titleClassNameprops/String/””dragBox title类名titleStylesprops/Object/{}

dragBox title行内样式backgroundOpacityprops/Number/0.8dragBox 背景透明度actionsslotdragBox header actions（右上角，除了三个默认外）

bodyslotdragBox bodycloseeventdragBox 关闭39.2 how to use

=”search-result”:height=”550″@close=”isShow = false”v-show=”isShow”>

>39.3 源码

drag-box, className, { mini-drag-box: showType === mini, full-drag-box: showType === full,

}, ]”ref=”box”:style=”{ …styles, top: py, left: px, height: `${height}px`,

width: `${width}px`, }”>

iclass=”el-icon-minus action”v-if=”[normal, full].includes(showType)”@click.stop=”showType = mini”>

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！邮箱：cxysz1@tom.com
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
丞旭猿论坛

THE END