tm nuxtjs starter Download - tm nuxtjs starter Source Code Unduh

tm nuxtjs starter

Kategori lainnya

1.0.0

Unduh

Ini adalah aplikasi starter dan demo vue minimal namun fungsional saya pada Agustus 2018.

Jika Anda merasa lelah dengan kelelahan JavaScript, dan ingin memulai dengan cepat dan mudah, mengintip ini. Mengembangkan aplikasi Vue modern tidak menjadi lebih sederhana dari ini.

Demo langsung nuxtjs.tomicloud.com

Tangkapan layar

Aplikasi demo adalah situs statis, aplikasi satu halaman dasar yang memiliki beberapa halaman yang dapat dialamatkan yang dimuat malas sesuai permintaan. Ini menunjukkan Operasi Dasar CRUD: 1) Daftar film, 2) Lihat detail film, 3) Buat/edit dan 4) Hapus film.

Demo menggunakan browser localstorage untuk penyimpanan data, yang berarti berjalan tanpa backend. Sumber memang berisi modul yang melakukan panggilan AJAX nyata ke backend istirahat - Anda hanya perlu mengaktifkan modul dan menulis server, dan Anda berada di jalur yang baik untuk memiliki aplikasi web nyata. Saya telah mengembangkan RestPie3 Python Rest API Server yang mengimplementasikan API film sederhana ini sebagai contoh.

Blok bangunan

Aplikasi demo terdiri dari tumpukan teknologi sederhana namun kuat yang menyediakan fungsionalitas penting untuk membuat aplikasi web modern. Itu berdiri di pundak beberapa perpustakaan besar:

Vue adalah perpustakaan javascript yang praktis dan elegan untuk dev modern
Nuxtjs adalah kerangka kerja JavaScript yang ringan yang menyediakan struktur dan fungsionalitas inti dasar untuk aplikasi VUE
Vuex adalah perpustakaan manajemen negara bagian yang cepat dan mudah yang didukung Nuxtjs secara asli
Sass adalah bahasa ekstensi CSS lama yang bagus yang masih baik -baik saja
Axios adalah perpustakaan Ajax yang populer berdasarkan janji

Pohon sumber

 ├── /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

Pengembangan Lokal

Inilah cara menjalankan starter di mesin lokal Anda:

$ git clone https://github.com/tomimick/tm-nuxtjs-starter
$ cd tm-nuxtjs-starter
$ npm install
$ npm run dev

Kemudian arahkan browser Anda ke http: // localhost: 3000.

Ketika salah satu file dependen dimodifikasi, perubahannya dimuat panas dan menjadi terlihat secara instan. Nikmati dev!

Nuxt.js

Nuxtjs adalah kerangka kerja kecil yang hebat yang membawa fungsi struktur dan spa inti ke aplikasi berbasis VUE. Itu membuatnya mudah untuk memulai pengembangan aplikasi, memungkinkan Anda fokus pada aplikasi inti Anda, tetapi juga memberikan praktik untuk memandu Anda dalam membuat aplikasi yang lebih rumit.

Nuxt.js Manfaat Singkatnya:

Konfigurasi Minimum - Tidak perlu bermain -main dengan konfigurasi web atau babel, kecuali jika Anda mau
Menegakkan Struktur ke File Sumber - Panduan untuk Membuat Aplikasi dengan cara yang logis dan terdokumentasi
Memuat ulang halaman yang panas untuk mempercepat pekerjaan dev
Logika perutean spa bawaan
Kode otomatis pemisahan halaman, transpiling JS
Opsi Penyebaran: Ekspor Situs Tanpa Server Statis atau Jalankan Node.js di Backend

Nuxt.js memanfaatkan komponen file tunggal Vue yang merupakan solusi praktis yang sangat baik untuk merangkum templat, logika, dan penataan komponen VUE bersama -sama dalam file sumber yang sama.

Nuxt.js secara langsung terinspirasi oleh NextJS yang merupakan kerangka kerja yang sama untuk ekosistem React. Nuxt.js memperkenalkan sedikit lebih banyak hierarki, memiliki folder untuk tata letak, plugin, dan middleware.

Manajemen Negara Vuex

Karena Nuxtjs memiliki alat untuk mendukung pengembangan aplikasi dengan banyak data dan kode, orang biasanya membutuhkan semacam solusi manajemen negara untuk berbagi data di seluruh halaman dan komponen.

Nuxtjs secara asli terintegrasi dengan Perpustakaan Manajemen Negara Bagian Vuex. Ini adalah perpustakaan yang dibuat dengan baik yang ditulis oleh Evan Anda, pria berbakat yang sama yang menciptakan Vue. Vuex cukup sederhana untuk dipelajari dengan cepat. Anda membangun toko Anda dari data negara, dan fungsi mutasi dan tindakan.

Untuk mengaktifkan Vuex, Anda cukup menjatuhkan komponen toko di toko/ folder, di mana Nuxt mengambilnya dan membuatnya tersedia seperti this.$store di semua komponen halaman Vue. Itu saja, tidak diperlukan konfigurasi lebih lanjut.

Dimungkinkan juga untuk menggunakan perpustakaan negara lain seperti MOBX tetapi karena integrasi bawaan, Vuex adalah pilihan alami dengan Nuxtjs.

Menghasilkan situs statis

Kemampuan untuk menghasilkan situs statis dengan Nuxtjs adalah alat penting yang memungkinkan untuk menjalankan aplikasi tanpa server backend. Anda dapat mengekspor situs ke halaman GitHub, Netlify atau Amazon S3. (Tapi periksa beberapa gotcha dengan awalan situs+tautan dengan halaman github.)

Kemenangan lain dari generasi statis adalah untuk dapat menghubungkan aplikasi dengan backend istirahat apa pun, apa pun bahasa backend. Pemisahan yang bersih dari Frontend dan Backend juga menyediakan modularisasi di tingkat teknologi dan mungkin di tingkat tim.

Untuk menghasilkan situs statis, cukup jalankan

$ npm run export

Dan file statis akan dihasilkan di dist -folder.

Untuk menguji situs statis secara lokal melalui server www lokal, saya dengan cepat menjalankan skrip python: (python3 -m http.server)

$ npm run pyserve

Dan kemudian uji situs di http: // localhost: 8000.

Ukuran JavaScript

Nuxtjs berkinerja baik, menghasilkan halaman beranda yang ukurannya hanya sekitar 69kb Minified and Gzipped . Ini adalah hasil yang bagus di luar kotak.

Browser memuat halaman beranda dengan total 4 permintaan, dan setiap halaman baru yang dimuat sesuai permintaan membuat permintaan JS tunggal sekali .

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

(Laporkan oleh Inspektur Ukuran Halaman Ekstensi Chrome saya.)

Vue vs bereaksi - pendapat saya

Vue dan React keduanya adalah pilihan yang sangat bagus untuk dev modern: mereka didasarkan pada konsep DOM reaktif/virtual modern, mereka ringan dan sangat populer dengan ekosistem besar. Seorang pengembang tidak selalu dapat memilih di antara keduanya, tetapi jika seseorang bisa, pada akhirnya mungkin masalah rasa yang dianggap lebih baik pengembang. Keputusan rasa biasanya bermuara pada filosofi apakah Anda menyukai JSX atau template.

Jika saya dapat memilih senjata saya untuk proyek front-end, saya akan memilih Vue. Alasan utama bagi saya adalah keterbacaan kode dan produktivitas pribadi. Saya dapat membaca dan menulis templat HTML dengan JavaScript lebih mudah daripada JSX. Long JSX Runs bisa memusingkan dan agak bising. Template yang dihiasi hanya dengan beberapa arahan hanya terasa lebih mudah dibaca bagi saya. Saya suka melihat blok bangunan HTML terlebih dahulu di barisan, bukan peta jsx ()-fungsi atau operator terner atau sirkuit pendek. Saya kira template terasa lebih alami bagi saya karena riwayat saya bekerja dengan 3 blok bangunan dasar web, html, js, dan css, jauh sebelum javascript overlord mengambil alih dunia.

Saya sangat menghargai pemisahan 3 kekhawatiran yang dipraktikkan dalam komponen file tunggal Vue. Saya kira saya mewakili pemikiran sekolah lama yang mengatakan bahwa pandangan, logika, dan gaya harus memiliki beberapa pemisahan di antara mereka dan tidak boleh dicampur semuanya. Mereka memang memiliki kopling di antara mereka, itu adalah hal yang alami, dan mereka harus terletak di dekat satu sama lain, lebih disukai dalam file sumber yang sama, tetapi tidak dicampur. Kopling yang terlalu ketat mungkin berakhir di spageti.

Namun, saya juga memahami pandangan berlawanan yang menyatakan bahwa bereaksi lebih baik daripada Vue, dan yang berpendapat bahwa DSL templat lain adalah pendekatan yang lebih lemah. Jika Anda berasal dari latar belakang JavaScript, bereaksi mungkin terasa lebih alami untuk Anda. Saya dapat bekerja dengan kedua pilihan (saya bahkan membuat 2 kit starter ini!) Tapi mungkin Vue memiliki sedikit keunggulan untuk saya.

Jika Anda ingin membaca tentang salah satu debat Vue VS React baru -baru ini, periksa utas Reddit ini.