vue專案實戰(二)之首頁layout布局

2021-08-30 10:55:56 字數 1167 閱讀 6690

先填充簡單的顯示內容

將main.js檔案修改如下:

import vue from 'vue'

import router from './router'

import layout from './components/layout'

vue.config.productiontip = false

new vue(,

template: ''

})

輸入命令

npm run dev
啟動成功後訪問http://localhost:8081,發現頁面內容已經替換成我們的了

在layout.vue中將

標籤替換為以下內容:

www.yvpai.com

} 登入|註冊

預覽後效果如下:

在layout.vue中將

替換為:

預覽後效果如下:

開啟src/router/index.js檔案,發現路由如下:

vue.use(router)

export default new router(

]})

以上路由規則是指,當訪問"/"時,中間內容引入helloworld元件,而頭和底部不變,這樣就達到了改變中間內容的效果,如下圖:

訪問我的達人課

訪問我的部落格 wang's blog

微信小程式 專案實戰(二)board 首頁

1.專案結構 2.頁面 1 資料 邏輯 board.js pages board board.js page 生命週期函式 監聽頁面載入 onload function options header success function res 2 布局 board.wxml 豆瓣電影榜單集合 最新,最...

專案實戰 首頁內容介紹 下 4

footer 企業培訓 合作事宜 版權投訴 沒有小於768px,是因為bootstrap3以移動端優先設計 小螢幕 平板,大於等於768px media min width 768px text p 當進入小屏或小屏以上範圍,文字在做,在右 tab2 text tab2 img 中等螢幕 桌面顯示器...

vue 通過單點登入進入專案首頁

最近做的專案是通過單點登入入口進入自己的專案首頁,大概總結一下思路 1.新建乙個ssourl.js 檔案 2.跟main.js 同級新建乙個permission.js 檔名稱隨意 然後在main.js 檔案中匯入 獲取位址列tiket function getticket if url.indexo...