我的书签
添加书签
移除书签笔记
将第三方 bootstrap.css 放在了 public 目录中，同时引入到 index.html
重要源码
public\index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<!-- 真对IE浏览器的特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面。 实际上，加上这句话也解决不了实质问题 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 开启移动端的理想视口 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 配置页签的图标 -->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- 098 引入第三方样式 -->
<link ref="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
<!-- 配置网页的标题
实际取的是 package.json 文件中的 name属性值。
这里是webpack插件完成的一个功能。
-->
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<!-- 如果浏览器不支持js，那么就会提示下面的内容：-->
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<!-- 准备一个容器 ★★★-->
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>main.js
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false
//创建vm
new Vue({
el:'#app',
render: h => h(App),
//099
//第0步:安装 全局事件总线
beforeCreate(){
Vue.prototype.$bus = this
}
})App.vue
<template>
<!-- 来源 04_静态页面\2_users_page\index.html -->
<div class="container">
<Search></Search>
<List></List>
</div>
</template>
<script>
//1. 引入组件
import Search from './components/Search.vue'
import List from './components/List.vue'
//引入 axios
//import axios from 'axios'
//引入 样式
//通过 import 引入，脚手架会做严格的检查。只要发现不存在资源，就会提示错误。
// 例如：
// 提示错误: Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.svg'
//该文件大概会用到 8种字体。 如果暂时用不到，不建议这种引入。
//import './assets/css/bootstrap.css'
//建议：将第三方样式放到 public\index.html引入， 同时将第三方样式放到 public
export default {
//2. 注册组件
components: { Search, List },
name:'App'
}
</script>
<style>
</style>components\Search.vue
<template>
<!-- 头部搜索 -->
<section class="jumbotron">
<h3 class="jumbotron-heading">Search Github Users</h3>
<div>
<!-- 获取用户输入 -->
<input type="text" placeholder="enter the name you search" v-model="keyWord"/>
<button @click="searchUsers">Search</button>
</div>
</section>
</template>
<script>
//引入第三方库
import axios from 'axios'
export default {
name:'SearchVue',
data(){
return {
keyWord:''
}
},
methods: {
searchUsers(){
//注意： 为了让 ${this.keyWord} 起作用, 必须使用反引号 `，不能使用 单引号。
// 反引号 `（模板字符串）：支持通过 ${变量}插入动态值
// 模板字符串。如果想把 this.keyWord 像模板一样解析，需要包裹 $(this.keyWord)
// 地址里面带?参数，表示get请求的query参数。
// 虽然该接口是免费的，但是不要请求太频繁，否则可能被认为你正在攻击github服务器而被屏蔽。
let strUrl = `https://api.github.com/search/users?q=${this.keyWord}`
console.log(strUrl)
axios.get(strUrl).then( //两个回调:成功+失败
response => {
console.log('请求成功了', response.data.items)
//099
this.$bus.$emit('getUsers', response.data.items)
},
error => {
console.log('请求失败了', error.message)
}
)
}
},
}
</script>
<style>
</style>components\List.vue
<template>
<!-- list区 -->
<div class="row">
<!-- 同一个网站上不允许有相同用户名 -->
<div class="card" v-for="user in users" :key="user.login">
<!-- 属性值 动态绑定 :属性名 -->
<a :href="user.html_url" target="_blank">
<img :src="user.avatar_url" style='width: 100px'/>
</a>
<!-- 标签体 插值语法-->
<p class="card-text">{{user.login}}</p>
</div>
</div>
</template>
<script>
export default {
name:'ListVue',
//099
data(){
return{
//本例用户数据来源:
// github.com 提供的免费get请求接口 https://api.github.com/search/users?q=xxx
users:[] //值为数组
}
},
mounted(){
//099
//第1步: 将名为getUsers的事件 绑定到 全局事件总线
this.$bus.$on('getUsers',(users)=>{
console.log('我是List组件，收到数据:', users)
this.users = users
})
},
}
</script>
<style scoped>
.album {
min-height: 50rem; /* Can be removed; just added for demo purposes */
padding-top: 3rem;
padding-bottom: 3rem;
background-color: #f7f7f7;
}
.card {
float: left;
width: 33.333%;
padding: .75rem;
margin-bottom: 2rem;
border: 1px solid #efefef;
text-align: center;
}
.card > img {
margin-bottom: .75rem;
border-radius: 100px;
}
.card-text {
font-size: 85%;
}
</style>本例用户列表展示的3个信息，关系如下图所示：
