Svelte Framework
อันนี้ front end frame work น้องใหม่มาแรงนะครับ ซึ่งเกี่ยวพันหลายๆ เรื่องเลย เรื่องหลักคือมันไว้ใช้ทำเว็บ เรื่องรองคือตอนนี้ front end frame work รองรับกรแปลงเป็น app มือถือได้ ก่อนอื่นก็มาที่วิธีติดตั้งกันก่อนละกันครับ
-
ติดตั้ง node.js นะครับ
- npm install -g degit อันนี้ไว้โหลดโปรเจ็คจาก git
- mkdir free_channel
- cd free_channel
- npx degit sveltejs/template free_channel หรือ npm init svelte@next free_channel
- npx svelte-add@latest tailwindcss ติดตั้ง CSS
- npm i (หรือ yarn )
- npm i daisyui ติดตั้ง CSS ที่ต่อยอดจาก tailwind (หรือ yarn add daisyui)
- เข้าไปแก้ไขไฟล์ tailwind.config.cjs แก้ตรง plugins: [require("daisyui")],
-
ไฟล์ที่ต้องการเรียกใช้ 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" /> ไว้ข้างบนนะครับ - ลองแก้ไขไฟล์ App.svelte ใน free_channel/src/ ตาม component ของ daisyUI นะครับ
- รันเซิฟเวอร์ด้วย npm run dev หรือติดตั้ง yarn install แล้วรันด้วย yarn run dev ก็ได้ครับ เราก็จะได้หน้าเว็บที่มี hot reload มาให้เราใช้เขียนโค้ดละ (การรันเซิฟเวอร์ทิ้งไว้ กินแบตเตอรี่นะ)
- ส่วนถ้าใครสนใจเรื่องการนำไปใช้ร่วมกับ phaser หรือ build apk ดูได้ ที่นี้ นะครับ
ความคิดเห็น
แสดงความคิดเห็น