Rumah > Artikel > hujung hadapan web > Panduan terperinci untuk menggunakan Vue-cli dalam Vue
Vue ialah rangka kerja bahagian hadapan yang popular yang digemari oleh ramai pembangun kerana fleksibiliti dan kemudahan penggunaannya. Untuk membangunkan aplikasi Vue dengan lebih baik, pasukan Vue telah membangunkan alat-Vue-cli yang berkuasa, yang memudahkan untuk membangunkan aplikasi Vue. Artikel ini akan memperkenalkan anda kepada penggunaan Vue-cli secara terperinci.
1. Pasang Vue-cli
Sebelum menggunakan Vue-cli, anda perlu memasangnya terlebih dahulu. Mula-mula, anda perlu memastikan anda telah memasang Node.js. Kemudian, pasang Vue-cli menggunakan npm :
npm install -g vue-cli
Kini, anda telah berjaya memasang Vue-cli!
2. Buat projek baharu menggunakan Vue-cli
Mencipta projek baharu menggunakan Vue-cli adalah sangat mudah. Cuma jalankan arahan berikut dalam konsol:
vue init <template-name> <project-name>
di mana nama templat merujuk kepada nama templat Vue-cli, dan nama projek merujuk kepada nama projek yang ingin anda buat.
Sebagai contoh, jika anda ingin mencipta projek yang dipanggil my-project berdasarkan templat webpack, anda boleh menggunakan arahan berikut:
vue init webpack my-project
Vue-cli akan menggesa anda untuk memasukkan beberapa pilihan, seperti nama projek, pengarang, penerangan projek, dan banyak lagi. Setelah selesai, Vue-cli akan mencipta direktori baharu bernama my-project di bawah direktori semasa.
3. Templat Vue-cli
Vue-cli mempunyai beberapa templat terbina dalam yang boleh digunakan untuk membuat projek. Jika anda ingin menggunakan templat lain, anda boleh menambahkannya pada sistem anda semasa pemasangan.
Berikut ialah templat terbina dalam Vue-cli:
Selain templat terbina dalam di atas, terdapat juga beberapa templat yang diselenggara oleh komuniti, seperti nuxt.
4. Struktur projek Vue-cli
Projek yang dibuat oleh Vue-cli mempunyai struktur standard. Berikut ialah struktur projek Vue-cli berdasarkan templat webpack:
├── build/ // webpack配置文件 │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config/ │ ├── dev.env.js │ ├── index.js // 用于根据环境加载不同的配置文件 │ ├── prod.env.js ├── node_modules/ ├── src/ // 项目源码 │ ├── assets/ // 静态资源文件 (images, fonts) │ ├── components/ // Vue组件 │ ├── App.vue // 根组件 │ └── main.js ├── static/ // 静态文件 (favicon.ico) ├── test/ // 测试文件 ├── package.json ├── README.md
5. Perintah Vue-cli
Vue-cli menyediakan beberapa arahan yang sangat berguna yang boleh membantu anda membangunkan aplikasi dengan lebih mudah.
Jalankan pelayan pembangunan. Ini akan memulakan pelayan pembangunan pada localhost:8080 dan memuat semula aplikasi secara automatik apabila anda membuat perubahan.
npm run dev
Bina apl. Ini akan membungkus dan mengoptimumkan kod untuk pengeluaran, mengurangkan saiz fail dan menjana fail statik supaya anda boleh memuat naiknya ke pelayan web anda.
npm run build
Jalankan ujian unit. Ini akan menjalankan ujian unit yang dikonfigurasikan dan mengeluarkan keputusan ujian.
npm run unit
Jalankan ujian hujung ke hujung. Ini akan menjalankan ujian hujung ke hujung yang dikonfigurasikan dan mengeluarkan keputusan ujian.
npm run e2e
Jalankan penyemak kod statik ESLint. Ini akan mengimbas kod anda dan mengeluarkan sebarang ralat dan amaran.
npm run lint
6 Ringkasan
Vue-cli ialah alat yang sangat berkuasa yang membolehkan pembangun mencipta dan menggunakan aplikasi Vue dengan lebih mudah. Artikel ini memperkenalkan pemasangan, penggunaan dan arahan Vue-cli, serta struktur projek dan templat Vue-cli. Jika anda seorang pembangun Vue, Vue-cli ialah alat yang mesti dikuasai, yang akan meningkatkan kecekapan pembangunan anda.
Atas ialah kandungan terperinci Panduan terperinci untuk menggunakan Vue-cli dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!