tm nuxtjs starter
1.0.0
นี่คือชุดสตาร์ทเทอร์เตอร์ Vue ที่น้อยที่สุดของฉันและใช้งานได้และแอพสาธิต ณ เดือนสิงหาคม 2018
หากคุณรู้สึกเบื่อหน่ายกับความเหนื่อยล้าจากจาวาสคริปต์และต้องการเริ่มต้นอย่างรวดเร็วและรวดเร็วลองดูสิ่งนี้ การพัฒนาแอพ Vue ที่ทันสมัยไม่ได้ง่ายกว่านี้มากนัก
แอพสาธิตเป็นไซต์คงที่ซึ่งเป็นแอพหน้าเดียวขั้นพื้นฐานที่มีหน้าเว็บที่อยู่ได้ไม่กี่หน้าซึ่งขี้เกียจโหลดตามความต้องการ มันแสดงให้เห็นถึงการดำเนินการ CRUD ขั้นพื้นฐาน: 1) รายการภาพยนตร์ 2) ดูรายละเอียดภาพยนตร์ 3) สร้าง/แก้ไขและ 4) ลบภาพยนตร์
การสาธิตใช้ LocalStorage ของเบราว์เซอร์สำหรับการจัดเก็บข้อมูลซึ่งหมายความว่ามันทำงานโดยไม่มีแบ็กเอนด์ แหล่งที่มามีโมดูลที่เรียก AJAX จริงไปยังแบ็กเอนด์ REST - คุณเพียงแค่ต้องเปิดใช้งานโมดูลและเขียนเซิร์ฟเวอร์และคุณอยู่ในแทร็กที่ดีที่จะมีเว็บแอปจริง ฉันได้พัฒนาเซิร์ฟเวอร์ RESTPIE3 Python REST API ซึ่งใช้ API ภาพยนตร์เรื่องนี้เป็นตัวอย่าง
แอพสาธิตประกอบด้วยสแต็คเทคโนโลยีที่เรียบง่าย แต่ทรงพลังซึ่งให้ฟังก์ชั่นที่สำคัญสำหรับการสร้างเว็บแอพที่ทันสมัย มันตั้งอยู่บนไหล่ของห้องสมุดที่ยอดเยี่ยมสองสามแห่ง:
├── /assets/ # assets to be processed by Nuxt
│ └── /layout.sass # main layout of site
├── /components/ # vue components used by pages
│ └── /myheader.vue # site header component
├── /layouts/ # page top-level layouts
│ └── /default.vue # main site layout
├── /pages/ # pages
│ ├── /about.vue # about page
│ ├── /index.vue # home page, lists movies
│ ├── /moviedetails.vue # details page, views a movie
│ └── /movieedit.vue # edit page, edits a movie
├── /static/ # static assets, accessed/exported as is
│ ├── /favicon.ico # favicon
│ └── /exampledata/
│ └── /movies.json # sample list of 4 movies - loaded initially
├── /store/ # data stores managed by Vuex
│ └── /index.js # the single store for this app
├── config.js # app config, select ajax or localstorage
├── nuxt.config.js # nuxtjs config
├── package-lock.json # npm something
├── package.json # list of npm packages required
├── README.md # this doc
├── serverapi_ajax.js # API, talks AJAX to a real backend
└── serverapi_localstorage.js # API, talks to localStorage
นี่คือวิธีเรียกใช้สตาร์ทเตอร์ในเครื่องในพื้นที่ของคุณ:
$ git clone https://github.com/tomimick/tm-nuxtjs-starter
$ cd tm-nuxtjs-starter
$ npm install
$ npm run devจากนั้นชี้เบราว์เซอร์ของคุณไปที่ http: // localhost: 3000
เมื่อมีการแก้ไขไฟล์ใด ๆ ที่ขึ้นอยู่กับการเปลี่ยนแปลงจะถูกโหลดร้อนและสามารถมองเห็นได้ทันที สนุกกับ dev!
Nuxtjs เป็นกรอบเล็ก ๆ น้อย ๆ ที่นำโครงสร้างและฟังก์ชั่น Core Spa มาสู่แอพที่ใช้ Vue มันทำให้ง่ายต่อการเริ่มต้นการพัฒนาแอปช่วยให้คุณมุ่งเน้นไปที่แอพหลักของคุณ แต่ยังมีแนวทางปฏิบัติเพื่อแนะนำคุณในการสร้างแอพที่ซับซ้อนยิ่งขึ้น
nuxt.js ได้รับประโยชน์โดยย่อ:
nuxt.js ใช้ประโยชน์จากส่วนประกอบไฟล์เดียวของ Vue ซึ่งเป็นทางออกที่ยอดเยี่ยมในการห่อหุ้มเทมเพลตตรรกะและสไตล์ขององค์ประกอบ Vue เข้าด้วยกันในไฟล์ต้นฉบับเดียวกัน
nuxt.js ได้รับแรงบันดาลใจโดยตรงจาก nextjs ซึ่งเป็นกรอบเดียวกันสำหรับระบบนิเวศปฏิกิริยา nuxt.js แนะนำลำดับชั้นเพิ่มเติมเล็กน้อยมีโฟลเดอร์สำหรับเลย์เอาต์ปลั๊กอินและมิดเดิลแวร์
เนื่องจาก NUXTJS มีเครื่องมือในการสนับสนุนการพัฒนาแอพที่มีข้อมูลและรหัสจำนวนมากจึงมักจะต้องใช้โซลูชันการจัดการสถานะบางอย่างสำหรับการแบ่งปันข้อมูลในหน้าและส่วนประกอบ
Nuxtjs รวมเข้ากับห้องสมุดการจัดการสถานะ Vuex นี่เป็นห้องสมุดที่สร้างขึ้นมาอย่างดีซึ่ง Evan You ถูกประพันธ์โดยคนที่มีความสามารถคนเดียวกันที่สร้าง Vue Vuex นั้นง่ายพอที่จะเรียนรู้ได้อย่างรวดเร็ว คุณสร้างร้านค้าของคุณจากข้อมูลสถานะและฟังก์ชั่นการกลายพันธุ์และการกระทำ
ในการเปิดใช้งาน Vuex คุณเพียงแค่วางส่วนประกอบร้านค้าในร้านค้า/ โฟลเดอร์โดยที่ Nuxt หยิบมันขึ้นมาและทำให้มีให้เช่น this.$store ในส่วนประกอบ Vue Page ทั้งหมด นั่นคือทั้งหมดที่ไม่จำเป็นต้องมีการกำหนดค่าเพิ่มเติม
นอกจากนี้ยังเป็นไปได้ที่จะใช้ห้องสมุดของรัฐอื่น ๆ เช่น MOBX แต่เนื่องจากการรวมในตัว Vuex จึงเป็นตัวเลือกที่เป็นธรรมชาติกับ Nuxtjs
ความสามารถในการสร้างไซต์คงที่ด้วย NUXTJS เป็นเครื่องมือสำคัญที่ทำให้สามารถเรียกใช้แอพโดยไม่ต้องใช้เซิร์ฟเวอร์แบ็กเอนด์ คุณสามารถส่งออกไซต์ไปยังหน้า GitHub, Netlify หรือ Amazon S3 (แต่ตรวจสอบ gotchas สองสามตัวพร้อมคำนำหน้าไซต์+ลิงค์พร้อมหน้า GitHub)
การชนะอีกครั้งของรุ่นคงที่คือการสามารถเชื่อมต่อแอพด้วยส่วนที่เหลือไม่ว่าจะเป็นภาษาของแบ็กเอนด์ การแยกส่วนหน้าและแบ็กเอนด์ที่สะอาดยังให้การแยกส่วนที่ระดับเทคโนโลยีและอาจอยู่ในระดับทีม
เพื่อสร้างไซต์คงที่เพียงแค่เรียกใช้
$ npm run export และไฟล์คงที่จะถูกสร้างขึ้นใน dist -folder
ในการทดสอบไซต์คงที่ในพื้นที่ผ่าน WWW -Server ในเครื่องฉันจะเรียกใช้สคริปต์ Python อย่างรวดเร็ว: (Python3 -m http.server)
$ npm run pyserveจากนั้นทดสอบไซต์ที่ http: // localhost: 8000
NUXTJS ทำงานได้ดีสร้างหน้าแรกที่มีขนาด มีขนาดประมาณ 69KB และ gzipped เท่านั้น นี่เป็นผลลัพธ์ที่ดีจากกล่อง
เบราว์เซอร์โหลดโฮมเพจด้วยคำขอทั้งหมด 4 คำขอและหน้าใหม่แต่ละหน้าที่โหลดตามความต้องการจะทำคำขอ JS เดียว เพียงครั้งเดียว
Page Size Inspector Report
URL: https://nuxtjs.tomicloud.com/
REQUEST REQ BYTES
TOTAL___________________________________________4____68,802
Document________________________________________1_______960
-nuxtjs.tomicloud.com/ 960
Script__________________________________________3____67,842
-nuxtjs.tomicloud.com/_.../0b088016842f5f4f735 53,552
-nuxtjs.tomicloud.com/_.../1c78d24f170a4f6d1ea 13,680
-nuxtjs.tomicloud.com/_.../f17a22e19f8ece7f59c 610(รายงานโดยผู้ตรวจการขนาดส่วนขยาย Chrome ของฉัน)
Vue และ React เป็นทั้งตัวเลือกที่ดีสำหรับ Web Dev ที่ทันสมัย: พวกเขามีพื้นฐานมาจากแนวคิด DOM แบบปฏิกิริยา/เสมือนจริงที่ทันสมัยพวกเขามีน้ำหนักเบาและเป็นที่นิยมอย่างมากด้วยระบบนิเวศขนาดใหญ่ นักพัฒนาซอฟต์แวร์ไม่สามารถเลือกระหว่างสองคนนี้ได้เสมอไป แต่ถ้าในที่สุดก็สามารถทำได้ในที่สุดมันอาจเป็นเรื่องของรสชาติที่นักพัฒนาคนหนึ่งคิดว่าดีกว่า การตัดสินใจรสชาติมักจะลงไปในปรัชญาว่าคุณชอบ JSX หรือเทมเพลต
ถ้าฉันสามารถเลือกอาวุธของฉันสำหรับโครงการส่วนหน้าฉันจะเลือก Vue เหตุผลหลักสำหรับฉันคือความสามารถในการอ่านรหัสและประสิทธิภาพส่วนบุคคล ฉันสามารถอ่านและเขียนเทมเพลต HTML ด้วย JavaScript กันได้ง่ายกว่า JSX การวิ่ง JSX แบบยาวอาจเป็นเวียนหัวและค่อนข้างมีเสียงดัง เทมเพลตที่ตกแต่งด้วยคำสั่งเพียงไม่กี่คำเพียงแค่รู้สึกว่าฉันอ่านได้มากขึ้น ฉันชอบที่จะเห็น HTML Building Block ก่อนในบรรทัดไม่ใช่ JSX MAP ()-ฟังก์ชั่นหรือตัวดำเนินการที่สองหรือลัดวงจร ฉันคิดว่าเทมเพลตรู้สึกเป็นธรรมชาติมากขึ้นสำหรับฉันเนื่องจากประวัติการทำงานกับหน่วยการสร้างระดับประถมศึกษา 3 บล็อกของเว็บ, HTML, JS และ CSS นานก่อนที่ JavaScript Overlord เข้ายึดครองโลก
ฉันซาบซึ้งอย่างมากกับการแยกข้อกังวล 3 ข้อที่ฝึกฝนในส่วนประกอบไฟล์เดียว Vue ฉันเดาว่าฉันเป็นตัวแทนของความคิดของโรงเรียนเก่าซึ่งบอกว่ามุมมองตรรกะและสไตล์ควรมีการแยกระหว่างพวกเขาและไม่ควรผสมกันทั้งหมด พวกเขามีเพศสัมพันธ์ระหว่างพวกเขานั่นเป็นสิ่งที่เป็นธรรมชาติและพวกเขาควรอยู่ใกล้กันโดยเฉพาะอย่างยิ่งในไฟล์ต้นฉบับเดียวกัน แต่ไม่ได้ผสม การมีเพศสัมพันธ์ที่แน่นเกินไปอาจจบลงที่สปาเก็ตตี้
อย่างไรก็ตามฉันยังเข้าใจมุมมองที่ตรงข้ามซึ่งระบุว่าปฏิกิริยานั้นดีกว่า Vue และยืนยันว่าเทมเพลต DSL อื่นเป็นวิธีที่อ่อนแอกว่า หากคุณมาจากพื้นหลัง JavaScript React อาจรู้สึกเป็นธรรมชาติมากขึ้นสำหรับคุณ ฉันสามารถทำงานกับตัวเลือกทั้งสองได้ (ฉันยังทำชุดสตาร์ทเตอร์ 2 ชุดนี้!) แต่บางที Vue อาจมีขอบเล็กน้อยสำหรับฉัน
หากคุณต้องการอ่านเกี่ยวกับการอภิปราย Vue vue vs React ล่าสุดให้ตรวจสอบเธรด Reddit นี้
ไปข้างหน้าและใช้ตัวเริ่มต้น Vue นี้และอาจเป็นเซิร์ฟเวอร์ RestPie3 Python REST API ของฉันด้วยและสร้างบริการที่ยอดเยี่ยมของคุณ
นอกจากนี้คุณยังสามารถติดต่อฉันเพื่อถามว่าฉันพร้อมสำหรับงานอิสระหรือไม่
หากคุณชอบ React Over Vue ฉันได้เขียนรหัสสตาร์ทเตอร์เดียวกันนี้ด้วย React NextJs
ใบอนุญาต MIT
