vue單頁面項目架構方案

這裏的架構方案是基於vue-cli2生成的項目應用程序產生的，是對項目應用程序或者項目模板的一些方便開發和維護的封裝。針對單頁面的解決方案。

主要有四個方面：

一，不一樣環境下的分別打包

 主要是測試環境和開發環境，修改package.json文件

 "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build:test": "cross-env NODE_ENV=testing  node build/build.js",
    "build:prod": "cross-env NODE_ENV=production  node  build/build.js"
  },

　　同時修改webpack.prod.conf.js文件

// const env = require('../config/prod.env')  註釋默認配置
const env = process.env.NODE_ENV === 'testing'
  ? require('../config/test.env')
  : require('../config/prod.env')

　　而後修改config裏面test.env.js文件，或者直接複製prod.env.js文件

'use strict'

module.exports = {
  NODE_ENV: '"testing"',
  testApiAddress:'"http://localhost:3000"'
}

      註釋掉build.js中的 process.env.NODE_ENV = 'production'

二，axios的封裝

import axios from 'axios'
import { Notification } from 'element-ui' //這是element-ui提示信息
let qs = require('qs')
let myAjax = axios.create()

/**
 * 統必定義默認類型請求context-type
 *
 */
export const ajaxGetData = dataParams => {
  return myAjax.get(dataParams.url, { params: dataParams.params })
}

export const ajaxPostData = dataParams => {
  return myAjax.post(dataParams.url, qs.stringify(dataParams.params))
}

export const ajaxPutData = dataParams => {
  return myAjax.put(dataParams.url, qs.stringify(dataParams.params))
}

export const ajaxDeleteData = dataParams => {
  return myAjax.delete(dataParams.url, { params: dataParams.params })
}

/**
 * 統必定義JSON類型請求context-type(application/json)
 *
 */

export const ajaxGetJsonData = dataParams => {
  return myAjax({ url: dataParams.url, method: 'get', params: dataParams.params, data: dataParams.dataBody, headers: { 'Content-Type': 'application/json' } })
}

export const ajaxPostJsonData = dataParams => {
  return myAjax({ url: dataParams.url, method: 'post', params: dataParams.params, data: dataParams.dataBody, headers: { 'Content-Type': 'application/json' } })
}

export const ajaxPutJsonData = dataParams => {
  return myAjax({ url: dataParams.url, method: 'put', params: dataParams.params, data: dataParams.dataBody, headers: { 'Content-Type': 'application/json' } })
}

export const ajaxDeleteJsonData = dataParams => {
  return myAjax({ url: dataParams.url, method: 'delete', params: dataParams.params, data: dataParams.dataBody, headers: { 'Content-Type': 'application/json' } })
}

/**
 * 統必定義JSON類型請求context-type(multipart/form-data)
 *
 */

export const ajaxPostFormData = (dataParams) => {
  return myAjax.post(dataParams.url, dataParams.params, { headers: { 'Content-Type': 'multipart/form-data' } })
}


/**
 * 所有請求攔截器處理
 */
myAjax.interceptors.request.use(function (config) {
  /**
     * 統一封裝tokenId信息
     */
  var LoginUser = 'test'
  if (LoginUser != undefined) {
    if (config.params == undefined) {
      config.params = new Object()
    }
    // console.log('config.params.tokenId=LoginUser.tokenId;',config.params.tokenId=LoginUser.tokenId)
    config.params.tokenId = 'tockeid'
  }
  return config
},
function (error) { return Promise.reject(error) }
)

myAjax.interceptors.response.use(
  response => {
    if (response.status) {
      if (response.status == 200) {
        return response
      } else {
        return Promise.reject({ status: response.status, response: { data: response.data.err  || '請求失敗！' } })
      }
    } else {
      return response
    }
  },
  error => {
    //後端掛掉或者跨域時候時候返回
    if (!error || !error.response) {
      return Notification.error({title: '提示', message: '網絡或請求異常，請稍後再試!',offset:100})
    }
    // 若是返回錯誤統一處理 後端錯誤時候返回錯誤信息
    Notification.error({title: '失敗', message: error.response.data, type: 'error',offset:100})
    //return Promise.reject({ response: { data: '請求失敗2！' } }) // 返回接口返回的錯誤信息
  })

　　以上攔截器還能夠進行更加細緻的封裝，前提是須要和後端同窗協商好接口返回狀態碼。

三，導航的封裝

 若是作後臺管理應用，導航會要求後端返回數據。因而最好單獨拿出導航數據，封裝成一個單獨的部分。舉例基於element-ui作的一個封裝實例

//配置導航
const router = [{
  name: '默認頁',
  type: "nav",
  children: [{
    name: '選項1',
    url: '/page1',
    type: "menu"
  }]
}, {
  name: '個人頁面',
  url: '',
  type: "nav",
  children: [{
    name: '選項1',
    url: '/app/list',
    type: "menu"
  }, {
    name: '選項2',
    url: '/app/app-edit',
    type: "menu"
  }]
}, {
  name: '個人頁面2',
  url: '',
  type: "nav",
  children: [{
    name: '選項1',
    url: '/query/index',
    type: "menu"
  }]
}]

export default router

四，全局組件註冊 全局組件避免了單獨註冊，同時是開發組件庫的基礎

// 全局組件配置文件
import Header from './Header'
import Common from './Common'
const components = {
  Header,
  Common
}

const  install = function(Vue){
  if (install.installed) return;
  Object.keys(components).forEach(key=>{
    Vue.component(key,components[key])
  })
}

if (typeof window !=="undefined" && window.vue) {
  install(window.vue)
}

const component = {
  install
}

export  default  component

　　注意：在入口文件引入以後，而後use

import Vue from 'vue'
import component from './components' //註冊全局組件
Vue.use(component)

五，src目錄結構

 

最後，還有其餘一些能夠提早完成的：錯誤頁面跳轉，登陸系統接入等。