2-vue注册element 并且封装请求模块

1： vue 注册element组件库

Element 介绍

Element 是饿了么前端团队开发的一个基于 Vue.js 的桌面端组件库，它提供的组件非常丰富，不仅功能强大，而且简单易用。

Element 非常的流行，大多数基于 Vue.js 开发的管理系统都会使用到它。

  • 目前已有 44.8k 的 Star 了

导入到项目中

1、安装

npm i element-ui

2、在 main.js 中配置 element 组件库

/**
 * 项目的启动入口
 */

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 加载 element 组件库
import ElementUI from 'element-ui'

// 加载 element 组件库的样式
import 'element-ui/lib/theme-chalk/index.css'

// 加载全局样式文件
import './styles/index.less'

// 全局注册 element 组件库
Vue.use(ElementUI)

Vue.config.productionTip = false

// 创建 Vue 根实例
// 把 router 配置到根实例中
// 通过 render 方法把 App 根组件渲染到 #app 入口节点
new Vue({
  router,
  render: h => h(App)
  // el: '#app' // 等价于 $mount('#app')
}).$mount('#app')

使用说明

用哪个组件就看哪个组件的说明文档。

复制 -> 粘贴 -> try-try-see。

封装请求模块

为了方便，我们在这里把 axios 单独封装一个模块用于项目中的请求操作。

 

/**
 * 基于 axios 封装的请求模块
 */
import axios from 'axios'

// axios()
// axios.get()
// axios.post()

// 创建一个 axios 实例，说白了就是复制了一个 axios
// 我们通过这个实例去发请求，把需要的配置配置给这个实例来处理
const request = axios.create({
  baseURL: 'http://api-toutiao-web.itheima.net' // 最新接口地址
  
  // baseURL: 'http://ttapi.research.itcast.cn/' // 请求的基础路径
})

// 请求拦截器

// 响应拦截器

// 导出请求方法
export default request

// 谁要使用谁就加载 request 模块
// import request from 'request.js'
// request.xxx
// request({
//   method: ,
//   url: ''
// })

 





 


 


 


 


 


 


 


 


 


 


 


 


 


 


 








        

        

            posted on 
2021-07-12 16:38 
paike123 
阅读(227) 
评论(0) 
编辑 
收藏 
举报

        

    










    
    

    
    

    

        

    

        

            
                
                
            
        

    

        

            
                
            
        

    

    

    





            

        

        

            

导航