終於到了30天的尾聲,該學的都學了! 接下來就是運用在實際的案例上。剩下的這幾天我要跟著「重新認識Vue.js」口罩地圖範例來製作,驗收一下所學的到底會不會用?
建立一個新的專案
vue create mask-demo-app
套件選擇,vue版本選3.x
? Please pick a preset: Manually select features
? Check the features needed for your project:
(*) Choose Vue version
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
(*) Vuex
(*) CSS Pre-processors
( ) Linter / Formatter
>( ) Unit Testing
( ) E2E Testing
最後一步
npm run serve
建立好的結構如下圖
口罩地圖分成三個元間 : 列表(左)、地圖(右)、燈箱 (實際範例請見書中連結)
在專案中的/public/index.html中加入需要的css
<head>
<!--略-->
<!-- reset -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<!-- font-awesome -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
<!-- leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
</head>
改寫src/App.vue (為了省去css與模板寫的時間書中提供參考文件)
<template>
<div id="app">
<!-- aside-menu 左側欄 -->
<div class="aside-menu">
<div class="wraps">
<label>
縣市:<select><option>台北市</option></select>
</label>
<label>
行政區:<select><option>北投區</option></select>
</label>
</div>
<div class="wraps">
<label>
<i class="fas fa-search-location"></i> 關鍵字搜尋:
<input type="text" placeholder="請輸入關鍵字">
</label>
</div>
<ul class="store-lists">
<li class="store-info wraps">
<h1>XX藥局</h1>
<div class="mask-info">
<i class="fas fa-head-side-mask"></i>
<span>大人口罩: 100 個</span>
</div>
<div class="mask-info">
<i class="fas fa-baby"></i>
<span>兒童口罩: 100 個</span>
</div>
<div class="mask-info">
最後更新時間:
</div>
<button class="btn-store-detail">
<i class="fas fa-info-circle"></i>
看詳細資訊
</button>
</li>
<li class="store-info wraps">
<h1>XX藥局</h1>
<div class="mask-info">
<i class="fas fa-head-side-mask"></i>
<span>大人口罩: 100 個</span>
</div>
<div class="mask-info">
<i class="fas fa-baby"></i>
<span>兒童口罩: 100 個</span>
</div>
<div class="mask-info">
最後更新時間:
</div>
<button class="btn-store-detail">
<i class="fas fa-info-circle"></i>
看詳細資訊
</button>
</li>
<li class="store-info wraps">
<h1>XX藥局</h1>
<div class="mask-info">
<i class="fas fa-head-side-mask"></i>
<span>大人口罩: 100 個</span>
</div>
<div class="mask-info">
<i class="fas fa-baby"></i>
<span>兒童口罩: 100 個</span>
</div>
<div class="mask-info">
最後更新時間:
</div>
<button class="btn-store-detail">
<i class="fas fa-info-circle"></i>
看詳細資訊
</button>
</li>
</ul>
</div>
<!-- 地圖區塊 -->
<div class="mask-map" id="mask-map"></div>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style lang="scss" src="./style.scss"></style>
在src下建立一個style.scss
#app {
display: block;
position: fixed;
overflow: hidden;
width: 100%;
height: 100vh;
* {
box-sizing: border-box;
}
> div {
float: left;
}
}
.aside-menu {
width: 25%;
height: 100%;
border-right: 1px solid #aaa;
background-color: #f1f1f1;
overflow-y: scroll;
label {
position: relative;
margin-right: 2em;
display: block;
font-size: 1.2rem;
line-height: 2;
}
select {
position: absolute;
margin-top: 0.3rem;
left: 6rem;
font-size: 1.2rem;
width: auto;
min-width: 110px;
}
input {
padding: 2px 8px;
font-size: 1.2rem;
line-height: 2;
width: 110%;
}
}
.mask-map {
position: relative;
width: 75%;
height: 100%;
background-color: #aaa;
z-index: 10;
&.full {
width: 100%;
}
}
.wraps {
padding: 1em;
border-bottom: 1px solid #666;
}
.store-info {
position: relative;
cursor: pointer;
font-size: 1.1rem;
line-height: 1.8;
background-color: #fff;
h1 {
font-size: 1.5rem;
font-weight: 500;
color: #333;
margin-bottom: 0.3em;
}
.mask-info {
position: relative;
> span {
position: absolute;
left: 1.8rem;
}
}
&::v-deep .highlight {
color: #f08d49;
}
&:hover {
background-color: #eee;
}
.btn-store-detail {
position: absolute;
display: block;
cursor: pointer;
width: 80px;
height: 80px;
text-align: center;
right: 1.2rem;
top: 1.5rem;
font-size: 0.8rem;
> i {
display: block;
font-size: 2rem;
margin-bottom: 5px;
}
}
}
.popup-name {
font-size: 1.25rem;
}
就可以得到一個基礎模板的樣子了!!
明天就要開始正式寫囉~~