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

·  阅读 285

项目准备

  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文件,在webpackproxyTable设置相关路由劫持到指定路径,比如
 proxyTable: {
      '/api': {
        target: 'http://localhost:8080',
        pathRewrite: {
          '^/api': '/static/mock'
        }
      }
    },
复制代码

调试

真机调试

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

打包

  • 运行build打包的dist文件默认路径是'/',如果需要修改打包路径,在build配置项中有assetsPudlicPath:'<path>'可以做相关配置

相关项目代码

Trevel

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改