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

最新推荐文章于 2024-07-26 20:46:33 发布

weixin_34381666

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量847

点赞数

文章标签： javascript java webpack ViewUI

原文链接：https://juejin.im/post/5c77eaf351882540c82448a6

版权

项目准备

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