基于vue的webapp注意事项

基于vue的webapp注意事项

编写简洁漂亮,可维护性高的vue代码
目录

前言
目录命名
全局方法和组件的扩展
Props 非空检测
手动挂载mount()
webapp添加FastClick
scrollBehavior滚动行为
配置应用所需的rem.js

前言
前端框架的普及和标准的混乱很难确定出一套规范,各企业也都随着项目制定自己技术团队所认可的标准和规范,本指南旨在vue本身的标准及eslint之外建立的符合团队认可的一套标准规范,以增加代码一致性和可读性,降低维护成本。
目录命名
基于vue-cli规范src目录的统一性,使目录的可读性更高。
├── src // 源代码
│ ├── api // 接口请求函数
│ ├── components // 项目公用组件及展示组件
│ ├── utils // 功能函数
│ ├── containers // 路由对应的组件(容器组件)
│ ├── router // 项目路由信息
│ ├── store // vuex数据
│ ├── style // css or sass
│ ├── images // 图片资源
│ ├── main.js //项目入口文件

全局方法和组件的扩展
为实现各组件中调用公用方法的便利故使用以下方式进行全局方法和组件的扩展
// utils/tools.js
import fetcher from './fetcher'
import message from '@/base/tips'
export default {
install (Vue) {
Object.defineProperty(Vue.prototype, '$http', {
enumerable: false,
configurable: false,
writable: false,
value: fetcher
})
Object.defineProperty(Vue.prototype, '$message', {
enumerable: false,
configurable: false,
writable: false,
value: message
})
}
}

// main.js
import tools from '@/utils/tools'
Vue.use(tools)

Vue.prototype.$http方式会导致在组件中误操作写入后续访问出问题,故使用Object.defineProperty设置属性的配置项
非空检测
对于props 必须对应设置 isRequired,避免再增加 if 分支带来的负担
假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载
new Vue({
router,
store,
}).$mount('#app');

webapp添加FastClick
document.addEventListener('DOMContentLoaded', () => {
FastClick.attach(document.body);
}, false);

当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置使用scrollBehavior记录滚动行为
const router = new VueRouter({
routes,
mode: 'hash',
scrollBehavior(to, from, savedPosition) {
const copyFrom = from;
let position = null;
if (savedPosition) {
position = savedPosition;
}

    if (from.meta.keepAlive) {
        copyFrom.meta.savedPosition = document.body.scrollTop;
        position = { x: 0, y: to.meta.savedPosition || 0 };
    }

    return position;
},

});

配置应用所需的rem.js
/**

  • 获取当前屏幕宽度
    */
    export const getScreenWidth = () => document.documentElement.clientWidth;
    /**
  • 得到当前屏幕的 rem 数值
  • @return {number} 当前屏幕的 rem 数值
    /
    export const getRem = () => 100
    (getScreenWidth() / 1000);

// eslint-disable-next-line
(function (doc, win) {
const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
const recalc = () => {
const docEl = document.documentElement;
const clientWidth = getScreenWidth();
if (!clientWidth) return;
docEl.style.fontSize = ${getRem()}px;
};

if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值