使用vue2和vue-router移植一个博客页面
开始
使用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">
- 在
</body>后引入bootstrap.js文件
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
删除原有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">
<router-view></router-view>
<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>
新建Article.vue文件，把文章列表页迁移
<template>
<div class="col-md-8">
<h1>最新发布</h1>
<!-- 标题，标签，分类，留言总数，发布时间 -->
<article>
<h2><router-link to="/detail">这是我第一篇文章</router-link></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>
</template>
<script>
export default {
name: 'Article',
data() {
return {
}
},
components: {
}
}
</script>
<style scoped lang='scss'>
</style>
新建Detail.vue文件，把详情页面迁移
<template>
<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>
<ul class="pager">
<li class="previous">
<a href="/">返回主页</a>
</li>
</ul>
<div class="well">
<h4>评论区</h4>
<form class="clearfix">
<div class="form-group col-md-6">
<label for="username">用户名字</label>
<input type="text" class="form-control" id="username" placeholder="名字" />
</div>
<div class="form-group col-md-6">
<label for="exampleInputEmail1">邮箱</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="邮箱" />
</div>
<div class="form-group col-md-12">
<textarea class="form-control" id="comment" placeholder="评论内容..."></textarea>
</div>
<div class="form-group text-right">
<button type="submit" class="btn btn-primary">提交</button>
</div>
</form>
</div>
<hr />
</article>
</div>
</template>
<script>
export default {
name: "Detail",
data() {
return {};
},
components: {},
};
</script>
<style scoped lang='scss'>
</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';
import Detail from '@/components/Detail';
import Article from '@/components/Article';
Vue.use(VueRouter);
const router = new VueRouter({
routes: [
{
path: '/',
name: 'index',
component: Context,
children: [
{
path: '',
name: '',
component: Article
},
{
path: 'detail',
name: 'detail',
component: Detail,
}
]
},
{
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');
博客用vue搭建成功！
效果预览
文章列表页
文章详情页
联系我页
关于我页
Vue3不同之处
vue-router路由需在src/route/index.js下写路由切换
/* jshint esversion: 6 */
import { createRouter, createWebHashHistory } from "vue-router";
import Context from '@/components/Context';
import About from '@/components/About';
import Contact from '@/components/Contact';
import Detail from '@/components/Detail';
import Article from '@/components/Article';
const routes = [
{
path: "/",
name: "home",
component: Context,
children: [
{
path: '',
name: 'index',
component: Article
},
{
path: 'detail',
name: 'detail',
component: Detail,
}
],
},
{
path: '/about',
name: 'about',
component: About,
},
{
path: '/contact',
name: 'contact',
component: Contact,
},
];
export const router = createRouter({
history: createWebHashHistory(),
routes: routes
});
main.js文件有略微更改
/* jshint esversion: 6 */
import { createApp } from 'vue';
import App from './App.vue';
import {router} from './route';
const app = createApp(App);
app.use(router);
app.mount('#app');
