VueJS - Pengaturan Lingkungan

Ada banyak cara untuk menginstal VueJS. Beberapa cara tentang bagaimana melakukan instalasi dibahas di depan.

Menggunakan tag <script> langsung di file HTML

<html>
   <head>
      <script type = "text/javascript" src = "vue.min.js"></script>
   </head>
   <body></body>
</html>

Buka situs beranda https://vuejs.org/v2/guide/installation.htmldari VueJS dan unduh vue.js sesuai kebutuhan. Ada dua versi untuk digunakan - versi produksi dan versi pengembangan. Versi pengembangan tidak diminimalkan, sedangkan versi produksi diminimalkan seperti yang ditunjukkan pada tangkapan layar berikut. Versi pengembangan akan membantu dengan peringatan dan mode debug selama pengembangan proyek.

Menggunakan CDN

Kami juga dapat mulai menggunakan file VueJS dari perpustakaan CDN. Tautanhttps://unpkg.com/vueakan memberikan versi terbaru VueJS. VueJS juga tersedia di jsDelivr (https://cdn.jsdelivr.net/npm/vue/dist/vue.js) dan cdnjs (https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js).

Kami dapat meng-host file di bagian akhir kami, jika diperlukan dan memulai pengembangan VueJS.

Menggunakan NPM

Untuk aplikasi berskala besar dengan VueJS, disarankan untuk menginstal menggunakan paket npm. Itu datang dengan Browserify dan Webpack bersama dengan alat lain yang diperlukan, yang membantu pengembangan. Berikut adalah perintah untuk menginstal menggunakan npm.

npm  install vue

Menggunakan CLI Command Line

VueJS juga menyediakan CLI untuk menginstal vue dan memulai aktivasi server. Untuk menginstal menggunakan CLI, kita perlu menginstal CLI yang dilakukan menggunakan perintah berikut.

npm install --global vue-cli

Setelah selesai, ini menunjukkan versi CLI untuk VueJS. Diperlukan beberapa menit untuk penginstalan.

+ [email protected]
added 965 packages in 355.414s

Berikut adalah perintah untuk membuat proyek menggunakan Webpack.

vue init webpack myproject

Untuk memulai, gunakan perintah berikut.

cd myproject
npm install
npm run dev

Setelah kami menjalankan npm run dev, itu memulai server dan menyediakan url untuk tampilan yang akan dilihat di browser seperti yang ditunjukkan pada tangkapan layar berikut.

Struktur proyek yang menggunakan CLI terlihat seperti berikut.