vue2.0 项目开发小结

正文

├── build
├── config
├── dist
│   └── static
│       ├── css
│       ├── fonts
│       ├── images
│       ├── js
│       └── lib
├── src
│   ├── api
│   ├── assets
│   │   ├── global
│   │   └── images
│   │       └── footer
│   ├── components
│   │   ├── common
│   │   ├── news
│   │   └── profile
│   │       └── charge
│   ├── config
│   ├── mixin
│   ├── router
│   ├── service
│   ├── store
│   └── util
└── static
    ├── images




    
    └── lib 

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const router = new Router({
  mode: 'history',
  routes: [
    { path: '/', component: Index, meta: { title: '推荐产品得丰厚奖金' } },
    {
      path: '/news',
      component: 




    
News,
      meta: { title: '公告列表' },
      children: [
        { path: '', redirect: 'list' },
        { path: 'list', component: NewsList },
        { path: 'detail/:newsId', component: NewsDetail, meta: { title: '公告详情' } }
      ]
    },
    {
      path: '/guide',
      component: GuideProtocol,
      meta: {
        title: '新手指南'
      }
    }
  ]
});




    
router.beforeEach((to, from, next) => {
  let documentTitle = '商城会员平台';
  // path 是多级的，遍历
  to.matched.forEach((path) => {
    if (path.meta.title) {
      documentTitle += ` - ${path.meta.title}`;
    }
  });
  document.title = documentTitle;




    
  next();
});

beforeEnter: (to, from, next) => {
    const userInfo = localStorage.getItem(userFlag);
    if




    
 (isPrivateMode()) {
        EventBus.$emit('get-localdata-error');
        next(false);
        return;
    }
})

EventBus.$on('get-localdata-error', () => {
    this.$alert('请勿使用无痕模式浏览');




    
});

// 坑位埋点指令
Vue.directive('stat', {
  bind(el, binding) {
    el.addEventListener('click', () => {
      const data = binding.value;
      




    
let prefix = 'store';
      if (OS.isAndroid || OS.isPhone) {
        prefix = 'mall';
      }
      analytics.request({
        ty: `${prefix}_${data.type}`,
        dc: data.desc || ''
      }, 'n');
    }, false);
  }




    
});

Vue.filter('money', (value, config = { unit: '￥', fixed: 2 }) => {
  const moneyStr = `${value}`;




    
  if (moneyStr.indexOf('-') > -1) {
    const scope = moneyStr.split('-');
    return `${config.unit}${parseFloat(scope[0]).toFixed(config.fixed).toString()} 起`;
  } else if (value === 0) {
    return value;
  }
  return 




    
`${config.unit}${parseFloat(moneyStr).toFixed(config.fixed).toString()}`;
});

 class="price">{{detail.priceScope | money}}
 :class="{singleWrapper: isMobile}">
    
 




    
class="rate">比率：{{detail.commissionRateScope}}%
    
 class="income">奖金：{{detail.expectedIncome | money}}

axios 使用配置

在项目中，我们使用了 axios 做接口请求

在项目中全局配置 /api/common.js

import axios from 'axios';




    
import qs from 'qs';
import store from '../store';
// 全局默认配置
// 设置 POST 请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 配置 CORS 跨域
axios.defaults.withCredentials = 




    
true;
axios.defaults.crossDomain = true;
// 请求发起前拦截器
axios.interceptors.request.use((config) => {
  // 全局 loading 状态，触发 loading 效果
  store.dispatch('updateLoadingStatus', {
    isLoading: 




    
true
  });
  // POST 请求参数处理成 axios post 方法所需的格式
  if (config.method === 'post') {
    config.data = qs.stringify(config.data);
  }




    
  // 这句不能省，不然后面的请求就无法成功发起，因为读不到配置参数
  return config;
}, () => {
  // 异常处理
  store.dispatch(




    
'updateLoadingStatus', {
    isLoading: false
  });
});
// 响应拦截




    
axios.interceptors.response.use((response) => {
  // 关闭 loading 效果
  store.dispatch('updateLoadingStatus', {
    isLoading: false
  });




    
  // 全局登录过滤，如果没有登录，直接跳转到登录 URL
  if (response.data.code === 300) {
    // 未登录
    window.location.href = getLoginUrl();




    
    return false;
  }
  // 这里返回的 response.data 是被 axios 包装过的一成，所以在这里抽取出来
  




    
return response.data;
}, (error) => {
  store.dispatch('updateLoadingStatus', {
    isLoading: false
  });




    
  return Promise.reject(error);
});
// 导出
export




    
 default axios;

然后我们在接口中使用就方便很多了 /api/xxx.js

import axios from './common';
const




    
 baseURL = '/api/profile';
const USER_BASE_INFO = `${baseURL}/getUserBaseInfo.json`;
const UPDATE_USER_INFO = `${baseURL}/saveUserInfo.json`;





    
// 更新用户实名认证信息
const updateUserInfo = userinfo => axios.post(UPDATE_USER_INFO, userinfo);
// 获取用户基础信息




    
const getUserBaseInfo = () => axios.get(USER_BASE_INFO);

vuex 状态在响应式页面中的妙用

由于项目是响应式页面，PC 端和移动端在表现成有很多不一致的地方，有时候单单通过 CSS 无法实现交互，这个时候，我们的 vuex 状态就派上用场了，

我们一开始在 App.vue 里面监听了页面的 resize 事件，动态的更新 vuex 里面 isMobile 的状态值

window.onresize = throttle(() => {
 this.updatePlatformStatus({
   isMobile: isMobile()




    
 });
}, 500);

然后，我们在组件层，就能响应式的渲染不同的 dom 结构了。其中最常见的是 PC 端和移动端加载的图片需要不同的规格的，这个时候我们可以这个做

methods: {
  loadImgAssets(name, suffix = '.jpg') {
    return 




    
require(`../assets/images/${name}${this.isMobile ? '-mobile' : ''}${suffix}`);
  },
}
class




    
="feed-back" :src="loadImgAssets('feed-back')"
"{src: isMobile ? detail.imgUrlMobile : detail.imgUrlPc, loading: placeholder}">
// 动态渲染不同规格的 dislog

请到「今天看啥」查看全文