vue开发小结（上）

前言：

　　18年年底，就一个字，忙，貌似一到年底哪个公司都在冲业绩，包括我们自己开发自己公司的项目也一样得加把劲。自从18年年初立了个flag17年年终总结——走过2017，迎来2018Flag到现在又一年了。想想当时立的flag还是很多没有完成到，说的第一点就没有完成了(ps：这确实不能怪我，真的忙)，健身也是落下了，而node.js的呢还在进程中，说不定稍后会出了系列的文章(ps：当然不会像之前那几篇那样，感觉写得有点云里雾里的)。当然，今天的重点不是说这些，而是我在vue项目上实践的一些小汇总和踩坑指南。另，结尾有福利喔~~~

正文：

　　这一年前前后后大概做了有四个vue相关的项目(ps：vue-cli脚手架搭建)，其中包括两个移动端和两个管理后台的(ps：有一个管理端还在进行中)，其中不免遇到了不少坑，还有不少的总结。

　　vue-cli开发相关

　　一、一般的vue-cli src的项目骨架：

├── App.vue
├── main.js
├── permission.js
├── router
│   └── index.js
├── api
│   └── index.js
│   └── xx.js
├── assets
│   ├── images
│   ├── flexible.js
│   └── common
│       └── common.less
│       └── mixin.less
├── components
├── utils
├── store
│   ├── index.js
│   └── xxStore.js
└── views
    ├── index.vue
    └── xx.vue

　　对vue-cli有了解的应该知道一般我们的源码就写在src文件夹下面。其中App.vue就是根组件，其他的组件我们就可以通过App.vue的

<router-view/>渲染；main.js就是入口文件，一般用于引入通用组件，UI框架，router，axios，store挂载等；permission.js则用于在路由渲染先后需要设置的权限之类的；components则为通用组件的封装；utils则为通用的方法的封装；api则为通用api的封装调用等。

　　例如：main.js

import 'babel-polyfill'
import Vue from 'vue'
import Es6Promise from 'es6-promise'
require('es6-promise').polyfill()
Es6Promise.polyfill()
import App from './App'
import './assets/flexible'
import axios from 'axios'
import router from './router'
import store from './store'
import './permission'
import {WechatPlugin,LoadingPlugin,ToastPlugin,AlertPlugin,ConfirmPlugin } from 'vux'
import VueLazyload from 'vue-lazyload'

//挂载axios
Vue.prototype.axios=axios

//配置微信jssdk，通过Vue.wechat直接访问wx
Vue.config.productionTip = false
Vue.use(WechatPlugin)
Vue.use(LoadingPlugin)
Vue.use(ToastPlugin)
Vue.use(AlertPlugin)
Vue.use(ConfirmPlugin)
Vue.use(VueLazyload,{
  error:require('./assets/images/activity_default_loading.png'),
  loading:require('./assets/images/activity_default_loading.png')
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

　　二、axios api接口的统一封装

　　现在的vue-cli开发，一般都是使用axios进行接口请求，其中一大好处就是可以进行请求和响应的拦截，进而进行一些通用的配置，所以能很好的做到了接口的封装。

　　例如：request.js

import axios from 'axios'
import { AlertModule } from 'vux'

// 创建axios实例
const service = axios.create({
  //baseURL: process.env.ENV_CONFIG=='dev'?'/api':'', // api的base_url
  baseURL: process.env.ENV_CONFIG=='dev'?'/api':process.env.BASE_API,
  //timeout: 10000, // 请求超时时间
  headers:{
   
  }
})

// request拦截器
service.interceptors.request.use(
  config => {
    if( config.method === 'post' ){
      config.data.http_headers={
     
      }
    }
    return config
  },
  error => {
    // Do something with request error
    // for debug
    console.log(error)
    Promise.reject(error)
  }
)

// respone拦截器
service.interceptors.response.use(
  response => {
    if (response.data.result && response.data.result==='failed') {
      AlertModule.show({
        title:'提示',
        content:response.data.text,
        /*onHide () {
          router.push({
            name:'index'
          })
        }*/
      })
      return
    }
    else{
      return response.data
    }
  },
  error => {
    console.log('err' + error) // for debug
    /*AlertModule.show({
      title:'斑马提示',
      content:'链接超时，请重新尝试',
    })*/
    return Promise.reject(error)
  }
)

export default service

　　之后，我们就可以通过api目录暴露封装的接口调用

import request from '@/utils/request'

export function doXx(data) {
  return request({
    url:'/xx',
    method:'post',
    data
  })
}

　　三、axios 请求不同数据格式的处理及表单提交处理

　　看axios文档我们可以了解到，axios的其中一个特点就是将数据转换成json格式，但是有些接口由于历史等原因后台不方便调整的话，就需要前端做些处理了。

　　例如，以formdata格式提交参数则可以通过axios内置的qs模块进行data的格式转换，然后设置请求头即可

export function XXRequest(data) {
  return request({
    transformRequest: [function(data) {      //在请求之前对data传参进行格式转换
      data = qs.stringify(data)
      return data
    }],
    url:'/xx.do',
    method:'post',
    data,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    }
  })
}

　　又例如，后台返回一个form表单，需要前端提交form表单，则需要，通过路由的resolve对象，this.$router.resolve解析接口回调参数并且打开空白页面并提交form表单

// res为回调参数
let routerData = this.$router.resolve({name:'apply',query:{htmls:res}})
window.open(routerData.href,'_ blank')
const div = document.createElement('div')
div.innerHTML = res
 document.body.appendChild(div)
document.forms [0] .submit()

apply.vue做法
<template>
   <div v-html ="apply">
     {{apply}}
   </div>
</template>

<script>
  export default {
    name:'apply',
    data(){
      return {
        apply:''
      }
    },
    mounted(){
      let form = this.$route.query.htmls
      this.apply = form
      this.$nextTick(()=> {
        document.forms [0].submit()
      })
    }
  }
  </script>

　　四、引入css预处理器less

npm install less less-loader --save

修改webpack.base.conf.js rules
{
        test: /.less$/,
        loader: "style-loader!css-loader!less-loader",
      }

　　五、es6在低版本及IE下的不兼容

　　部分低版本的手机或者IE下是不兼容es6中的promise的，如果用到了promise语法的话，就需要进行es6编译es5，所以做法需要引入

es6-promise并且在main.js中引入

npm install es6-promise --save

main.js中引入
import Es6Promise from 'es6-promise'
require('es6-promise').polyfill()
Es6Promise.polyfill()

　　六、ico调整

　　一般的ico都是设置在项目根目录下，然后调整build webpack.dev.conf.js和webpack.prod.conf.js中的new HtmlWebpackPlugin设置参数

favicon:path.resolve(__dirname,'xx.ico')即可。

　　七、常用组件的引入

　　一般常用的vue组件的引入，例如vue-lazyload、vue-scroller等一般可以上npm查看相关是使用方法即可。

　　vue-cli单页面部署相关

　　一、build路径问题

　　一般项目都会部署到端口的某个文件夹下面，所以需要修改config index.js的assetsPublicPath路径

 index: path.resolve(__dirname, '../文件夹名/index.html'),

assetsRoot: path.resolve(__dirname, '../文件夹名'),
assetsSubDirectory: 'static',
assetsPublicPath: './',  // ./为相对文件夹路径，否则/为根目录

　　二、部署到Nginx上

　　由于打包完后的是静态文件，所以我们可以直接部署到Nginx上面，接口通过Nginx代理即可。但是刷新会丢失404，所以需要做个重定向即可。

location /{
            root   dist;
            index  index.html;
        try_files $uri $uri/ /dist/index.html;
}

　　三、部署到Tomcat上

　　部署到Tomcat上的话，一样存在刷新丢失的情况，我看有人提出配置web.xml进行404重定向，这个我司也是有实践了下

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
  <display-name>xxx</display-name>

  <error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
  </error-page>
</web-app>

　　但是，这样部署的话其实是第一次刷新ok的，但是再次刷新则还是404丢失。(ps：在移动设备上会，有知道的大佬可以留言喔~)

总结：

　　其中，有了解过vue-cli开发的话，其实用vue开发在业务逻辑上是没有太大的问题的，因为很多大佬已经开发出各种组件供我们调用了，我呢，就在部署上面卡了很久，因为最初的想法是部署到Tomcat上的，所以一直尝试都没有成功，最初的原因的就是使用了es6的promise，然后呢又了解到了需要配置重定向xml。最后以为大功告成，还是存在二次刷新丢失的问题。所以部署到了Nginx上，然后设置重新定这样子解决。

　　另，其中还有很多可能没有总结到位，到时有补充的会补充在这里~

　　再另，附福利

　　winter大大，前手机淘宝前端负责人在极客时间上发了《重学前端》的课程，扫我的二维码报名的话可以找我分奖励喔，另外通过我二维码报名的加我wx：UEMtQWFyb24= (ps：base64转码)可得vue教程一套。嘻嘻