vue 啟動頁配置 原來寫個Vue 首頁就這麼簡單

2021-10-13 20:00:38 字數 1229 閱讀 3067

you can never replace anyone. what is lost is lost.每個人都是無可替代的,失去了便是失去了。

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

完成後效果圖

在這裡插入描述

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

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

上下結構 在這裡插入描述 header 一般放專案或者企業logo, 常見的還會有 首頁、功能、關於 等常見操作, main 會加一些高大上的宣傳、文案、資料呀

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

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

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

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

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

修改檔案 public/index.html

在這裡我們將首頁 title 和 樣式進行修改,同時刪除

畢竟自己用,很容易搞定瀏覽器相容的

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

直接將原內容改為

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

import home from '../views/home.vue'const routes =
第一步刪除其中 helloworld 的使用,同時一併刪除那個檔案,並把 img 也刪除

加入布局元件

kola

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

you can never replace anyone.what is lost is lost.每個人都是無可替代的,失去了便是失去了。在這篇文章中,我們繼續開始,先新增個專案的首頁以及登入頁面,暫時不與後端互動 完成後效果圖 作為乙個偏後端管理專案,其實做不做公共首頁都是可以的,畢竟有個登入以...

快速生成vue模板頁配置

第一步 新增使用者 片段 開啟 vsocde 的 首選項 使用者 片段 輸入vue,選擇 片段檔案為 vue.json。輸入以下內容。vue component 第二步 新增配置 進入 檔案 首選項 設定 新增這2項 specifies the location of snippets in the...

vue 404頁面配置

路由表中新增乙個路徑為404的路由,同時在路由表的最底部配置乙個路徑為 的路由,重定向至404路由即可。router.js export default newrouter 路由表是動態生成的情況下,也就是說路由表分為兩部分,一部分為基礎路由表,另一部分是需要根據使用者的許可權資訊動態生成的路由表。...