admin dashboard starter
1.0.0
เป้าหมายของเราคือการทำให้การพัฒนาสปาง่ายขึ้น - จัดส่งแดชบอร์ดผู้ดูแลระบบของคุณวันนี้ โฟกัสอยู่ที่สแต็ก/สถาปัตยกรรม/รูปแบบการออกแบบและไม่ได้อยู่ในสุนทรียศาสตร์ การออกแบบนั้นถูกเก็บไว้น้อยที่สุดเพื่อให้ง่ายขึ้นและทำให้ง่ายต่อการใช้งานการออกแบบของคุณเอง
เรากำลังครอบคลุมส่วนการออกแบบเช่นกัน - การพอร์ตกรอบผู้ดูแลระบบที่สำคัญไปยังเทคโนโลยีสตาร์ทบอร์ดผู้ดูแลระบบของเรา นี่คือรายการทั้งหมด (ยิ่งมีดาวมากเท่าไหร่เราก็ยิ่งทำงานมากขึ้นเท่านั้น):
สร้างขึ้นด้วย Svelte และ Sapper Rollup สร้างโครงการ ปรับใช้กับ Firebase Hosting ตอนนี้เพิ่มขึ้นหรือตรงไปยังเซิร์ฟเวอร์ของคุณ
โดยรวมแล้วคุณสามารถปรับใช้แดชบอร์ดผู้ดูแลระบบสดของคุณวันนี้
อย่างไรก็ตามคุณได้รับรหัสคุณสามารถติดตั้งการพึ่งพาและเรียกใช้โครงการในโหมดการพัฒนาด้วย:
cd admin-dashboard-starter
npm install # or yarn
npm run devเปิด LocalHost: 3000 และเริ่มคลิกรอบ ๆ
ปรึกษา Sapper.svelte.dev เพื่อขอความช่วยเหลือในการเริ่มต้น
SAPPER คาดว่าจะพบสองไดเรกทอรีในรากของโครงการของคุณ - src และ static
ไดเรกทอรี SRC มีจุดเข้าใช้สำหรับแอปของคุณ client.js , server.js และ (เลือก) service-worker.js พร้อมกับไฟล์ template.html และไดเรกทอรี routes
นี่คือหัวใจของแอพ 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.sveltesrc/routes/_helpers/datetime.js และจะ ไม่ สร้าง A /_helpers/datetime Routeไดเรกทอรีแบบคงที่มีสินทรัพย์คงที่ใด ๆ ที่ควรมี เหล่านี้เสิร์ฟโดยใช้ SIRV
ในไฟล์ service-worker.js ของคุณคุณสามารถนำเข้าไฟล์เหล่านี้เป็น files จากรายการที่สร้างขึ้น ...
import { files } from '@sapper/service-worker' ;... เพื่อให้คุณสามารถแคช (แม้ว่าคุณจะไม่สามารถเลือกได้เช่นถ้าคุณไม่ต้องการแคชไฟล์ที่มีขนาดใหญ่มาก)
Sapper ใช้ Rollup หรือ Webpack เพื่อให้นำเข้ารหัสและการนำเข้าแบบไดนามิกรวมถึงการรวบรวมส่วนประกอบ Svelte ของคุณ ด้วย webpack มันยังให้การโหลดโมดูลร้อน ตราบใดที่คุณไม่ได้ทำอะไรเลยคุณสามารถแก้ไขไฟล์การกำหนดค่าเพื่อเพิ่มปลั๊กอินที่คุณต้องการ
ในการเริ่มต้นเวอร์ชันการผลิตของแอปของคุณให้เรียกใช้ npm run build && npm start สิ่งนี้จะปิดใช้งานการโหลดสดใหม่และเปิดใช้งานปลั๊กอิน Bundler ที่เหมาะสม
คุณสามารถปรับใช้แอปพลิเคชันของคุณกับสภาพแวดล้อมใด ๆ ที่รองรับ Node 8 หรือสูงกว่า เป็นตัวอย่างในการปรับใช้ตอนนี้เรียกใช้คำสั่งเหล่านี้:
npm install -g now
nowเมื่อใช้ส่วนประกอบ svelte ที่ติดตั้งจาก NPM เช่น @sveltejs/svelte-virtual-list, Svelte ต้องการแหล่งที่มาของส่วนประกอบดั้งเดิม (แทนที่จะใช้ JavaScript ใด ๆ ที่จัดส่งด้วยส่วนประกอบ) สิ่งนี้จะช่วยให้ส่วนประกอบเป็นด้านเซิร์ฟเวอร์และยังช่วยให้แอพฝั่งไคลเอ็นต์ของคุณเล็กลง
ด้วยเหตุนี้จึงเป็นสิ่งสำคัญที่ Bundler จะไม่ปฏิบัติต่อแพ็คเกจเป็นการ พึ่งพาภายนอก คุณสามารถแก้ไขตัวเลือก external ภายใต้ server ใน rollup.config.js หรือตัวเลือก externals ใน webpack.config.js หรือเพียงแค่ติดตั้งแพ็คเกจลงใน devDependencies มากกว่า dependencies ซึ่งจะทำให้มันรวม (และคอมไพล์) แอพของคุณ:
npm install -D @sveltejs/svelte-virtual-listโปรดพูดคุยเกี่ยวกับตัวติดตามปัญหา DBH
