vue模板搭建

1.项目目录

2.项目部分组件

—-router/router.js

 **
 * 路由引入
 * const * => () => import('src/view/...')
 * */

const LoginPage = () => import('@/view/LoginPage')

/**
 * 路由注册
 * '//注释信息'
 * {
 *     path: '',
 *     name: '',
 *     componrnt: '',
 *     meta: {
 *         title: ''
 *     }
 * }
 * */
const routes = [
  {
    path: '/',
    redirect: 'LoginPage'
  },
  // 申请列表
  {
    path: '/LoginPage',
    name: 'LoginPage',
    component: LoginPage,
    meta: {
      title: '登录模块'
    }
  }
]
/**
 * 导出
 * */
export default routes 

—-router/index.js

 import Vue from 'vue'
import Router from 'vue-router'
import routes from './router'
/**
 * 注册
 * */
Vue.use(Router)                                                                                                                         /**
 * 实例化
 * */
const router = new Router({
  routes
})                                                                                                                                                  /**
 * 路由导航
 * */
router.beforeEach((to, from, next) => {
  next()
})                                                                                                                                               /**
 * 导出
 * */
export default router 

—-main.js

 import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
/**
 * 注册使用axios/qs
 * */
import axios from 'axios'
import qs from 'qs'
Vue.prototype.$axios = axios
Vue.prototype.$qs = qs                                                           Vue.config.productionTip = false                                                                                  /* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
}) 

—-store/actions.js(store下另几个格式一样)

 /**
 * 引入
 * */                                                                                                                                            /**
 * 创建actions
 * */
const actions = {}                                                                                                                  /**
 * 导出
 * */
export default actions 

—-store/index.js

 import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'                                                                             Vue.use(Vuex)                                                                                                            export default new Vuex.Store({
  state,
  mutations,
  actions
}) 

—-api/http.js(封装axios)

import axios from 'axios'
import qs from 'qs'
// 格式化
axios.defaults.transformRequest = [data => qs.stringify(data)]                                       // process.env.NODE_ENV获取当前开发环境
switch (process.env.NODE_ENV) {
  // 生产环境
  case 'development':
    axios.defaults.baseURL = ''
    break
  // 打包（发布）环境
  case 'production':
    axios.defaults.baseURL = ''
    break
}                                                                                                                                             // request拦截器
axios.interceptors.request.use(config => {
  return config
}, error => {
  return error
})                                                                                                                                              // response 拦截器
axios.interceptors.response.use(response => {
  return response
}, error => {
  return error
})                                                                                                                                         // 判断状态码
function checkStatus (response) {
  if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
    return response.data || response
  }
  if (response.status === 404) {
    console.log('网络异常')
  }
}                                                                                                                                             function checkCode (res) {
  if (res.status === 500) {
    console.log(`${res.status}${res.msg}`)
  }
  return res
}        
                                                                                                                                       export default {
  // get请求方法封装
  get (url, params) {
    return axios.get(url, {params: params})
      .then((response) => {
        return checkStatus(response)
      }).catch((error) => {
        return checkCode(JSON.parse(JSON.stringify(error)).response)
      })
  },   
                                                                                                                                                   // post请求方法封装
  post (url, data) {
    return axios.post(url, data)
      .then((response) => {
        return checkStatus(response)
      }).catch((error) => {
        return checkCode(JSON.parse(JSON.stringify(error)).response)
      })
  },      
                                                                                                                                               // delete请求方法封装
  delete (url, params) {
    return axios.delete(url, {params: params})
      .then((response) => {
        return checkStatus(response)
      }).catch((error) => {
        return checkCode(JSON.parse(JSON.stringify(error)).response)
      })
  },    
                                                                                                                                             // put请求方法封装
  put (url, data) {
    return axios.put(url, data)
      .then((response) => {
        return checkStatus(response)
      }).catch((error) => {
        return checkCode(JSON.parse(JSON.stringify(error)).response)
      })
  },   
                                                                                                                                                   // patch方法封装
  patch (url, data) {
    return axios.patch(url, data)
      .then((response) => {
        return checkStatus(response)
      }).catch((error) => {
        return checkCode(JSON.parse(JSON.stringify(error)).response)
      })
  }
}