32Vue项目搭建（二）

南工大第一帅哥
169 阅读6分钟

集成 element-plus

Element Plus，一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库：

  • 相信很多同学在Vue2中都使用过element-ui，而element-plus正是element-ui针对于vue3开发的一个UI组件库；

  • 它的使用方式和很多其他的组件库是一样的，所以学会element-plus，其他类似于ant-design-vue、NaiveUI、VantUI都是差不多的；

  • 安装：npm install element-plus

使用element-plus（全局引用）

把所有的组件，全部集成，也就是打包的时候，会被全部打包、造成包的占用资源过大、但是操作很简单

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

使用

//使用
<el-button></el-button>

//引入自己具体想用的组件
ipmort {ElButton} from 'element-plus'
export default defineComponent({
    //全局引用，已经不需要再注册组件了
    //直接使用ElButton组件即可
})

自动引用element-plus

官方推荐

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import 具体配置可以分别在vite和webpack，这里我们只说webpack的，详细请参照： element-plus.gitee.io/zh-CN/guide…

在vue.config.js中配置，他也是可以汇聚到webpack中的，在vueconfig.js中配置会更方便 图片.png

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

配置完成后，直接使用即可，也不需要注册，也不需要引用

图片.png

引用axios

axios请求是异步的！，设置成同步的方式：在第一个请求回来的then中发送第二个请求；或者使用await 首先安装npm install axios --save axios_demo.ts

import axios from 'axios'//引用axios

//引用进来的axios就是 axois的实例对象了，可以直接调用他里面的方法
axios.request({ //请求 使用的是 GET方式 请求
    method:'GET',
    url:'http://123.207.32.32:8000/home/multidata'
})

等价于==》
axios.get("http://123.207.32.32:8000/home/multidata")

promise本身是可以有 类型的

new Promise((resolve,reject)=>{
    resolve('123')
}).then(res)=>{
    //res拿到的是resolve返回的数据
    //但是我resolve出来的类型可能会有很多，需要我们手工指定
}

--------------------------------------------

/手工指定传入string
new Promise<string>((resolve,reject)=>{
    resolve('123')//这里就必须传string类型
}).then(res)=>{//这里res就一定是string类型了
    console.log(res.length)
}

axios.get的理解

//axios.get返回的是一个promise
//这里直接返回res，因为内部会帮我们返回resolve的
axios.get("http://123.207.32.32:8000/home/multidata").then((res)=>{
    //then((res:AxiosResponse: <any>)=>
    console.log(res)//返回 该url的数据，具体数据类型参照如下源码：
})

其实res是一个接口类型的，不过我们可以不用写，他会自动推导出来的。

export interface AxiosResponse<T = any, D = any>  {

  data: T;

  status: number;

  statusText: string;

  headers: AxiosResponseHeaders;

  config: AxiosRequestConfig<D>;

  request?: any;

}

图片.png

图片.png

要求传入AxiosResponse接口中定义的所有属性、并且属性值类型是any类型

axios综合写法

get的请求的两个参数，第二个参数是一个对象，可以传参

设置的参数会存储在接口的data属性中

axios.get('http://www.httpbin.org/#/HTTP_Methods/get_get',{
    params:{
        name:'coderwhy',
        age:18
    }
}).then((res)=>{
    console.log(res.data)
})

post请求 他的设置参数data会放在接口的data属性中

axios.post('http://www.httpbin.org/#/HTTP_Methods/post_post',{
    data:{
        name:'abc',
        age:20
    }
})

axios的全局配置选项

设置默认的根路径，这样我每次post/get的时候，就不用在写那么长的接口地址了。因为我们发现上方的get和post请求的时候，url有相同的地方，也就是根路径： “www.httpbin.org/#/HTTP_Meth…

设置这个之后就不用再写那么长的地址了。

axios.defaults.baseURL = 'www.httpbin.org/#/HTTP_Meth…' 改写为：

直接写后缀就完事了，相同的部分不用再写了。
axios.post('/post_post',{})
axios.get('/get_get',{})

axios.defaults...这样配置的是全局配置，可以配置如下：

axios.defaults.baseURL
axios.defaults.timeout

图片.png

axios请求的局部配置

axios.get('/get',{
    params:{
    },
    timeout:
    headers:{
    }
})

写在里面了，配置选项和全局配置一样。

请求函数axios.all

get和post的请求是异步的，他们俩到底谁先得到请求后返回的结果，我们是不确定的；在开发中，有多个请求，我们希望请求一起返回回来、这个时候就需要使用axios.all函数了

//要求传入一个数组，返回promise
axios.all([
axios.get('/get',{params:{name:"why",age:18}}),
axios.post('/post',{data:{name:"abc",age:20}})
]).then(res => {
    console.log(res[0])//第一个请求返回的结果
    console.log(res[1])//第二个请求返回的结果
    res[0].data//服务器中真实的数据
})

axios的拦截器

token：服务端生成的一串字符串可以解决频繁登录的问题
它作为客户端进行请求的一个令牌：
第一次登录后，服务器生成一个token返回给客户端；
客户端只需要带上token来请求数据即可，无需再次带上用户名和密码

在我们发送请求之前，会做的一些事情。
比如：
1.每一个请求都携带了token，这个时候在请求之前，我们就需要将token存放在header属性中，所以拦截器将请求拦截下来，先往里面存储token属性后，才给与发送请求。
2.请求的时间过长时，我们在界面上显示一个loading的提示，等请求结束后，再把loading提示移除。所以我们就需要在每次请求之前把loading组件显示出来，请求结束后再移除loading组件。
3.每次请求后得到的相应数据都是AxiosResponse.data里面的数据，我们希望不用通过.data就可以直接拿到数据，那么我们可以在返回的时候进行拦截，直接获取到数据，不用再手工.data获取，也会用到拦截器。

axios.interceptors.request.use() 拦截请求
axios.interceptors.response.use() 拦截响应

//fn1：请求发送成功的时候，会执行的函数
//fn2：请求发送失败的时候，会执行的函数
axios.interceptors.request.use(fn1,fn2)

请求使用：

//拦截
axios.interceptors.request.use((config)=>{
    //config：请求成功会就会执行他
    //config中存储了我们get('')中的配置信息
    //可以对这些配置信息进行相应的修改
    config.url = '...'
    return config
    //因为我是拦截的，我操作完后还是要返回出去，给他继续请求的
},(err)=>{
    //当请求发送失败的时候，会执行他
    console.log("请求发生错误")
    return err
}),

响应使用：

axios.interceptors.response.use((res=>{
    //服务器正常返回值（数据响应成功）会执行
    //一般服务器状态是20x表示成功
    return res.data
    //直接返回res.data，我就不需要再通过.data拿到数据了
}),(err=>{
    //服务器没有返回相应的值（数据响应失败）会执行
    return err
})
)

区分不同环境

图片.png

在不同的环境中，我们会存在不同的BASE_URL；有三种方式可以进行修改。
/service/request/config.ts\

1.手动修改（不好）

//每次在这里修改，当我npm run serve，设置成对应的
当我 npm run build，又要设置成相应的
const BASE_URL = 'http://abc'
在不同的环境中每次都要修改这个

2.根据process.env.NODE_ENV

在不同的环境下，process.env.NODE_ENV有不同的值

  1. 开发环境：development
  2. 生产环境：production
  3. 测试环境：test
let BASE_URL = ''
let BASE_NAME = ''
if(process.env.NODE_ENV === 'development'){
    BASE_URL = '开发环境的地址'
    BASE_NAME = '开发环境的名字'
}else if(process.env.NODE_ENV === 'production'){
    BASE_URL = '生产环境的地址'
    BASE_NAME = '生产环境的名字'
}else {
    BASE_URL = '测试环境的地址'
    BASE_NAME = '测试环境的名字'
}
//需要将他导出
export { BASE_URL,BASE_NAME }

关于publicPath的问题：blog.csdn.net/qq_42991509…

avatar
文章
阅读
粉丝