快速上手完成乙個自己的前端框架

作為乙個後端程式設計師，很多時候我們也想自己搞乙個炫酷的前端頁面出來。

無奈專精後端的我們 已經精疲力盡了，但是作為乙個程式設計師。怎能沒有一顆全棧的心呢！

目前前端比較流行的框架vue.js，在這基礎上有一批成熟的後台系統開源專案。

1、element （截止發稿前 start 51.8k）

官網：http:
2、vue admin
官網：https:
3、iview-admin（截止發稿前 start 14.4k）
4、d2-admin（截止發稿前 start 8.4k） √

安裝nodejs

# 檢查是否安裝成功
node -v
npm -v
# cnpm方式
npminstall -g cnpm --registry=

git clone [email protected]:d2-projects/d2-admin-start-kit.git

cnpm install

npm run dev

src/views 目錄是頁面存放目錄，在此目錄下新建目錄，例如 page-demo：

然後在資料夾內新建 index.vue 檔案

index.vue 內容：

"header"

>header
hello liugedata！
"footer"
>footer

src/router/routes.js 是路由配置檔案：

步驟3：# # 設定選單

src/menu 目錄是選單存放目錄，

頂欄

側邊欄

邊欄：

頂欄：

這樣乙個簡單的頁面就構建出來了，然後就可以基於這個基礎模組 定製自己的系統。

更多配置項和元件的使用，在需要的時候，直接看文件

即可。d2-admin附帶大量的示例**，可以幫助我們快速的進行前端的開發。

像我這種對於前端不是那麼熟悉的，我一般是去模仿示例**，採用 複製貼上** ~~

然後就是d2-admin其實也是基於 element-ui 的，可以直接將 element-ui **copy到專案中進行展示，需要什麼元件，就到文件中去找。

乙個注意的點就是：在與後端進行對接的時候，一定要注意這個框架本身在傳送資料和接收資料上的一些定義，要按照文件上面來。前後端的核心邏輯在src/api中編寫

同時，需要配置開發環境對應的後台介面位址

參考：

如何快速上手乙個框架

demo 框架 配置 框架介面 生命週期 頁面通訊 元件 基礎元件 擴充套件元件 api 過一遍介紹，知道有哪些坑，怎麼安裝，條件編譯和全域性樣式 詳細查閱配置，以及元件和api的列表標題，跳過具體內容，熟悉大體位置，按需上手。生命週期 基於vue的mvvm框架，熟悉應用週期 頁面週期 元件週期，理...

東拼西湊完成乙個「前端框架」 4 Tabs頁

在完成了側邊欄後，後台的基礎架子已經基本出來了 下面是來加入tab頁面，正在糾結於tab頁面是否用現成的輪子，比如layui 想一想還是擼起袖子直接幹乙個 title 列表 頭部標題部分，用於顯示tab頁的標題和開啟狀態 content 內容 用於放置tab的內容，顯示當前選中的內容 1.布局 ta...

怎麼快速上手乙個專案 前端後台管理系統

每乙個專案的成熟過程都是從以下幾個方面出發 利用框架搭建先啟動專案 1 登入功能.1.1 根據框架中的元件渲染form表單。1.2 針對每一行使用者資料進行驗證和提示。1.3 驗證碼功能。1.4 登入提交方法。1.5 一些細節問題 正則匹配 頁面提示等 2 頁面首頁 2.1 頂部導航欄。2.2 側邊...