记一次vue实战项目学习总结

项目准备

1. 使用reset.css重置样式已达到多浏览器统一
2. 若是是手机端，会有一像素边框的问题，即高分辨率屏幕border: 1px solid #000会出现实际显示为2px或3px，适用基于::before&::after伪类实现的border.css
3. 图标元素用阿里巴巴的iconfont库解决
4. 使用fastClick插件解决移动端300毫秒点击延迟
5. 配置webpack.config文件的resolve来简化文件路径
6. style文件的添加config文件来设定全局主题（具体看css是用的什么）
7. 初始化文件目录 主要页面归类page文件夹，全局组件放common

开发阶段

vue-router

• 在router-view外面嵌套keep-alive可让路由被缓存，每次进入不会从新建立页面，也就是说不会重复调用mounted生命钩子，做为代替会额外触发activated生命钩子，因为跳出后页面会被缓存，须要刷新信息的时候用
• 若是须要单独设置页面不被缓存，能够在keep-alive标签上添加属性，exclude=""
• router-link不仅仅会被解释成<a>标签，经过添加tag属性能够指定能够被解释成其余标签类型<router-link tag="div"
• 在router路由配置文件中，若是把component写成函数返回路径的模式能够获得异步的路由component: () => import('<path>')（还有另一种，详见文档）,异步路由能够减小首页加载的文件大小，可是会有额外的http请求，因此在首屏速度和请求数量须要根据实际来取舍
• vue-router切换页面时会继承上个页面的页面滚动位置，在router根文件添加如下代码能够重置位置

scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
    // 页面切换时 回到原点 只对hash模式起效
 }
复制代码

• 动态路由的:xxx部分在this.$route.params下，不是在this.$router.params下，中这个招的可能只有我了QuQ

vuex

• 能够跳过action直接调用mutations，仅仅在同步方法下适用，异步数据操做老老实实用active
• 可使用辅助函数mapState(),mapActions(),mapMutations()减小重复代码输入

杂项

• 动画效果能够经过单独嵌套全局动画组件，Vue会在组件进入脱出的合适时机个组件添加className
• vue-awesome-swiper 使用在手机端（android??）点击事件失效，用的时候会阻止touch事件的锅，在new Bscroll(this.$refs.wrapper)的第二个参数传入配置对象{ mouseWheel: true, click: true, tap: true }就好了
• css属性中默认height的百分比值并不能有效的被计算，由于html的高度能够近乎无限，如何设置宽高等比的元素？可使用overflow: hidden; padding-bottom: 30%的方式来设置等比元素
• stylus中可使用 .select >>> .childSelect能够穿透去影响全局样式（慎用）
• static文件能够被直接访问而不会发生被vue-router跳转，适合放置mock文件，在webpack下proxyTable设置相关路由劫持到指定路径,好比

proxyTable: {
      '/api': {
        target: 'http://localhost:8080',
        pathRewrite: {
          '^/api': '/static/mock'
        }
      }
    },
复制代码

调试

真机调试

• 在package.json文件下的scripts中dev（就是开发环境的命令行）中加入 --host 0.0.0.0开启局域网模式
• 经过终端输入ipconfig(mac是ifconfig)获得主机ip地址，使手机与电脑处于同一网络下（通俗点就是同一个WiFi下）,输入ip地址+端口号便可

打包

• 运行build打包的dist文件默认路径是'/',若是须要修改打包路径，在build配置项中有assetsPudlicPath:'<path>'能够作相关配置

相关项目代码

Trevel