Meningkatkan alur kerja Anda Vue.js dengan Vue CLI 3

Kita tidak dapat membayangkan pengembangan web modern tanpa bantuan alat Command Line Interface (CLI). Mereka sangat memfasilitasi dan mempercepat alur kerja pengembangan dengan mengurangi jumlah tugas yang berulang dan membosankan. Menyiapkan proyek secara manual, dengan semua linting, building, testing, preprocessing, optimizing, dan fitur dependencies tracking tidak terdengar seperti pekerjaan yang menyenangkan, bukan?

Itulah sebabnya semua kerangka kerja pengembangan sisi klien modern (seperti Angular, React, dll.) Menawarkan versi tools CLI mereka sendiri, dan Vue.js tidak terkecuali. Tetapi dengan versi ketiga terbaru, Vue CLI akan selangkah lebih maju dari yang lain. Sekarang tidak hanya sangat kuat dan fleksibel, tetapi juga dilengkapi dengan GUI yang lengkap. Ya, Anda dengar. Vue CLI 3 menawarkan full graphical user interface out-of-the-box.

Memulai proyek Vue.js baru sekarang lebih mudah dari sebelumnya dengan Vue CLI baru dan Vue UI GUI. Tutorial ini akan menunjukkan cara menempatkan Vue CLI untuk digunakan dan bagaimana Vue UI dapat mempercepat alur kerja Anda lebih jauh. Mari kita mulai!

Apa itu Vue CLI?

Vue CLI adalah seperangkat tools untuk pembuatan rapid prototipe, perancah aplikasi yang mudah, dan manajemen proyek yang efisien. Ini terdiri dari tiga main tool belts:

• CLI adalah paket npm yang dipasang secara global, yang menyediakan fungsionalitas inti melalui perintah vue. Hal ini memungkinkan kita untuk men-scaffold proyek baru dengan mudah (vue create), atau hanya dengan cepat membuat prototipe ide mentah (vue serve). Jika kita menginginkan kontrol yang lebih konkret dan visual atas proyek-proyek kita, kita dapat membuka versi GUI dari CLI dengan menjalankan perintah vue ui.
• CLI Service adalah ketergantungan pengembangan (file biner vue-cli-service), diinstal secara lokal ke dalam setiap proyek yang dibuat dengan CLI. Hal ini memungkinkan kita untuk mengembangkan proyek kita (vue-cli-service serve), mengemasnya untuk produksi (vue-cli-service build), dan juga untuk memeriksa konfigurasi proyek webpack internal (vue-cli-service inspect).
• CLI Plugins adalah paket npm yang menyediakan fitur tambahan untuk proyek kita. Nama itu dimulai dengan @vue/cli-plugin- (untuk plugin built-in) atau vue-cli-plugin- (untuk plugin community). Kita dapat menambahkannya setiap saat dari proses pengembangan melalui perintah vue add.

Pada bagian selanjutnya, kita akan mengeksplorasi semua mur dan baut dari tools dan utility di atas, tetapi pertama-tama, mari kita lihat fitur-fitur aktual yang membuat Vue CLI begitu kuat dan fleksibel.

Vue CLI adalah Sistem Fitur Lengkap untuk Meningkatkan workflow Vue.js kita

Vue CLI mempercepat dan mempermudah pengembangan proyek Vue.js berkat koleksi fiturnya yang hebat. Mari kita lihat fitur-fitur tersebut:

• Plugin-based architecture. Vue CLI benar-benar dibangun di seputar plugin, yang membuatnya sangat fleksibel dan dapat diperluas. Kita dapat memilih plugin mana yang akan ditambahkan selama proses pembuatan proyek. Tetapi kita tidak terbatas hanya untuk ini, kita dapat menambahkan sejumlah plugin kapan saja setelah pembuatan proyek.
• Vue CLI benar-benar dapat dikonfigurasi, diperluas, dan dapat diupgrade.
• Seperangkat plugin resmi yang sudah terpasang, yang mengintegrasikan tools first-class dari ekosistem front-end (Babel, ESLint, TypeScript, PWA, Jest, Mocha, Cypress, dan Nightwatch).
• Single default preset, yang dapat kita modifikasi sesuai kebutuhan kita selama pembuatan proyek atau sesudahnya.
• Tidak perlu eject. Berbeda dengan tools CLI React dan Angular, kita dapat dengan aman memeriksa dan mengubah konfigurasi webpack proyek kita kapan saja setelah pembuatan tanpa perlu mengeluarkan aplikasi dan beralih ke konfigurasi manual.
• Support Multi-page.
• Prototipe instan tanpa konfigurasi apa pun.
• Target build yang berbeda memungkinkan kita memproduksi berbagai versi proyek kita. Kita dapat menggunakan satu dan basis kode yang sama dan membuatnya sebagai aplikasi, pustaka, atau komponen web.
• Fitur mode modern. Ini akan membangun aplikasi kita untuk browser modern, tetapi dengan fallback otomatis untuk yang lebih lama. Keren, ya?
• GUI yang lengkap untuk membuat, memperbarui, dan mengelola proyek-proyek kompleks dengan mudah.
• UI Plugin API. Vue UI memaparkan API plugin yang dapat kita gunakan untuk menambahkan fungsi khusus ke versi GUI dari CLI.
• Banyak plugin yang berguna dari komunitas.

Memulai dengan Vue CLI

Setelah kita belajar tentang magic CLI Vue, saatnya untuk melihatnya dalam praktek. Pertama, kita perlu menginstal Vue CLI 3. Diperlukan Node.js 8.9+ (8.11.0+ disarankan), jadi kita perlu memastikan bahwa kita memilikinya di komputer kita. Lalu kita hanya membuka terminal atau command prompt kita, dan jalankan:

1

npm install -g @vue/cli

Setelah instalasi selesai, kita dapat mulai menggunakan perintah vue. Untuk memeriksa apakah semuanya berfungsi dengan benar, kita menjalankan vue --version. Ini harus menampilkan versi Vue CLI yang diinstal. Sekarang, mari kita jelajahi apa yang sebenarnya bisa kita lakukan dengan Vue CLI.

Prototipe Instan

Meskipun Vue CLI dirancang terutama untuk bekerja dengan proyek yang kompleks, ini memungkinkan kita untuk mencoba ide mentah kita dengan cepat dan mudah. Fitur prototyping instannya dapat diaktifkan dengan menginstal addon CLI Service global.

1

npm install -g @vue/cli-service-global

Mulai sekarang, kita bisa menggunakan perintah vue serve kapan pun kita mau. Ayo coba. Kita membuat file App.vue dengan konten berikut:

1

<template>

2

  <h1>Hello, Vue!</h1>

3

</template>

Kemudian, di direktori yang sama, kita jalankan:

1

vue serve

Ini akan memulai server Vue CLI development dan akan menjalankan aplikasi di http://localhost:8080/. Ketika kita membuka browser di alamat ini, kita harus melihat Hello, Vue! heading.

Membuat Proyek Baru

Bagian sebelumnya hanya pemanasan. Mari sekarang buat sesuatu yang lebih rumit.

vue create command menggunakan proses interaktif untuk memilih opsi untuk proyek baru. Mari kita jalankan dan ikuti seluruh pilihannya.

1

vue create vuecli-project

Buat Proyek Baru Dengan Vue CLI

Di jendela pertama, kita diundang untuk memilih preset. Hanya ada satu preset yang tersedia di luar kotak, yang disebut default. Kita akan memilih opsi kedua, yaitu secara manual memilih fitur yang kita butuhkan untuk proyek, dan tekan Enter untuk melanjutkan.

Di jendela berikutnya, kita menggunakan tombol panah untuk menavigasi ke atas dan ke bawah daftar fitur dan spasi untuk memilih apa yang kita inginkan. Di sini, bersama dengan Babel dan Linter/Formatter yang sudah dipilih, saya juga memeriksa Router dan Vuex. Setelah Anda memilih fitur yang dibutuhkan, tekan Enter untuk melanjutkan.

Di jendela berikutnya, kita ditanya apakah akan menggunakan mode riwayat untuk router. Saya hanya menekan Enter untuk menerima default Yes.

Di jendela berikutnya, kita perlu memilih bagaimana kita ingin mengkonfigurasi Linter. Saya memilih ESLint + Prettier.

Di jendela berikutnya, kita pilih ketika Linter digunakan untuk memeriksa proyek. Saya memilih Lint on save, yang berlaku setiap kali file disimpan.

Di jendela berikutnya, kita perlu memutuskan bagaimana kita ingin mengkonfigurasi proyek kita. Pilih apakah Anda ingin menggunakan file konfigurasi terpisah untuk masing-masing fitur, atau untuk menyertakan semua pengaturan konfigurasi dalam file package.json. Saya lebih memilih satu file, dan telah memilih opsi In package.json.

Di jendela terakhir, kita memiliki kemampuan untuk menyimpan seluruh konfigurasi pembuatan proyek sebagai preset yang mudah digunakan untuk proyek-proyek mendatang. Saya menyimpan milik saya sebagai spa-simple. Preset disimpan dalam folder pengguna di dalam file .vuerc.

Ketika kita menyelesaikan proses pembuatan, proyek akan dibuat dan dikonfigurasikan, dan paket yang diperlukan akan diunduh dan dipasang.

Menjelajahi Struktur Proyek

Di bagian ini, kita akan menjelajahi apa yang dibuat oleh Vue CLI untuk kita.

Dalam folder proyek yang ditunjukkan di atas, kita memiliki file dan folder berikut:

• Folder node_modules berisi paket yang diperlukan oleh aplikasi dan tools development.
• Folder public berisi aset proyek statis, yang tidak akan dimasukkan dalam proses bundling.
• Folder src berisi aplikasi Vue.js dengan semua sumber daya.
• .gitignore berisi daftar file dan folder yang dikecualikan dari kontrol versi Git.
• babel.config.js berisi pengaturan konfigurasi untuk kompiler Babel.
• package.json berisi daftar paket yang diperlukan untuk pengembangan Vue.js serta perintah yang digunakan untuk development tools.
• package-lock.json berisi daftar lengkap paket, yang dibutuhkan oleh proyek, dan dependensinya.
• README.md berisi informasi umum tentang proyek.

Folder src yang baru dibuat

Sekarang mari kita lihat lebih dekat ke folder src:

Di folder src yang ditunjukkan di atas, kita memiliki file dan folder berikut:

• Folder asets digunakan untuk sumber daya statis yang dibutuhkan oleh aplikasi dan yang akan dimasukkan dalam proses bundling.
• Folder component digunakan untuk komponen aplikasi.
• Folder views digunakan untuk komponen yang akan ditampilkan menggunakan fitur routing URL.
• App.vue adalah komponen root.
• main.js adalah file JavaScript yang membuat instance object Vue.
• router.js digunakan untuk mengkonfigurasi router Vue.
• store.js digunakan untuk mengkonfigurasi penyimpanan data yang dibuat dengan Vuex.

Mengubah Konfigurasi Proyek

Konfigurasi proyek default berisi pengaturan yang masuk akal, tetapi jika kita perlu, kita dapat mengubahnya dengan menambahkan file vue.config.js di folder project, atau dengan menambahkan bagian vue ke file package.json. Mari coba yang pertama: kita membuat file vue.config.js dan meletakkan opsi berikut di dalamnya:

1

module.exports = {

2

  runtimeCompiler: true

3

}

Ini akan memungkinkan komponen untuk mendefinisikan template mereka sebagai string, daripada menggunakan elemen template. Untuk menjelajahi serangkaian opsi konfigurasi lengkap yang dapat Anda gunakan, kunjungi halaman Konfigurasi Vue CLI.

Mengembangkan Proyek

Seperti yang kita lihat di atas, Vue CLI Service dilengkapi dengan tiga skrip default: serve, build, dan inspect. Yang pertama digunakan untuk proses pengembangan. Kita menjalankan proyek kita dengan perintah npm run serve:

Ketika kita membuka aplikasi kita di browser, kita akan melihat halaman berikut:

Ini adalah halaman Home.vue, yang menggunakan komponen HelloWorld.vue.

Perintah serve memulai development server, berdasarkan webpack-dev-server, dengan fitur Hot Module Replacement (HMR) yang berfungsi. Ini berarti bahwa ketika kita membuat perubahan dalam komponen kita dan menyimpannya, mereka akan segera tercermin dan halaman akan diperbarui di browser.

Menambahkan Fungsionalitas Baru untuk Proyek Dengan Plugin CLI Vue

Pada beberapa titik pengembangan aplikasi kita, kita mungkin perlu menambahkan beberapa fungsi tambahan untuk proyek, dan untuk itu kita perlu menginstal plugin Vue CLI. Plugin Vue CLI dapat memodifikasi konfigurasi webpack dan menyuntikkan perintah baru ke vue-cli-service. Untuk menginstal plugin, kita menggunakan perintah vue add.

Anggaplah kita ingin menggunakan komponen Bootstrap untuk proyek kita. Untungnya, ada plugin bootstrap-vue, yang dapat menyediakannya untuk kita. Untuk menginstalnya, kita menjalankan:

1

vue add bootstrap-vue

Setelah instalasi plugin, di folder src, kita akan menemukan folder plugins baru di mana plugin baru ditempatkan.

Sekarang, untuk menguji fungsionalitas plugin, mari kita memodifikasi file About.vue:

1

<template>

2

  <div class="about">

3

    <b-jumbotron text-variant="success" header="Vue CLI 3" lead="Standard Tooling for Vue.js Development">

4

        <p>For more information visit website</p>

5

      <b-btn variant="primary" href="https://cli.vuejs.org/">More Info</b-btn>

6

    </b-jumbotron>

7

  </div>

8

</template>

Dan ketika kita menunjuk ke halaman About di browser, kita akan melihat halaman diperbarui dan ditata dengan Bootstrap:

Membangun Proyek untuk Produksi

Ketika aplikasi siap untuk digunakan, Anda perlu membuat satu set bundel yang hanya berisi kode aplikasi dan konten, bersama dengan modul yang mereka andalkan, sehingga file-file ini dapat disebarkan ke server production HTTP.

Membangun Aplikasi

Untuk membangun aplikasi, kita menjalankan:

1

npm run build --modern

Argumen --modern menciptakan dua versi aplikasi. Salah satunya adalah ditargetkan untuk browser modern yang mendukung fitur JavaScript terbaru, dan yang lainnya adalah fallback untuk browser lama yang membutuhkan library tambahan untuk menangani fitur-fitur tersebut. Yang keren adalah setelah kita deploy aplikasi, pemilihan versi mana yang akan digunakan sepenuhnya otomatis!

Catatan: Saat kita menjalankan perintah build, Vue CLI memungkinkan kita untuk menentukan opsi --target, yang memungkinkan kita menggunakan basis kode kita untuk berbagai kasus penggunaan. Target build default ditetapkan untuk membuat aplikasi. Kita memiliki dua opsi lain untuk dipilih: untuk membuat kode kita sebagai library atau sebagai komponen web. Periksa halaman Build Targets untuk lebih jelasnya.

Menjelajahi Folder dist

Ketika proses build selesai, folder dist dibuat di root proyek. Mari jelajahi isinya:

File index.html akan menjadi titik masuk untuk aplikasi. Ini berisi elemen link dan script yang akan memuat semua file CSS dan JavaScript yang diperlukan dari folder css dan js.

Jadi sekarang, kita siap untuk menerapkan aplikasi kita ke server produksi. Ada banyak pilihan untuk dipilih. Anda dapat mempelajari banyak dari mereka dengan mengunjungi halaman Deployment.

Mari GUI-fy Proyek Kita Dengan Vue UI

Vue CLI 3 adalah yang sangat kuat, tetapi ini datang dengan harga. Ada terlalu banyak pilihan, perintah, dan opsi untuk mengonfigurasi dan mengingat. Ini membuatnya lebih rumit dan sulit untuk dikerjakan. Untuk membawa semuanya kembali ke keadaan yang mudah dan menyenangkan, Guillaume Chau menciptakan Vue UI, yang secara signifikan menyederhanakan development experience dan membuatnya lebih mudah didekati. Pada awalnya mungkin terdengar agak aneh untuk menggabungkan tool CLI dengan graphical interface, tetapi seperti yang akan Anda lihat nanti, simbiosis luar biasa ini cukup kuat dan efisien.

Menciptakan Ulang Proyek Kita Dengan Vue UI

Di bagian ini, kita akan membahas seluruh proyek yang sama yang kita buat sebelumnya, tetapi kali ini kita akan menggunakan Vue UI.

Vue UI dibuat dengan kerangka UI sendiri dan tidak ada Electron yang diperlukan untuk menjalankannya di browser. Cukup jalankan perintah vue ui, di mana pun direktori:

1

vue ui

Vue Project Manager diluncurkan dengan tab Projects dipilih. Belum ada proyek yang ada. Untuk memiliki beberapa proyek yang tercantum di sini, kita perlu membuat itu melalui UI, atau mengimpor proyek yang dibuat dengan CLI. Mari kita lihat bagaimana kita bisa membuat proyek baru.

Kita beralih ke Create tab, arahkan ke direktori yang diinginkan untuk aplikasi kita, dan klik tombol Create a new project here.

Di layar berikutnya, kita memberikan nama ke folder proyek dan memilih manajer paket yang kita sukai.

Di layar berikutnya, kita diizinkan memilih preset untuk proyek tersebut. Ini dapat berupa default, manual, remote, atau preset khusus yang telah kita buat sebelumnya. spa-simple adalah contoh dari preset kustom. Di sini, kita memilih Manual.

Di layar berikutnya, kita memilih plugin yang ingin kita pasang.

Terakhir, kita menetapkan pengaturan konfigurasi untuk plugin yang telah kita pilih untuk dipasang. Saat kita siap, kita menekan tombol Creat Project.

Sekarang proyek akan dibuat dan kita akan dialihkan ke dasbor proyek.

Menggunakan Dasbor Proyek Vue UI

Di bagian Plugins semua plugin yang diinstal terdaftar. Untuk menginstal plugin baru, kita menekan tombol Add plugin.

Di sini, kita dapat mencari plugin yang kita butuhkan dan ketika kita menemukannya, kita menekan tombol Install. Dalam kasus kita, kita mencari dan menginstal plugin bootstrap-vue.

Ketika plugin diinstal, di tab Configuration, kita dapat mengatur opsi yang disediakan.

Pada tab File changed, kita dapat memeriksa file mana yang terpengaruh dan bagaimana. Di sini, saya tidak ingin melakukan perubahan apa pun, jadi saya menekan tombol Skip.

Di bagian Dependencies kita telah mencantumkan semua dependency utama dan pengembangan. Untuk menambah dependency, kita klik tombol Instal dependency.

Di jendela modal, kita dapat mencari main or development dependencies dan menginstalnya.

Di bagian Configuration, kita dapat menyesuaikan pengaturan yang disediakan untuk plugin yang telah kita tambahkan. Di sini, kita memiliki pengaturan untuk Vue CLI sendiri dan untuk plugin ESLint.

Bagian Tasks memberi kita cara mudah untuk menggunakan semua perintah yang tersedia yang disediakan dari Vue CLI dan dari plugin lain. Di layar ini, task serve dipilih. Kita dapat mengubah parameternya dengan menekan tombol Parameters.

Di jendela modal, kita memilih parameter yang ingin kita jalankan tasks nya.

Saat kita menjalankan task serve, dasbor akan memperbarui dengan beberapa informasi berguna.

Ketika kita beralih ke tab Output, kita mendapatkan log untuk proses task.

Saat kita beralih ke tab Analyzer, kita mendapatkan grafik bagus yang merangkum informasi untuk keseluruhan proyek.

Task build hampir mirip dengan task serve dengan pengecualian bahwa yang pertama menghasilkan production bundle yang dapat digunakan untuk menyebarkan aplikasi.

Kita dapat mengatur parameter untuk task build dengan cara yang sama seperti dengan task serve.

Field Output dari task inspect memberi kita informasi tentang konfigurasi webpack yang resolved.

Dan begitulah. Kita berhasil menciptakan kembali proyek kita dengan Vue UI. Tetapi ketika kita melihat proses pembuatan dan konfigurasi lebih mudah dan jauh lebih menyenangkan ketika kita menggunakan GUI.

Kesimpulan

Dalam tutorial ini kita belajar bahwa Vue CLI adalah sistem yang lengkap untuk pengembangan web modern. Hal ini memungkinkan kita untuk beroperasi dengan seluruh ekosistem Vue dan tools pihak ketiga dengan cepat dan mudah. Tentu saja, kita tidak diharuskan menggunakan Vue CLI untuk proyek Vue.js kita. Ini benar-benar pilihan kita. Tetapi ketika kita bertujuan untuk speed dan quality, Vue CLI ada di sini untuk membantu dalam membuat, mengelola, dan menyebarkan proyek-proyek kita secara profesional.