前端日记

#水平垂直居中布局：

  flex弹性布局，table-cell布局(父级table)，定位(多种方式);

#如何安装vuecli脚手架2.0和3.0去呗

  先安装node环境(8.9以上使用vue cli3.0),再全局安装vue-cli,如果是vuecli3.0的话,安装@vue/cli.然后vue create projectName

#vue脚手架目录结构详情

  vuecli2.0 ==>常用方式

    build config dist src static eslintrc.js postcssrc.js package.json

  vuecli3.0

    public 静态资源

    src 开发源文件(入口,路由,状态管理器,静态资源,组件,视图,挂载主页)

    eslintrc.js

    gitignore

    postcssrc.js

    babel.config.js

    package.json

#package.json的配置

  dependencies -开发及运行,生成时均需要的依赖

  devDependencies -开发时需要的依赖(主要是二次编译的一些工具)

#import和require的区别

  1.import 是es6标准汇总的模块化解决方案,require是node中遵循commonjs规范的模块解决方案

  2.后者支持动态引入,就是require的内容可以是赋值变量,前者不支持,但是已有提案

  3.前者是编译时加载,必须在模块的顶部,在性能上会比后者好一些,后者是运行时的加载,理论上来说放在哪里都可以

  5.前者采用的是实时绑定的方式,即导入和导出的值都是指向同一内存地址,所以导入值也会随导出值变化.而后者在导出是是这拷贝,就算导出的值变化了,导入的值也不会变化,如果想要更新值就需要重新导入

  6.前者编译后会以require/exports来执行

#vw和rem原理

  移动端适配可以用rem,选择淘宝出的解决方案(flexible),解决在手机上的适配问题.比如你在手机设置的像素,会因为不同的设备像素比,导致盒子在页面上留白或者出滚动条.rem是通过动态设置rem和px之间的映射关系实现的.(比如750px设计稿上,你把根元素设置font-size设为75px,那么你下面的需要适配的元素,相对大小就是原始大小除以75px,可以用sass和less里的预函数去处理这个问题)

#webpack安装less和scss需要哪些依赖

  less:css-loader,less-loader,style-loader

  sass:sass-loader依赖于node-sass,style-loader,css-loader.