后台管理系统[01第三方库集成]

1.1. vue.config.js中修改webpack配置

const { defineConfig } = require('@vue/cli-service')

// 在vue.config修改webpack配置
module.exports = defineConfig({
  transpileDependencies: true,
  //配置方式一：VueCLI提供的属性
  outputDir: './build',
  // 配置方式二：和webpack属性完全一致，最后会进行合并
  configureWebpack: {
    resolve: {
      alias: {
        components: '@/components'
      }
    }
  },
})
module.exports = {
  lintOnSave: false
}

1.2. vue-router集成

1 安装路由

2 创建router对象

3 使用路由

4 在App.vue中配置跳转

1.3. vue-router集成

1 安装vuex

2 创建store对象

3 使用store

4 在App.vue中使用

1.4 Element-plus集成（局部引入）

1 安装element-plus

2 在App.vue中引入、注册并使用组件

3 引入样式（通过babel)

1.5 axios集成

1 安装axios

2 封装axios

• 在service新建index.ts和文件夹request
• 在request里新建index.ts，其中封装axios 导出一个对象

• // 封装axios
  import axios from "axios"
  import type { AxiosInstance, AxiosRequestConfig } from 'axios'
  
  class QNRquest {
    instance: AxiosInstance
  
    constructor(config: AxiosRequestConfig) {
      // 每次创建一个axios对象都创建一个新的instance
      this.instance = axios.create(config)
    }
  
    // 封装request函数
    request(config: AxiosRequestConfig): void {
      this.instance.request(config).then((res) => {
        console.log(res)
      })
    }
  }
  export default QNRquest
  

• 在service中的index.ts中引入该对象 创建实例并导出

• // service统一出口
  import QNRquest from "./request/index"
  import { BASE_URL, TIME_OUT } from './request/config'
  
  const qnRequest = new QNRquest({
    baseURL: BASE_URL,
    timeout: TIME_OUT
  
  })
  export default qnRequest
  

• 在main.js中引入该实例

• qnRequest.request({
    method: 'GET',
    url: '/home/multidata'
  })

其他：区分不同环境的三种方式

根据不同的环境环境设置不同的环境变量

方式一（不推荐）

// 1 手动切换
const BASE_URL = 'http://coderwhy.org/dev'
const BASE_NAME = 'codewhy'

// const BASE_URL = 'http://coderwhy.org/prod'
// const BASE_NAME = 'codewhy'

// const BASE_URL = 'http://coderwhy.org/test'
// const BASE_NAME = 'codewhy'

方式二（常用）

// 2 process.env.NODE_ENV的值会根据不同的环境变化
let BASE_URL = ''
let BASE_NAME = ''

if (process.env.NODE_ENV === 'development') {
  BASE_URL = 'http://coderwhy.org/dev'
  BASE_NAME = 'codewhy'
} else if (process.env.NODE_ENV === 'production') {
  BASE_URL = 'http://coderwhy.org/prod'
  BASE_NAME = 'kobe'
} else {
  BASE_URL = 'http://coderwhy.org/test'
  BASE_NAME = 'james'
}

// ES6中先定义变量再导出 要将变量放在对象里面
export { BASE_URL, BASE_NAME }