3-配置环境变量+vuex+vue-router+elementui-Pluse的集成

1，配置router和vuex

npm i vuex@next vue-router

①：配置router

main.ts中

②：配置vuex

main.ts中

2，集成elementui-plus npm i element-plus

全局引用或按需引入参考官网

按需以内plugins注意要放在configureWebpack里，不然会报错“plugins” is not allowed，这里官网未提示

3，axios 基本使用及封装 npm i axios

基本使用

//axios导出的就是一个实例对象，可以直接使用上面的方法
import axios from 'axios'
axios.defaults.baseURL = 'http://httpbin.org'
//1, axios第一种发请求的方式
axios.request({
  method: 'GET',
  url: '/get',
})

//2, 模拟get请求，传入参数 params参数会被转换为query参数形式发送
axios
  .get('/get', {
    params: {
      name: 'zs',
      age: '18',
    },
  })
  .then((res) => {
    console.log(res)
  })
//3, 模拟post请求 data中的参数会作为params参数发送,同时post请求还支持query类型的参数
axios
  .post('/post', {
    data: {
      name: 'zs',
      age: '18',
    },
  })
  .then((res) => {
    console.log(res)
  })

//4, axios.all 使用场景：当我们发送多个请求时希望多个请求的数据同时回来。得到的是一个数组，数组中是AxiosResponse类型的数据
axios
  .all([
    axios.get('/get', { params: { name: '张三', age: 18 } }),
    axios.post('/post', { data: { name: '张三', age: 18 } }),
  ])
  .then((res) => {
    console.log(res)
  })

//5, axios的拦截器,f1为请求/响应成功的回调，f2为请求/响应失败的回调，可以省略
axios.interceptors.request.use(
  (config) => {
    //想做的操作
    //如，添加token
    //添加请求动画
    return config
  },
  (err) => {
    console.log(`请求发送失败${err}`)
  }
)
axios.interceptors.response.use(
  (res) => {
    console.log('请求拦截成功')
    return res.data //.data中才是服务器返回的数据
  },
  (err) => {
    console.log('服务器响应失败')
    return err
  }
)

// Promise本身可以有类型<number>可以限制resolve，resject的参数类型和then后res的参数类型,必须保持一致
new Promise<number>((resolve) => {
  resolve(555)
}).then((res) => {
  console.log(res)
})

4，配置环境变量

环境变量就是在不同的环境下，赋予变量不同的值，来区分当前的开发环境

方式一：

方式二：一般常用

方式三：利用多个.env文件，文件名不能变(最方便)，编译器会自动识别当前环境并把环境变量注入 vscode安装DotENV扩展可以支持.env文件的语法高亮

注意：在这种方式下可以使用 BASE_URL NODE_ENV这些系统自带的变量名，也可以自定义名字必须VUE_APP_开头： VUE_APP_(自定义变量名)

项目中读取环境变量的值时使用 process.env.环境变量名

如：console.log(process.env.VUE_APP_DIY)

3-配置环境变量+vuex+vue-router+elementui-Pluse的集成

相关推荐