Vue3.0经验
先安装cli脚手架,命令如下:123npm install -g @vue/cli$vue -V //使用命令查看cli版本@vue/cli 4.3.1 //当前cli版本
初始化Vue项目,命令如下:123vue create "项目名称" //创建项目>Manully select features //手动选择Babel,Router,Vuex,CSS Pre-processors,Linter / Formatter //选择这些模块
剩下的直接回车
升级项目,命令如下:12cd "项目"vue add vue-next //安装
该命令会完成:·安装Vue3.0依赖·更新Vue3.0 webpack loader配置,使其能够支持 .vue文件构建(重要)·创建Vue3.0 的模板代码·自动升级Vue Router·自动生成Vue Router和Vuex模板代码
启动项目基于ReadMe.md,其中的命令启动项目。
项目过程问题使用composition API的provide和inject实现组件间传值注意!!provide和i ...
Vue源码学习
1.0 如何监听一个对象的变化1.Object.defineProperty方法//ES5中新增->可以自定义getter和setter函数,从而在获取对象属性和设置对象属性的时候能够执行自定义的回调函数。2.对象是个层次的结构,对象的某个属性可能仍是一个对象。123456789let data = { user: { name: "liangshaofeng", age: "24" }, address: { city: "beijing" }};解决方案:如果对象的属性仍然是一个对象,那么使用递归算法,walk函数,继续new一个Observer直到到达最底层的属性位置。实现代码:12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535 ...
函数理解
隐式函数参数:argumentsarguments:不代表数组,允许我们访问传递给函数的所有参数。自带length属性。arguments代表参数的别名,更改对象arguments的值会影响对应的函数参数。arguments在strict模式下无法使用。arguments和参数值不互通(strict模式下)。
函数上下文:thisthis:面向对象编程的重要组成部分。this通常指向定义当前方法的类的实例。函数有四种调用方式:
1234(function):func()直接调用->此模式下调用,this为Windows对象(全局上下文),严格模式下为undefined(method):ninja.func()关联对象,实现面向对象编程(constructor):new ninja()实例化新对象(apply或call):func.apply/call(ninja)
调用的方式不一样,返回的上下文也不一样作为函数被调用:
12345678910function ninja() { return this;}function samurai() { ...
Git和SVN的使用
git和svn的区别123Git是分布式的,SVN是集中式的。Git支持离线工作,SVN必须联网才能正常工作。Git复杂概念多,SVN简单易上手。Git分支是指针指向某次提交,而SVN分支是拷贝的目录,这个特性使Git的分支切换非常迅速,创建成本非常低。Git有本地分支,SVN无。
git核心概念12345工作流:工作区(Workspace)电脑中实际的目录,暂存区(Index)类似于缓存区域,仓库区(Repository)本地仓库和 远程仓库。git add:从工作区提交到暂存区git commit:从暂存区提交到本地仓库git push或git SVN dcommit:从本地仓库提交到远程仓库以下为git命令
git-svn常用命令1234567891011121314# 下载一个 SVN 项目和它的整个代码历史,并初始化为 Git 代码库$ git svn clone -s [repository]# 查看当前版本库情况$ git svn info# 取回远程仓库所有分支的变化$ git svn fetch# 取回远程仓库当前分支的变化,并与本地分支变基合并$ git sv ...
生成器和promise
生成器,promise的使用和原理1234使用try catch的问题:JS依赖于单线程执行模型,在操作结束前,无法渲染数据,用户会不满。解决办法:可以使用回调函数解决这个问题,这样每个数据获取后调用回调函数,不会导致UI渲染暂停。
123456789101112131415161718function* name(){} //在关键字function后面添加星号*定义生成器函数yield "****" //使用yield函数生成独立的值调用生成器会创建一个叫作迭代器的对象,与生成器通信。const nameIterator = name() //调用生成器,得到一个迭代器,控制生成器的执行。const result = nameIterator.next() //next将返回一个对象,包含返回值,以及一个指示器(done值)告诉我们是否还会生成值,返回undefined时代表状态已完成(done:true)每生成一个值后生成器会非阻塞地挂起执行,等待下一个值请求的到达。for-of循环的原理如上,不同于next方法,for-of循环同时还需要 ...
执行上下文到作用域和闭包
再次深入执行上下文全局上下文预定义的对象,可以访问其他所有预定义的对象、函数和属性。在顶层JS中,可以用关键字this引用全局对象(Window对象)。全局对象是由Object构造函数实例化的一个对象。全局上下文中的变量对象(VO)就是全局对象。### 函数上下文AO(activation object,AO)变量对象,变量对象(VO)与活动对象其实是一个东西,当进入到一个执行上下文中,这个上下文的变量对象被激活,所以叫做活动对象,只有活动对象才能被访问。活动对象在进入上下文中通过arguments属性初始化。### 执行上下文执行代码前变量对象包括:1.函数的所有形参由名称和对应值组成的一个变量对象的属性被创建没有实参,属性值设为undefined2.函数声明由名称和对应值(函数对象)组成一个变量对象的属性被创建如果变量对象已经存在相同名称的属性,则完全替换这个属性3.变量声明由名称和对应值(undefined)组成一个变量对象的属性被创建如果变量名称跟已经声明的形式参数或函数相同,则变量声明不会干扰已经存在的这类属性代码执行时会顺序执行代码,根据代码修改变量对象的值### 小结1. ...
PS技术研究
下载CS6版本PS,找PDF图和视频观看学习。1234567891011121314基本操作:选框:各种不同格式选框工具,选择后可以复制图层进行编辑。注意!(各种图片都是由许多图层构成)后期图片细节再做研究。快捷键:Ctrl+Z返回 Ctrl+J复制当前图层 Ctrl+光标 移动当前选定图层Ctrl+T 自由变换快捷键Ctrl+M调整曲线熊猫表情类似制作方法:使用索套工具将面部标签截取并复制图层,后图像->调整->黑白 确定后,调整->曝光度,调整到适应的表情样式,后用橡皮擦把一些无关线条划去。抠图方法之一:使用魔法棒将相同颜色区域选择并删除(适用于背景色单调的图片)图片拼接:使用图层蒙版,然后使用画笔在图层蒙版上划去重叠不一致的样式。换脸:使用索套工具将脸部选择并复制到另一图层,设置颜色,使用橡皮,将流量调低至30左右,擦去不适应的地方,可以调不透明度,微调曲线,选择蓝色通道GIF图制作:需要选择窗口->时间轴 新建帧 每个帧对应的图层不同,调整帧变动的时间,组成GIF。通过图像,画布大小,可以调整背景画布的大小。
Axure原型设计
使用Axure设计相关产品原型,初略交互,查看产品效果在网上寻找相关元件,可以使用,方便设计,并且将一些常用元件保留,可以在Axure里面设置元件库。可以点击上方Group,使个别组件关联。通过设置事件变化和操作,进行简单的交互行为。常用:
on-click:跳转页面set类:设置组件值styleeffect:改变组件样式MouseDown,MouseOver.Selected/Checked:需要Select Group,否则组件单独为一个选择状态。
原型系统设计上遇到的问题考虑到产品合理化,功能的放置和功能点的情况,一些规律和产品思维。取色和资源的获取,对一些常用组件的独自封装。在设计原型时对设计时用的资源进行一些存储和备份,在实现时备用,提高实现效率。需要思考并且讨论产品的需求和产品的合理性,在考虑相对完善的情况下再去动手做,否则大部分都是无用功。美观需要多去参考网页上的一些app的样式,参考人家的产品思维。
Vue开发
This is my vue develop exprience~2020/5/7 16:02 Write过往项目经验总结
关键词:Vue,CSS,SVN,WebPack,IconFont,Flex,Jeecg,Iview,ElementUI
12345678使用Vue开发页面,环境配置,导入包,Package,使用IView组件进行页面开发。(使用开源组件一定需要查看开发文档!!!!!!)CSS排版布局,flex学习并使用,各种定位的深入了解。router路由在Vue当中的使用,熟练使用组件进行开发。熟练使用SVN进行提交和更新代码,提交需要带钩子,如果本地有更改过的文件,在更新时需要将有改动的文件删除再更新,否则会出现乱码父子组件间的传值通信,Props的使用,对话框的熟练使用。分析需求并设计页面,使用Axure进行页面的设计,使用开源的移动端组件和阿里的IconFont,必要时可以自行设计组件。熟悉WebPack框架和Cli脚手架。
1234使用ant-design-jeecg-vue进行开发,代码自动生成。文档链接:[jeecg开发文档]("ht ...
Web前端性能优化-页面加载
Web前端性能优化的方式1.减少HTTP请求1一个页面80%~90%的时间花在了下载页面中的所有组件进行的HTTP请求上。因此,改善响应时间最简单的途径就是减少HTTP请求的数量。
2.将样式表放在头部12将样式表放在头部对于实际页面加载的时间影响不大,但是这会减少页面首屏出现的时间,使页面内容逐步呈现,改善用户体验,放置“白屏”。将样式表放在文档底部会阻止浏览器中的内容逐步出现,为了避免当样式变化时重绘页面元素,浏览器会阻塞内容逐步呈现,造成“白屏”。这源自浏览器的行为,如果样式表仍在加载,构建呈现树就是一种浪费,因为所有样式表加载解析完毕之前无需绘制任何东西。
3.将脚本放在底部123跟样式表相同,脚本放在底部对于实际页面加载的数据影响不大。JS的下载和执行会阻塞DOM树的构建,所以script放在首屏范围内的HTML代码段里会截断首屏的内容。下载脚本时并下载是禁用的——即使使用了不同的主机名,也不会启用其他的下载。因为脚本可能修改页面内容,因此浏览器会等待;另外也是为了保证脚本能够按照正确的顺序执行,因为后面的脚本可能与前面的脚本存在依赖关系,不按照顺序执行可能会产生错误。
4. ...