vue常见项目bug整理

常见项目bug整理
项目工程化

vuex的使用

1.在src文件下建 store文件 index.js 存放仓库数据
2.在main.js中 import 导入该文件，并在vue实例中添加store

eg:
import store from ‘./store’

new Vue({
el: ‘#app’,
router,
store,
components: { App },
template: ‘’
})
具体实现参考store

编程路由的使用

。。。。

字体自适应

方式1: 样式中可以使用px，将px转成rem
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘resize’,
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + ‘px’;
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener(‘DOMContentLoaded’, recalc, false);
})(document, window);

方式2：使用lib-flexible 插件 结合 postcss-px2rem 插件，如果需要兼容第三方UI框架（如果设计稿和UI设计稿一致则不用换插件，如果不一致，用 postcss-px2rem-exclude替换 postcss-px2rem插件）

常用逻辑语句

1.控制结构的显示与隐藏
1）通过vuex中的数据控制结构的显示与隐藏
v-if=“this.$store.state.username==’’?!show:show”
在data数据中设置 show的值（true,false）

2）通过路由中的信息控制显示与隐藏

v-show=“$route.meta.navShow==undefined||$route.meta.navShow”
在router文件下 index.js 中的路由规则中添加 meta:{navShow:false}

eg:
{ //我的积分
path:’/integral’,
name: ‘integral’,
component: Integral,
meta:{navShow:false}
}

3）实现toggle切换

hello world

2.vue中设置背景图的bug

用数据绑定的形式，解决
https://blog.csdn.net/qq_35393869/article/details/80333564

https://blog.csdn.net/Fiona_lms/article/details/79872981

3.背景色渐变兼容
background: -webkit-linear-gradient(
left,
#e1be6c,
#cfa34c
); /* Safari 5.1 - 6.0 /
background: -o-linear-gradient(
right,
#dab35f,
#cfa34c
); / Opera 11.1 - 12.0 /
background: -moz-linear-gradient(
right,
#dab35f,
#cfa34c
); / Firefox 3.6 - 15 /
background: linear-gradient(to right, #dab35f, #cfa34c); / 标准的语法 */

5.git 克隆指定分支

第一种方法：
git clone xxx(git项目地址)
git checkout -b xx(分支名)

第二种方法：
git clone -b 分支名 克隆地址

git clone -b fetch-ji http://git.sc1.site/html/vue-laiwangdianshang.git

6.vue中代理的设置
vue-cli2.x如下：
proxyTable:{ //代理
‘/’:{
target:‘http://localhost:3000’, // 接口的域名
changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
}
}
设置完之后，需要重新运行程序
vue-cli3.x 如下：
如果项目下没有vue.config.js 需要建个 vue.config.js 文件

devServer: {
    host: 'localhost',
    port: 8080, // 端口号
    open: false, // 配置自动启动浏览器
    proxy: {
      '/api': {
        target: 'https://001.ruer.coboriel.com',  //需要代理的地址
        ws: true,
        changeOrigin: true,
        pathRewrite: {  //重写
          '^/api': '/'
        }
      }
    }
  },

7.vue 中better-scroll实现横向滚动：

https://blog.csdn.net/tjzc1352640/article/details/78429789

https://blog.csdn.net/github_38861674/article/details/76597031

8.axios同时发送多个请求

axios.all([
      axios.get('/products',{params:{level:1}}),
      axios.get('/goods/6',{params:{page:1}})
    ])
      .then(axios.spread(function (proResp, goodsResp) {

        // 上面两个请求都完成后，才执行这个回调方法
        console.log('products', proResp.data);
        console.log('goods', goodsResp.data);

      }));

9.vue-cli 项目中使用高德地图

在assets 文件夹 下建立一个js文件，建AMap.js 其中代码如下：
export default function MapLoader () {
return new Promise((resolve, reject) => {
if (window.AMap) {
resolve(window.AMap)
} else {
var script = document.createElement(‘script’)
script.type = ‘text/javascript’
script.async = true
script.src =
‘http://webapi.amap.com/maps?v=1.4.11&callback=initAMap&key=d45b1b9913f0ae76fe3f0a352ed71994’
script.onerror = reject
document.head.appendChild(script)
}
window.initAMap = () => {
resolve(window.AMap)
}
})
}

在需要使用的.vue文件中
1）导入：
import MapLoader from ‘@/assets/js/AMap.js’

2）在方法中使用，（此以mounted为例）
let that = this
MapLoader().then(AMap => {
console.log(‘地图加载成功’)
that.map = new AMap.Map(‘container’, {
zoom:11,//级别
center: [116.397428, 39.90923],//中心点坐标
viewMode:‘3D’//使用3D视图
})
}, e => {
console.log(‘地图加载失败’ ,e)
})

3）在需要展示地图的地方添加：

用来存储地图

10.vue 项目中去掉url默认的锚点

参考：https://blog.csdn.net/wxl1555/article/details/81170427
只需在router初始化时，设置mode为history即可：mode: ‘history’

11.一个页面同时展示多个组件

对于app.vue总组件来说有两种方式

第一种方式：

GuestLike的组件模块需要先导入
对应的路由为：
{
path: ‘/’,
name: ‘home’,
components: {
default:home,
guestLike:GuestLike
},
},
第二种方式：
footGui需要先导入
在对应的组件中

components:{
‘app-footGui’ : footGui,
// ‘guest-Like’:GuestLike
},

如果一个页面加载多个组件（不需要时间触发）
只能用上方的第二种方式：
先导入对应模块：
import GuestLike from ‘@/page/guestLike/guestLike’

在组件中添加：
components:{
‘guest-Like’:GuestLike
}
在需要使用的地方：
作为容器

12. axios 的封装

import axios from 'axios'
import { getToken } from './auth'
import { Toast } from 'vant'
const baseUrl = '/api' // 基础路径
// 创建axios实例
const http = axios.create({
  baseURL: baseUrl, // api的base_url
  timeout: 15000 // 请求超时时间
})

// http request 拦截器
http.interceptors.request.use(config => {
  config.headers = {
    'content-type': 'application/json',
    // 'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
    'refreshToken': getToken()
  }
  return config
},
error => {
  return Promise.reject(error)
}
)

// http response 拦截器
http.interceptors.response.use(response => {
  if (response.data.result === 0) {
    Toast({
      message: response.data.message,
      type: 'warning',
      duration: 1000
    })
    return
  }
  if (response.data.result === 2) {
    localStorage.removeItem('token')
    Toast({
      message: response.data.message,
      type: 'warning',
      duration: 1000
    })
    // console.log(reUrl)
    location.href = 'https://weixing.coboriel.com/sos/admin'
    // alert(location.href)
  }
  return response.data
},
error => {
  alert('err')
  return Promise.reject(error)
}
)

export default http

13.vue 中实现横向弹性滚动

better-scroll

14. axios

axios delete请求 参数

如果服务端将参数当做 java对象来封装接收则 参数格式为：{data: param}
var param={name:‘jack’,age:20}
axios
.delete("/ehrReferralObjPro", {data: param})
.then(function(response) {
}

如果服务端将参数当做url 参数 接收，则格式为：{params: param}，这样发送的url将变为http:www.XXX.com?a=…&b=…

var param={name:‘jack’,age:20}
axios
.delete("/ehrReferralObjPro", {params: param})
.then(function(response) {
}

15.vue 中methods 方法相互调用

this.$options.methods.modifysex.bind(this)();
methods 后跟的是需要使用的方法名，（原理改变this指向）

参考地址：https://www.jb51.net/article/146540.htm

16.vue中吸顶事件的实现

参考地址：https://www.jianshu.com/p/6f5f6b6c6580

17.vue中设置路由拦截

https://www.cnblogs.com/guoxianglei/p/7084506.html *

18.代理和拦截器

https://blog.csdn.net/u012369271/article/details/72848102/ *

https://www.jianshu.com/p/31f52aade33d

路由拦截，当一些页面需要登录的情况下才可以查看，或者不同用户有不同对应不同展示页面

实现方式： 参考地址：https://www.cnblogs.com/guoxianglei/p/7084506.html
1）在router下的index.js中
route规则中
meta:{
requireAuth: true, //添加该字段，表示进入这个路由是需要登录的
}

规则下方添加
router.beforeEach((to, from, next) => {
if (to.matched.some(res => res.meta.requireAuth)) {// 判断是否需要登录
if (localStorage.getItem(‘user’)) {// 判断是否登录
next()
} else {// 没登录则跳转到登录界面
next({
path: ‘/Login’,
query: {redirect: to.fullPath}
})
}

} else {
next()
}
})

即可实现路由拦截

2）拦截器待学习

19.加快首页加载时间：

https://segmentfault.com/a/1190000011602774?utm_source=tag-newest

就是用了懒加载后打完包直接运行那个index.html会报错，报文件引用错误其实是打包时候路径配置有点问题修改下就好了
解决方案：http://www.cnblogs.com/lijuntao/p/7777581.html

20.组件按需加载：

参考地址：
https://segmentfault.com/a/1190000011426274?utm_source=tag-newest

https://blog.csdn.net/qq_30227429/article/details/75246433

21.图片懒加载：https://blog.csdn.net/wandoumm/article/details/80167607