Vue（十二）：脚手架配置代理，github案例，插槽

原创

于 2024-04-01 11:41:18 发布

· 794 阅读

16 ·

版权

文章标签：

#vue.js #前端 #github #脚手架配置代理

文章讲述了如何配置Vue项目中的proxyTable，解决API请求问题，以及使用axios进行GitHub用户搜索示例。同时介绍了vue-resource的替代和Vue组件间的插槽通信机制，包括默认插槽、具名插槽和作用域插槽的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、脚手架配置代理

老师讲的主要有两种方法：

但是我的没有proxy，只有proxyTable,之前一直不成功，现在我是这样配置的：

config文件夹下的index.js:

App.vue:

然后就成功了：（我真服了，之前在这里卡了两天，现在莫名其妙就好了）

二、github案例

从https://api.github.com/search/users?q=xxx请求数据过来，然后点击搜索按钮可以显示所有github用户，咋做呢？

1、首先拆分html和css，这块儿直接用现成的，需要注意的是bootstrap样式需要在public下新建css文件夹粘贴bootstrap.css，然后去index.html引入，直接import会有问题（不知道为什么我的bootstrap无效没作用）
2、使用全局事件总线把请求的数据给List并使用v-for展示到页面
3、这里如果再完善一点，一上来显示欢迎词，发请求前显示loading，请求发送完若成功显示数据，失败则显示失败信息。这样的话在传数据时就要在不同的事件节点去触发全局事件并且传不同的值，比较好的做法是数据配置到对象里，传值也传一个对象，这样写起来比较方便。各个文件如下：

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 引入bootstrap但是不知道为什么我的无效 -->
    <link rel="stylesheet" href="./css/bootstrap.css">
    <title>testtwo</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

App.vue

<template>
    <div class="container">
      <Search></Search>
      <List></List>
    </div>
</template>

<script>
import Search from './components/Search.vue'
import List from './components/List.vue'
export default {
    name:'App',
    components:{Search,List}
}
</script>

Search.vue

<template>
    <section class="jumbotron">
        <h3

最低0.47元/天解锁文章