Vue脚手架优化

作者: f275edb871f8 | 来源:发表于2016-10-25 19:51 被阅读171次

记录脚手架搭建之后一些优化,包括结构、代码、易用性

1 vue.js 引用组件方式优化

vue.js 引用组件需要先注册后使用,容易忘记。
优化思路: 可以提前全局引入

import * as components from 'components';
export default (function() {
  var DEF_DATA = {};
  return {
    data() {
      return {
        // loading:  false,
        // error:''
      }
    },
    components: components
})()

2 发送请求全局添加参数,响应全局监听错误

移动端每个请求都需要携带idbid userid之类的信息,这些信息是app登录这的基本信息,如果每次发请求都要加上这些参数是非常蛋疼的事情

globelConfig() {
        var self = this;
        // 全局http请求配置
        Vue.http.interceptors.push({
          request: function(request) {
            self.loading = true;
            request.params.dbid = self.user.eid
            request.params.openId = request.params.openId || self.user.openId
            // console.log(request)
            Object.assign(request.data, {
              dbid: self.user.eid,
              openId: request.data.openId || self.user.openId
            })
            return request;
          },
          response: function(response) {
            self.loading = false;
            if (!response.ok) {
              // 系统级别的错误
              self.error = response.statusText;
            } else {
              // 业务级别的错误
              var status = response.data.status
              var msg = response.data.msg
              switch (status) {
                case 200 : return response;
                default :
                  if (response.data.errcode === 0) {
                    // 云盘的接口这里不会返回200 ,反而是errcode
                    return response;
                  }
                  self.error = msg || '未知的系统错误';
                  break;
              }
            }
            return response;
          }
        });
      }

相关文章

  • Vue脚手架优化

    记录脚手架搭建之后一些优化,包括结构、代码、易用性 1 vue.js 引用组件方式优化 vue.js 引用组件需要...

  • Vue脚手架: vue-cli@3.0.5

    Vue脚手架vue-cli3.0.5 脚手架安装 脚手架vue-cli3.0.5的使用 2.创建vue项目 开发环...

  • 使用vue-cli搭建vue项目

    vue-cli vue的脚手架 安装脚手架之前需要安装node.js 安装脚手架 安装vue-cli 创建vue项...

  • Vue脚手架Element-UI

    Vue脚手架 Vue脚手架可以快速生成Vue项目基础的架构。A.安装3.x版本的Vue脚手架:npm instal...

  • vue 中的npm 的一些安装

    vue脚手架 vue-cli vue脚手架 包的安装 @(指定版本) 脚手架的两种模式 sass vuex B...

  • class1 vue cli3安装

    vue工程脚手架 关闭vue脚手架的eslint 启动vue ui服务 终端输入vue ui,启动vue项目管理器...

  • VUE----使用脚手架创建vue项目

    学习了vue的基础之后尝试使用脚手架创建一个vue项目 1.全局安装vue脚手架: 安装完成之后,vue脚手架文件...

  • 脚手架

    安装脚手架:vue -处理(脚手架) cnpm install vue-cli -gwe...

  • 纯webpack搭建vue脚手架,单页面应用

    # vue脚手架 ## 说明 ``` vue webpack 自定义脚手架,单页面应用, 支持多进程打包 vue ...

  • Vue脚手架

    5.1 介绍并安装3.x版本的vue脚手架 脚手架基本用法介绍Vue脚手架: 用于快速生成 Vue 项目基础架构理...

网友评论

    本文标题:Vue脚手架优化

    本文链接:https://www.haomeiwen.com/subject/uwaruttx.html