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目录结构

最后，还有其他一些可以提前完成的：错误页面跳转，登录系统接入等。

vue单页面项目架构方案

猜你喜欢