使用vue2和vue-router移植一個部落格頁面
阿新 • • 發佈：2020-12-26
開始
使用vue腳手架建立一個專案
請移步此處————建立vue專案
建立完成之後在public/index.html目錄下引入專案中需要的bootstrapCDN
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap-theme.min.css" rel="stylesheet"> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
刪除原有src/components/Hello.vue資料夾
移植
建立Header.vue,把頭部程式碼寫入
<template> <header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner"> <div class="container"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <span class="sr-only">響應式導航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="" class="navbar-brand">我的小屋</a> </div> <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation"> <ul class="nav navbar-nav"> <li role="presentation" class="active"><a href="/">首頁</a></li> <li role="presentation"><router-link to="/contact">聯絡</router-link></li> <li role="presentation"><router-link to="/about">關於我</router-link></li> </ul> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="請輸入文章標題或者作者名稱"> </div> <button type="submit" class="btn btn-default">搜尋</button> </form> </nav> </div> </header> </template> <script> export default { name: 'Header', data() { return { } }, components: { } } </script> <style scoped lang='scss'> </style>
把底部程式碼寫入Footer.vue
<template> <footer> <div class="container"> <hr /> <p class="text-center">Copyright © Powered by Bruce</p> </div> </footer> </template> <script> export default { name: "Footer", data() { return {}; }, components: {}, }; </script> <style scoped lang='scss'> </style>
新建Context把文章列表頁面遷移過來
<template>
<div id="body" class="container">
<div class="row">
<div class="col-md-8">
<h1>最新發布</h1>
<!-- 標題，標籤，分類，留言總數，釋出時間 -->
<article>
<h2><a href="#">這是我的第一篇文章</a></h2>
<div class="row">
<div class="col-md-6 col-sm-6">
<span class="glyphicon glyphicon-folder-open"></span
> <a href="">標籤</a> <span
class="glyphicon glyphicon-tags"
></span
> <a href="">分類1</a>，<a href="">分類2</a>，<a
href=""
>分類3</a
>
</div>
<div class="col-md-6 col-sm-6">
<span class="glyphicon glyphicon-comment"></span> <a
href=""
>200條評論</a
>
<span class="glyphicon glyphicon-time"></span
> <a href="">2020年8月27日上午10點03分</a>
</div>
</div>
<hr />
<img src="http://placekitten.com/900/300" class="img-responsive" />
<br />
<p class="lead">一言是創建於 2016 年的專案，起初是用於個人目的</p>
<p>
一言是創建於 2016
年的專案，起初是用於個人目的。目前已經轉為公益專案，由萌創團隊運營，為大家提供服務。
所謂一言（ヒトコト），即一句話。這句話可以是傳達了感動，可以是博人一笑，可以是發人深思。總之，一言，代表著言語的觸動，靈魂的交流。
</p>
<p class="text-right">
<a href="single_article.html">閱讀全文...</a>
</p>
<hr />
</article>
<article>
<h2><a href="#">這是我的第一篇文章</a></h2>
<div class="row">
<div class="col-md-6 col-sm-6">
<span class="glyphicon glyphicon-folder-open"></span
> <a href="">標籤</a> <span
class="glyphicon glyphicon-tags"
></span
> <a href="">分類1</a>，<a href="">分類2</a>，<a
href=""
>分類3</a
>
</div>
<div class="col-md-6 col-sm-6">
<span class="glyphicon glyphicon-comment"></span> <a
href=""
>200條評論</a
>
<span class="glyphicon glyphicon-time"></span
> <a href="">2020年8月27日上午10點03分</a>
</div>
</div>
<hr />
<img src="http://placekitten.com/900/300" class="img-responsive" />
<br />
<p class="lead">一言是創建於 2016 年的專案，起初是用於個人目的</p>
<p>
一言是創建於 2016
年的專案，起初是用於個人目的。目前已經轉為公益專案，由萌創團隊運營，為大家提供服務。
所謂一言（ヒトコト），即一句話。這句話可以是傳達了感動，可以是博人一笑，可以是發人深思。總之，一言，代表著言語的觸動，靈魂的交流。
</p>
<p class="text-right">
<a href="single_article.html">閱讀全文...</a>
</p>
<hr />
</article>
<article>
<h2><a href="#">這是我的第一篇文章</a></h2>
<div class="row">
<div class="col-md-6 col-sm-6">
<span class="glyphicon glyphicon-folder-open"></span
> <a href="">標籤</a> <span
class="glyphicon glyphicon-tags"
></span
> <a href="">分類1</a>，<a href="">分類2</a>，<a
href=""
>分類3</a
>
</div>
<div class="col-md-6 col-sm-6">
<span class="glyphicon glyphicon-comment"></span> <a
href=""
>200條評論</a
>
<span class="glyphicon glyphicon-time"></span
> <a href="">2020年8月27日上午10點03分</a>
</div>
</div>
<hr />
<img src="http://placekitten.com/900/300" class="img-responsive" />
<br />
<p class="lead">一言是創建於 2016 年的專案，起初是用於個人目的</p>
<p>
一言是創建於 2016
年的專案，起初是用於個人目的。目前已經轉為公益專案，由萌創團隊運營，為大家提供服務。
所謂一言（ヒトコト），即一句話。這句話可以是傳達了感動，可以是博人一笑，可以是發人深思。總之，一言，代表著言語的觸動，靈魂的交流。
</p>
<p class="text-right">
<a href="single_article.html">閱讀全文...</a>
</p>
<hr />
</article>
<!-- 分頁 -->
<ul class="pager">
<li class="previous">
<a href="#"><span aria-hidden="true">←</span> 上一頁</a>
</li>
<li class="next">
<a href="#">下一頁 <span aria-hidden="true">→</span></a>
</li>
</ul>
</div>
<div class="col-md-4">
<!-- RSS訂閱，最新文章（5），分類，標籤雲，最新評論 -->
<div class="well text-center">
<p class="lead">不想錯過好文章，趕緊訂閱吧</p>
<button type="button" class="btn btn-primary btn-lg">
訂閱我的部落格
</button>
</div>
<!--最新文章 -->
<div class="panel panel-primary" id="mypanel">
<!-- Default panel contents -->
<div class="panel-heading">
<h4>最新文章</h4>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item"><a href="">1. 最新文章8月27日</a></li>
<li class="list-group-item"><a href="">2. 最新文章8月26日</a></li>
<li class="list-group-item"><a href="">3. 最新文章8月25日</a></li>
<li class="list-group-item"><a href="">4. 最新文章8月24日</a></li>
<li class="list-group-item"><a href="">5. 最新文章8月23日</a></li>
</ul>
</div>
<!-- 分類目錄 -->
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">
<h4>分類目錄</h4>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item"><a href="">水果</a></li>
<li class="list-group-item"><a href="">蔬菜</a></li>
<li class="list-group-item"><a href="">電腦3C</a></li>
<li class="list-group-item"><a href="">明星八卦</a></li>
<li class="list-group-item"><a href="">政治事件</a></li>
</ul>
</div>
<!-- 標籤雲 -->
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">
<h4>標籤雲</h4>
</div>
<!-- List group -->
<div class="panel-body">
<ul class="list-inline">
<li><a href="">子鼠</a></li>
<li><a href="">丑牛</a></li>
<li><a href="">寅虎</a></li>
<li><a href="">卯兔</a></li>
<li><a href="">申龍</a></li>
<li><a href="">巳蛇</a></li>
</ul>
</div>
</div>
<!-- 最新評論 -->
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">
<h4>最新評論</h4>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item"><a href="">1. 最新文章8月27日</a></li>
<li class="list-group-item"><a href="">2. 最新文章8月26日</a></li>
<li class="list-group-item"><a href="">3. 最新文章8月25日</a></li>
<li class="list-group-item"><a href="">4. 最新文章8月24日</a></li>
<li class="list-group-item"><a href="">5. 最新文章8月23日</a></li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Context",
data() {
return {};
},
components: {},
};
</script>
<style scoped>
</style>
新建Contact.vue檔案，把聯絡我頁面遷移
<template>
<div class="container" id="body">
<h1>聯絡我</h1>
<div class="well">有問題聯絡我呀</div>
<form>
<div class="form-group">
<label for="username">使用者名稱字</label>
<input type="text" class="form-control" id="username" placeholder="名字" />
</div>
<div class="form-group">
<label for="exampleInputEmail1">郵箱</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="郵箱" />
</div>
<div class="form-group">
<label for="subject">主題</label>
<input type="text" class="form-control" id="subject" placeholder="主題" />
</div>
<div class="form-group">
<label for="message">訊息內容</label>
<textarea class="form-control" id="message" placeholder="評論內容..."></textarea>
</div>
<div class="form-group text-right">
<button type="submit" class="btn btn-primary btn-lg">提交你的訊息</button>
</div>
</form>
</div>
</template>
<script>
export default {
name: "Contact",
data() {
return {};
},
components: {},
};
</script>
<style scoped lang='scss'>
</style>
新建About.vue頁面把關於我頁面遷移
<template>
<div class="container" id="body">
<h1>關於我</h1>
<div class="row" style="margin-bottom: 10px;">
<div class="col-md-3 col-sm-3">
<img src="http://placekitten.com/300/350" class="img-thumbnail img-responsive">
</div>
<div class="col-md-9 col-sm-9">
<p>
任賢齊，1966年6月23日出生於臺灣省彰化縣，祖籍湖北省武漢市江夏區，中國臺灣流行樂男歌手、演員、賽車手、導演 。
</p>
<p>
1990年發行音樂合輯《奔向彩虹》，以歌手身份正式出道。1991年首次出演電影《官兵捉強盜》，進入影視圈。1997年因演唱歌曲《心太軟》獲得廣泛關注 [3] ，並憑藉該歌曲榮獲香港電臺十大勁爆國語金曲銅獎、香港新城精選104電臺國語金獎等獎項 [4] 。1998年發行專輯《愛像太平洋》，專輯中的歌曲《對面的女孩看過來》獲得HITFM臺北之音音樂網100單曲票選活動的第一名，該歌曲也成為了他在歌唱事業上的代表作品；同年出演古裝劇《神鵰俠侶》飾演楊過。
</p>
<p>
1999年主演的電影《星願》上映；同年參加馬來西亞越野摩托車比賽中奪得季軍 [5] 。2000年發行專輯《為愛走天涯》 [6] 。2001年獲得亞洲越野摩托車拉力賽冠軍 [7] 。2005年主演的動作片《韓城攻略》在中國和韓國同期上映。2010年憑藉電影《火龍對決》獲得富川電影節最佳男主角。
</p>
<p>
2013年出演劇情片《下午茶》，該片入圍第63屆柏林電影節“電影大觀”單元 [8] 。2014年執導的紀錄片《媽祖迺臺灣》在臺灣上映，該片打破臺灣紀錄片上映戲院數量 [1] ；同年導演並主演愛情喜劇電影《落跑吧愛情》 [2] 。2016年出演警匪片《樹大招風》 [9] ；同年再次迴歸小熒幕，出演飲食類電視劇《深夜食堂》 [10] 。2019年主演犯罪動作電影《沉默的證人》。
</p>
</div>
</div>
<div class="row text-center photo">
<img src="http://placekitten.com/200/200" >
<img src="http://placekitten.com/200/200" >
</div>
<p class="lead text-center">以下是我的視訊課資源</p>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="#">
<img src="http://placekitten.com/300/450" class="img-responsive">
</a>
<div class="caption text-center">
<h4>Python基礎</h4>
<p>課程簡介</p>
<button type="button" class="btn btn-primary">立即購買</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="#">
<img src="http://placekitten.com/300/450" class="img-responsive">
</a>
<div class="caption text-center">
<h4>Django實戰開發</h4>
<p>課程簡介</p>
<button type="button" class="btn btn-primary">立即購買</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="#">
<img src="http://placekitten.com/300/450" class="img-responsive">
</a>
<div class="caption text-center">
<h4>Flask實戰開發</h4>
<p>課程簡介</p>
<button type="button" class="btn btn-primary">立即購買</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'About',
data() {
return {
}
},
components: {
}
}
</script>
<style scoped lang='scss'>
</style>
在src/App.vue檔案下匯入剛才寫好的元件並在components下注冊
- 其中
<router-view />是路由出口
<template>
<div id='app'>
<Header></Header>
<router-view />
<Footer></Footer>
</div>
</template>
<script>
import Header from './components/Header';
import Footer from './components/Footer';
export default {
name: 'App',
components: {
Header,
Footer,
}
}
</script>
<style>
#body{
padding-top: 75px;
}
</style>
安裝vue-router實現路由切換
使用npm安裝
npm install vue-router --save-dev
在src下建立routes.js檔案
/* jshint esversion: 6 */
import VueRouter from 'vue-router';
import Vue from 'vue';
import Context from '@/components/Context';
import About from '@/components/About';
import Contact from '@/components/Contact';
Vue.use(VueRouter);
const router = new VueRouter({
routes: [
{
path: '/',
name: 'index',
component: Context,
},
{
path: '/about',
name: 'about',
component: About,
},
{
path: '/contact',
name: 'contact',
component: Contact,
},
]
});
export default router;
在main.js檔案中註冊寫好的路由
/* jshint esversion: 6 */
import Vue from 'vue';
import App from './App.vue';
import router from './routes';
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
router
}).$mount('#app');