vue项目笔记

打包后css、js和img路径错误

css和js文件路径错误

背景图路径错误

利用vuex-persistedstate插件实现vuex的数据持久化

Vuex持久化插件-解决刷新数据消失的问题

将后台传过来的 json 数组里面的 name 换成 text

this.columns = JSON.parse(JSON.stringify(res.data.data.data).replace(/r_name/g,'text'))
// res.data.data.data 是需要替换的对象数组
// r_name 是替换前的
// text 是替换后的

点击选择器禁止键盘弹出

forbidKeyboard(){
    document.activeElement.blur();
},

position:fixed;在android下无效怎么处理？

怎么让Chrome支持小于12px 的文字？

p{font-size:10px;-webkit-transform:scale(0.8);}

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。

1px border 问题

对于老项目，有没有什么办法能兼容1px的尴尬问题了，个人认为伪类+transform是比较完美的方法了。原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。

单条border样式设置：

.scale-1px{
position: relative;
border:none;
}
.scale-1px:after{
content: '';
position: absolute;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}

按需引入

图片懒加载

如何给spa中一个单独的组件设置背景色

给SPA的每个页面加title

main.js

router.beforeEach((to,from,next)=>{
  // 为页面添加标题
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

router.js 中给每个路由下添加一个meta 对象，内部加入 title。

import Vue from 'vue'
import Router from 'vue-router'


Vue.use(Router)

function loadView(view) {
  return () => import(/* webpackChunkName: "view-[request]" */ `@/components/${view}.vue`)
}

export default new Router({
  mode: 'history',
  base: 'view',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: loadView('HelloWorld'),
      meta:{
        index:2,
        auth:true,
        title:'用户中心'
      }
    },
    {
      path: '/addCarInfo',
      name: 'AddCarInfo',
      component: loadView('AddCarInfo'),
      meta:{
        index:3,
        auth:true,
        title:'绑定车辆信息'
      }
    },
  ]
})

class 内写三元运算符

  
{{item.plate_number}}

// carnum是无需判断，直接作用在 li 上面
// carNumBgBlueGreen 和 carNumBgBlue 直接使用 style 中的类名

替换对象数组内的键值key

columns = JSON.parse(JSON.stringify(res.data.data.data).replace(/r_name/g,'text'))
// res.data.data.data是被替换的对象，把  name 换成 text

对象数组查重方法

          unique(arr){
                let unique = {};
                arr.forEach(function(item){
                    unique[JSON.stringify(item)]=item;//键名不会重复
                })
                arr = Object.keys(unique).map(function(u){ 
                //Object.keys()返回对象的所有键值组成的数组，map方法是一个遍历方法，
                //返回遍历结果组成的数组.将unique对象的键名还原成对象数组
                    return JSON.parse(u);
                })
                return arr;
            }

sprite.png