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的源比较快