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=“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’,
compo