9. Vue 通用项目配置

Vue 通用项目配置

• 按照如下所示创建目录结构

  

• 配置通用css文件

  npm install normalize.css --save
  

  在 assetc/css 路径下创建 base.css

  @import "~normalize.css";
  // ...
  

  在 App.vue 中加载 base.css 文件

  <style>
    @import "~@/assets/css/base.css";
  </style>
  

• Axios 封装

  npm install axios
  

  在 network 目录下创建 request.js

  import axios from 'axios'
  
  export function request(config) {
      // 创建Axios实例，并进行基本参数配置
      let instance = axios.create({
          baseURL: 'http://127.0.0.1:9000',
          // headers: {
          //     version: 'v1'
          // },
          timeout: 5000,
      })
  
      // 配置请求和响应的拦截
      instance.interceptors.request.use(config => {
          // 1. 如用于整理给服务器的数据
          // 2. 如每次发送网络请求时，在界面中进行提示
          // 3. 如token等必须携带的信息检测
          console.log(config)
          return config
      }, error => {
          return error
      })
      instance.interceptors.response.use(response => {
          return response.data
      }, error => {
          return  error
      })
  
      // 调用Axios实例，发送真正的网络请求，并返回。
      return instance(config)
  }
  

• 路由设置

  npm install vue-router --save  # 或在vue ui中安装router插件
  

  在 router 目录下创建 index.js

  import Vue from 'vue'
  import VueRouter from 'vue-router'
  
  Vue.use(VueRouter)
  
    const routes = [
    // {
    //   path: '/',
    //   name: 'Home',
    //   component: Home
    // },
    // {
    //   path: '/about',
    //   name: 'About',
    //   // route level code-splitting
    //   // this generates a separate chunk (about.[hash].js) for this route
    //   // which is lazy-loaded when the route is visited.
    //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    // }
  ]
  
  const router = new VueRouter({
    routes
  })
  
  export default router
  

  在 main.js 中注册 router

  import Vue from 'vue'
  import App from './App.vue'
  import router from './router'
  
  Vue.config.productionTip = false
  
  new Vue({
    router,
    render: h => h(App)
  }).$mount('#app')
  

• Vuex 配置

  npm install vuex --save  # 或在vue ui中安装Vuex插件
  

  在 store 目录下创建 index.js 文件

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

  在 main.js 中注册 Vuex

  import Vue from 'vue'
  import App from './App.vue'
  import store from './store'
  
  Vue.config.productionTip = false
  
  new Vue({
    store,
    render: h => h(App)
  }).$mount('#app')
  

• 设置路径的别名

  在 vue.config.js 中做如下设置

  module.exports = {
    lintOnSave: false,
    configureWebpack: {
      resolve: {
        alias: {
          assets: '@/assets' // 示例
        }
      }
    }
  }