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教程一套。嘻嘻