Svelte Framework

              อันนี้  front end frame work น้องใหม่มาแรงนะครับ ซึ่งเกี่ยวพันหลายๆ เรื่องเลย เรื่องหลักคือมันไว้ใช้ทำเว็บ เรื่องรองคือตอนนี้ front end frame work รองรับกรแปลงเป็น app มือถือได้ ก่อนอื่นก็มาที่วิธีติดตั้งกันก่อนละกันครับ

  1. ติดตั้ง node.js นะครับ
  2. npm install -g degit อันนี้ไว้โหลดโปรเจ็คจาก git 
  3. mkdir  free_channel
  4. cd  free_channel
  5. npx degit sveltejs/template  free_channel หรือ npm init svelte@next free_channel
  6. npx svelte-add@latest tailwindcss ติดตั้ง CSS
  7. npm i (หรือ yarn )
  8. npm i  daisyui ติดตั้ง CSS ที่ต่อยอดจาก tailwind (หรือ yarn add daisyui)
  9. เข้าไปแก้ไขไฟล์ tailwind.config.cjs แก้ตรง plugins:  [require("daisyui")], 
  10. ไฟล์ที่ต้องการเรียกใช้ daisyui ให้ใส่  
    <link href="https://cdn.jsdelivr.net/npm/daisyui@1.25.4/dist/full.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2/dist/tailwind.min.css" rel="stylesheet" type="text/css" /> ไว้ข้างบนนะครับ
  11. ลองแก้ไขไฟล์ App.svelte ใน free_channel/src/ ตาม component ของ daisyUI นะครับ
  12. รันเซิฟเวอร์ด้วย npm run dev หรือติดตั้ง yarn install แล้วรันด้วย yarn run dev ก็ได้ครับ เราก็จะได้หน้าเว็บที่มี hot reload มาให้เราใช้เขียนโค้ดละ (การรันเซิฟเวอร์ทิ้งไว้ กินแบตเตอรี่นะ) 
  13. ส่วนถ้าใครสนใจเรื่องการนำไปใช้ร่วมกับ phaser หรือ build apk ดูได้ ที่นี้ นะครับ

 

ความคิดเห็น

โพสต์ยอดนิยมจากบล็อกนี้

โปรโมชั่นเน็ต TOT

โน๊ตบุ๊ค acer switch sa5-271 แบตบวม T^T

Blog นี้สร้างเพื่อ?