admin dashboard starter

銀河系中最簡單的管理儀表板套件！

我們的目的是簡化水療開發 - 立即運送您的管理儀表板。重點是堆棧/體系結構/設計模式，而不是美學。為了保持簡單，並使實施自己的設計易於保持最小。

我們還涵蓋了設計部分 - 將主要管理框架移植到我們的管理儀表板入門技術中。這是一個完整列表（星星越多，我們投入的工作越多）：

• 表格
• 管理員
• 管理員
• 材料儀表板

用苗條和搭檔建造。滾動構建項目。現在使用Firebase託管部署，現在，直接向您的服務器湧現。

總而言之，您今天可以部署實時管理儀表板。

特徵

• 易於使用的組件系統。組件是普通的HTML，CSS，JS。
• 基於文件夾的路由。
• 強大的身份驗證系統。輕鬆地插入Firebase，Passport.js或Auth0。
• 基於組件的測試和開發。渲染單個組件 - 更快地工作和迭代。設置可靠的單元測試/組件測試系統。
• 數據源。從數據庫，文件或遠程服務器輕鬆插入您自己的數據。
• 與柏樹進行集成測試。
• 從命令行之間切換開發環境和產品環境。
• 從命令行部署到流行服務。

運行項目

但是，您可以獲得代碼，可以安裝依賴項並以開發模式運行項目：

 cd admin-dashboard-starter
npm install # or yarn
npm run dev

打開Local主機：3000，然後開始單擊。

請諮詢Sapper.svelte.dev以獲取幫助。

結構

Sapper希望在您的項目的根源中找到兩個目錄src和static 。

src

SRC目錄包含您的應用程序的輸入點client.js ， server.js和（可選） service-worker.js ，以及template.html文件和routes目錄。

SRC/路線

這是您的Sapper應用程序的核心。有兩種路由：頁面和服務器路由。

頁面是用.svelte文件編寫的Svelte組件。當用戶首次訪問應用程序時，將為他們提供有關該路由的服務器渲染版本，再加上一些“水合”頁面並初始化客戶端路由器的JavaScript。從那時起，通往其他頁面的導航完全可以在客戶端上處理，具有快速，類似應用程序的感覺。 （Sapper將預加載並緩存這些後續頁面的代碼，因此導航是瞬時的。）

服務器路由是用.js文件編寫的模塊，其導出功能與HTTP方法相對應。每個功能都將明確的request和response對像作為參數，以及next功能。例如，這對於創建JSON API很有用。

有三個簡單的規則用於命名定義您的路線的文件：

• 一個稱為src/routes/about.svelte的文件對應於/about路由。一個稱為src/routes/blog/[slug].svelte對應於/blog/:slug路由，在這種情況下， params.slug可用於路由。
• 文件src/routes/index.svelte （或src/routes/index.js ）對應於應用程序的根。 src/routes/about/index.svelte的處理與src/routes/about.svelte相同。
• 帶有領先下劃線的文件和目錄不會創建路由。這使您可以將輔助模塊和組件與取決於它們的路由分配 - 例如，您可以擁有一個稱為src/routes/_helpers/datetime.js的文件，並且不會創建A /_helpers/datetime路由

靜止的

靜態目錄包含任何應可用的靜態資產。這些是使用SIRV服務的。

在您的service-worker.js文件中，您可以從生成的清單中導入這些files ...

 import { files } from '@sapper/service-worker' ;

...以便您可以緩存它們（儘管您可以選擇不選擇，例如，如果您不想緩存非常大的文件）。

Bundler配置

Sapper使用crolup或webpack提供代碼分解和動態導入，並編譯您的亮組件。使用WebPack，它還提供熱模塊重新加載。只要您不做任何愚蠢的事情，就可以編輯配置文件以添加您想要的任何插件。

生產模式和部署

要啟動應用程序的生產版本，請運行npm run build && npm start 。這將禁用實時重裝，並激活適當的Bundler插件。

您可以將應用程序部署到支持節點8或更高的任何環境中。例如，要部署到現在，請運行以下命令：

npm install -g now
now

使用外部組件

當使用從NPM安裝的Svelte組件（例如 @sveltejs/svelte-virtual-list）時，Svelte需要原始組件源（而不是任何與組件一起寄出的預編譯JavaScript）。這允許將組件渲染為服務器端，還可以使您的客戶端應用程序更小。

因此，捆綁器不將軟件包視為外部依賴性，這一點至關重要。您可以在rolup.config.js中的server下修改external選項，也可以在webpack.config.js中修改externals選項，或者簡單地將軟件包安裝到devDependencies而不是dependencies中，這將導致其與其捆綁（並因此將其編譯為）您的應用程序：

npm install -D @sveltejs/svelte-virtual-list

錯誤和反饋

請在DBH問題跟踪器上發聲。