1. 完成资源整合+项目（目录）结构设计+mock数据引用
- 完成的svg文件要生成字体icon文件可以上icomoon.io
click app> choose your icon > download your iconfont(you can setting your preferences)简单操作获得icon 的font文件 - src 文件下common文件可以放置一些公共资源，好比fonts文件与style文件（有预处器按照需处理器来命名）
- mock 的本地数据引用，在bulid文件中dev-server里进行设置，利用express设置接口文件，然后通过app.use(/api)，将api放在一起。然后在/api/设置的data 中可以看到相应的json文件，google有个jsonview的插件可以帮忙json排版。
- npm run dev 后如果修改的是node的文件要重新run dev才行
- reset.css文件可以放置在static然后通过index进行引入
- 依据设备设置meta 移动端配置（缩放等）
2. 骨架搭建
- 写css样式的时候，node-module中的postcss会帮忙解决一些兼容性问题。
- vue-router的使用
- 简化路径可以在base-config中的resolve，设置alias
- router.push 可以指定首页登录router-view的地址4
- 手机测试可以在cli.im网站上将域名转化成二维码形式进行测试
notice
- 出现空白字符（span之间有空格时）可以设置font-size为0,子项记得设置fsz不然继承父项的0了，会显示空白
- 只能在针对JS库设计路径，对stylus等css不行
- 对背景图ICON等于文字不对齐 可以使用vertical-align:top 使得两者对齐
- 模糊背景可以添加一个div包裹img,div设置filter: blur(10px),再其父元素还可以设置一个透明背景background-color :rgba(x,x,x,0.5)效果更好一些
- 弹出浮层的设置可以是fixed以及z-index设置大于0
- v-show绑定一个变量，true显示，false隐藏
-
sticky footer https://www.w3cplus.com/css3/css-secrets/sticky-footers.html
一般套路是： 设计一个容器(需要清除浮动)和相同级的footer
容器最小高度是屏幕高度也就是100% - 定义变量或常量对以后调整有帮助
- 去0.5的小数的办法Math.floor(score*2)/2 无论score原本怎样，若有小数只能是0.5的v-
- 父组件能通过v-bind传送props设置的数据
- 两边自适应，中间居中布局（fiex布局,在VUE中使用了postCss工具可以使其兼容多种浏览器参考** caniuse.com**）
- 背景模糊的IOS（backdrop: blur(10px)）
- 垂直居中（display:table的应用）
- img标签有宽高直接写在标签中比较好，不用写计量单位
- better-scroll 使用的方法是绑定DOM，依据DOM结构渲染高度，所以数据要先传入在进行高度计算，可以使用Vue.$nextTick解决
- 实现两滚动栏高度绑定，可以将一栏的分区高度值计算后保存到数组，在调用数据数值，这样就不用反复计算高度值了。
- 如果只是为了让JS获取样式而无实际效果，可以选择统一的Class名后缀好比-hook
利用Vue的computed属性可以更好的处理 - router-view也是可以传递数据给组件的 利用 :名称=“数据JSON” 就是利用了v-bind
- 引入Vue，使用Vue.set(对象，属性名，属性值)
- 给有动画属性的标签添加 transform：translate3D(0,0,0)可以使得动画更流畅
- 在容器中给图片设置100%宽度，高度与宽度相同：可以设置height:0然后padding-bottom: 100%,W3C标准中padding百分比值是按照宽度进行计算的
- 简单的组件数据传递可以使用$on,$refs,$emit:复杂的用Vuex
- better-scroll使用的时候是依据DOM来渲染，所以DOM发生变化的时候就要刷新scroll,可以使用其refresh()的方法，配合$nextTick()来使用，可以等到DOM变化完成在进行完善的渲染滚动
24.给原来有的Obj添加新的属性可以使用Object.assign()，在Vue中要想使其新的属性得到相应，应创建一个新的对象，让它包含原对象的属性和新的属性
https://cn.vuejs.org/v2/guide/reactivity.html#%E5%8F%98%E5%8C%96%E6%A3%80%E6%B5%8B%E9%97%AE%E9%A2%98
25.<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们,这样就能实现在浏览别的组件的时候切回数据还是不变。保持状态
3. 项目编译
了解webpack配置
npm run build
- 有时候编译错误会告诉错误文件，而真正错的可能是这个文件所引入的某个文件，可以分开测试
- 其中一次错误是显示Module build failed: ModuleBuildError: Module build failed: Error: Unexpected "space" found.
然而index.styl文件没问题，而是引入的base文件中 &: after (a与:之间有空格)导致错误
网友评论