vue 公共模板 使用Vue寫個首頁,原來這麼簡單

2021-10-16 01:30:32 字數 1634 閱讀 9770

you can never replace anyone. what is lost is lost.

每個人都是無可替代的,失去了便是失去了。

在這篇文章中,我們繼續開始,先新增個專案的首頁以及登入頁面,暫時不與後端互動

完成後效果圖

作為乙個偏後端管理專案,其實做不做公共首頁都是可以的,畢竟有個登入以及登入後的後台功能頁就可以了,這裡做個公共首頁主要為了介紹下專案

一般首頁做的都比較高大上,但後台管理系統風格一般都比較簡單

上下結構

header 一般放專案或者企業logo, 常見的還會有首頁功能關於等常見操作,

main 會加一些高大上的宣傳、文案、資料呀

上中下結構

header 一般放專案或者企業logo, 常見的還會有首頁功能關於等常見操作,

main 會加一些高大上的宣傳、文案、資料呀

其他剩下的就是各種花裡胡哨的首頁了

作為乙個偏後端的管理專案,我們就是用第二種方案吧!

關於首頁可以找專門的前端小姐姐和小哥哥來設計一下,也可以直接去那種前端模板之家類似**找個模板,修改一下

因為使用element ui, 在其提供的容器布局中,已經提供了對應的解決方案,其中第二種為

headerel-header>

mainel-main>

footerel-footer>

el-container>

執行下yarn serve, 這樣在修改的時候就可以保持熱部署了,我們可以實時的看到修改結果,啟動後會提示位址,直接在瀏覽器開啟就能看到vue預設配置的首頁了

修改檔案public/index.html

在這裡我們將首頁title和 樣式進行修改,同時刪除畢竟自己用,很容易搞定瀏覽器相容的

並在該檔案中加入body,html樣式

直接將原內容改為

在我們檢視路由配置的時候,可以看到

import home from '../views/home.vue'

const routes = [

]

第一步刪除其中helloworld的使用,同時一併刪除那個檔案,並把 img 也刪除

div>

template>

export default script>

加入布局元件

vue 封裝公共元件 學習 使用

在vue 專案中 會有很多類似的內容 因公司 經常做支付這一塊 像下面的類似的功能還有很多地方要用 因此嘗試 乙個很簡單的小封裝 子元件 sub pay pay left total span div pay amount 實付金額 div div pay right click onpaybtn ...

使用vscode建立vue模板

需要先安裝外掛程式vetur 檔案 首選項 擴充套件 輸入vetur 安裝 1.檔案 首選項 使用者 片段 輸入vue 選擇vue.json vue 到這兒就能夠進入vue.json的檔案中,在這裡輸入想要建立的模板 0 表示你希望生成 後游標的位置 prefix 表示生成對應預設 的命令 儲存後關...

使用vscode,生成vue模板

目標 我們希望每次新建.vue檔案後,vscode能夠根據配置,自動生成我們想要的內容。方法 開啟vscode編輯器,依次選擇 code preferences user snippets 此時,會彈出乙個搜尋框,我們輸入vue,選擇vue後,vscode會自動開啟乙個名字為vue.json的檔案,...