2018-7-10杂记

开发工具


1、WebStorm 可以通过Alt+F12打开Terminal

2、WebStrom 里面 Ctrl+Shift+N 按照文件名进行全局搜索

3、VS通过 查看 -> 集成终端查看

4、VS里面可以通过Ctrl+P快速定位到文件

5、按住ctrl再点击可以快速定位到代码引用的位置 

 

命令行


 

1、Ctrl+C 关闭,结束过程,命令终止

2、npm run dev 启动了Vue项目要在Vue项目的根目录下运行该条指令

 

CSS


 1、css 中white-space:normal 文本中的空白会被忽略,其余的选项还有pre,pre-wrap, pre-line,inherit

2、css中的样式的层级最好控制在三层以内,css选择器是从右开始向左匹配的。要尽量减少不必要的匹配。less也是一样的,嵌套会影响性能

3、样式要尽量采用缩写的方式,比如font可以一个属性定义好的,就不要font-size,font-family等等分开写了。

4、减少 * ,标签 ,多层 等选择器的使用

5、css书写的顺序可以按照:布局-》盒子模型-》背景-》行高-》css3(transform等)-》链接[link,visited,hover,active]这种顺序去写,让人看起来比较清楚

6、少使用绝对定位,能用float就使用float。因为在手机端可能会有一些问题

7、在内容太多超出了范围的时候可以用text-overflow:ellipsis进行设置,让多余的部分变成省略号

 

HTML


1、图片要加 alt ,在图片无法显示时的替换文本,增加了用户友好度

2、标题要加title

3、form表单要加label,方便点重

4、引入图标

  <link rel="icon" href="../../../dist/img/basicimgs/favicon.ico" type="image/x-icon">

 

 

JS


1、由于js中的浮点运算存在问题,所以要尽量避免使用浮点运算,避免不了也要尽量减小浮点运算带来的影响,比如放在最后除之类的。 

 

Vue


1、组件(Vue)实例由三部分构成:(1)模板 template (2)样式 style (3)js script 

2、slot就是你在子组件里面写。如果父组件没有slot要覆盖的话就渲染子组件的slot。如果父组件有写的话,就会把子组件的给覆盖掉

3、组件在取名字的时候注意不要和保留的名字冲突了,比如frame 就要换一个名字。

4、在子组件里面定义的插槽的样式是会被覆盖掉的,要写在父组件里面。

5、在这个项目中用到的路由方式是history,要去后台配置一下,Vue.js默认的路由方式是hash 

6、import HelloWorld from '@/components/HelloWorld'  中,@ 这个符号,可以代替一个路径,算是一种别名把。nodejs 会把它自动定位到项目的src的位置

是在webpack.base.conf.js里面的resolve:{……alias:{@……}} 配置的

7、如果项目出问题了可以直接把node_modules 删掉,重新编译,因为这个文件里面放的都是存放项目开饭中的依赖模块。

 

 

性能优化


 1、在切图的时候图片格式保存为web格式,一般来说小图片要尽量保持在30k以内,大图片要保持在100k以内,如果太大,要用压缩软件压缩一下。大图要做成字体库,如果不是色彩很丰富(没有透明度)的图片保存为png8,如果色彩比较丰富(有透明度),要保存为png24,动态图保存为gif格式。

 

 

开发相关


 1、百分比是相对于父元素的,设计稿给的有时候是对于一整个的页面的百分比,这种情况下可以考虑使用vh,vw等视口单位或者rem,可以减少很多换算

 2、如果出现模块的丢失要重新npm install 一下,然后重启项目

 3、关于分页:就是把分页的功能实现,不需要考虑数据。只需要把当前页的需要传递到接收数据的那一层组件,就可以了。之后就可以拿着这个当前页的数据去向后台请求数据了。

 4、如果数据库里面存储的时间格式是string 。里面包含了日期和时间,要怎么把这两个给拆分出来?

    item.create_time.split(" ")[0]//日期
    item.create_time.split(" ")[1]//时间

5、单页面应用和多页面应用的区别:

  https://juejin.im/post/5a0ea4ec6fb9a0450407725c

6、启动多个项目的时候有可能会出现端口号被占用的情况,这个时候就要修改端口号了,修改的地方是在根目录下的config下的index.js里面的port进行修改,因为vue-cli一般默认的端口号是8080 ,所以启动多个项目的时候记得改一下端口号

 

7、 nrm 是一个可以npm源管理器,允许在npm源之间切换,

  nrm install -g nrm 全局安装
  nrm ls 查看源
  nrm use taobao 可以切换到淘宝的源上面去,一般来说taobao的源比较快

posted @ 2018-07-10 21:50  LinQuQu  阅读(125)  评论(0编辑  收藏  举报