vue常见项目bug整理
常见项目bug整理项目工程化vuex的使用1.在src文件下建 store文件 index.js 存放仓库数据2.在main.js中 import 导入该文件,并在vue实例中添加storeeg:import store from ‘./store’new Vue({el: ‘#app’,router,store,components: { App },template: ...
常见项目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=“
r
o
u
t
e
.
m
e
t
a
.
n
a
v
S
h
o
w
=
=
u
n
d
e
f
i
n
e
d
∣
∣
route.meta.navShow==undefined||
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切换
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
更多推荐
所有评论(0)