詳解windows下vue-cli及webpack 構建網(wǎng)站(三)使用組件
1、本文章是建立在《windows下vue-cli及webpack 構建網(wǎng)站(一)環(huán)境安裝》和《windows下vue-cli及webpack 構建網(wǎng)站(一)導入bootstrap樣式》兩篇文章之上的。
2、在src\components文件夾下面新建兩個組件,分別為 header.vue、footer.vue,打開header.vue文件粘貼下面的代碼作為網(wǎng)站的頭部。
<template> <!-- Fixed navbar --> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{ msg }}</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="/" rel="external nofollow" >首頁</a></li> <li><a href="/list" rel="external nofollow" >文章</a></li> <li class="dropdown"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown">會員 <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="/user/login" rel="external nofollow" >登錄</a></li> <li><a href="/user/register" rel="external nofollow" >注冊</a></li> </ul> </li> </ul> </div><!--/.nav-collapse --> </div> </nav> </template> <script> export default { name: 'header', data () { return { msg: 'LOGO' } } } </script>
打開footer.vue文件,粘貼以下代碼作為網(wǎng)站底部:
<template> <div class="blog-footer"> <p>版權所有 盜版必究.</p> <p> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Back to top</a> </p> </div> </template>
保存
3、打開src文件夾下面的app.vue文件,修改模板代碼為
<template> <div id="app"> <HtmlHeader></HtmlHeader> <div class="jumbotron"> <h1>hello word!</h1> </div> <HtmlFooter></HtmlFooter> </div> </template> <script> import HtmlHeader from './components/header' import HtmlFooter from './components/footer' export default { components: { HtmlHeader, HtmlFooter } } </script>
可以看到代碼中我們引入了新創(chuàng)建的兩個組件,并且加載到模板當中了,我們保存之后啟動一下項目看看。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
vue自定義密碼輸入框解決瀏覽器自動填充密碼的問題(最新方法)
這篇文章主要介紹了vue自定義密碼輸入框解決瀏覽器自動填充密碼的問題,通過將密碼輸入框的type設置為text,修改樣式上的顯示,來實現(xiàn)既可以讓瀏覽器不自動填充密碼,又可以隱藏密碼的效果,需要的朋友可以參考下2023-04-04使用element-ui的Pagination分頁的注意事項及說明
這篇文章主要介紹了使用element-ui的Pagination分頁的注意事項及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02詳解vuex中action何時完成以及如何正確調(diào)用dispatch的思考
這篇文章主要介紹了詳解vuex中action何時完成以及如何正確調(diào)用dispatch的思考,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-01-01