Perancah Vue-cli3.0 untuk mencipta langkah dan proses projek Vue

Vue-cli 3.0 ialah alat perancah baharu berdasarkan Vue.js Ia boleh membantu kami membuat projek Vue dengan cepat dan menyediakan banyak alatan dan konfigurasi yang mudah.

Kini kami akan memperkenalkan langkah demi langkah langkah dan proses mencipta projek menggunakan Vue-cli 3.0.

Pasang Vue-cli 3.0

Mula-mula anda perlu memasang Vue-cli 3.0 secara global, yang boleh dipasang melalui npm:

npm install -g @vue/cli

Selepas pemasangan selesai, anda boleh gunakan arahan berikut untuk mengesahkan sama ada pemasangan berjaya :

vue -V

Jika nombor versi dikeluarkan, ini bermakna pemasangan berjaya.

Buat projek Vue

Laksanakan arahan berikut dalam baris arahan untuk mencipta projek baharu:

vue create my-project

di mana "projek saya" ialah nama projek, mengikut keperluan anda Buat perubahan.

Selepas melaksanakan arahan ini, beberapa pilihan konfigurasi projek akan muncul, seperti sama ada hendak menggunakan Babel, sama ada hendak menggunakan Vuex, sama ada hendak menggunakan ESlint, dsb. Anda boleh memilih mengikut keperluan anda. Jika anda tidak pasti, anda boleh tekan Enter dan gunakan pilihan lalai.

Selepas pemilihan selesai, pemasangan projek akan dijalankan mungkin mengambil sedikit masa untuk menunggu pemasangan selesai.

Jalankan projek

Selepas pemasangan projek selesai, masukkan folder projek dan gunakan arahan berikut untuk menjalankan:

cd my-project
npm run serve

Arahan ini akan memulakan pelayan tempatan yang boleh boleh diakses melalui pelayar http://localhost:8080 Semak kesan projek berjalan.

Struktur direktori projek

Selepas menggunakan Vue-cli 3.0 untuk mencipta projek, struktur direktori projek adalah seperti berikut:

|--node_modules          // 存放项目运行所需的模块
|--public                // 存放静态资源文件
|  |--favicon.ico        // 网站图标
|  |--index.html         // 网站入口文件
|--src                   // 存放项目源码文件
|  |--assets             // 存放静态资源文件
|  |--components         // 存放组件文件
|  |--views              // 存放页面文件
|  |--App.vue            // 页面入口文件
|  |--main.js            // 项目入口文件
|--.gitignore            // Git 版本库忽略文件列表
|--babel.config.js       // Babel 配置文件
|--package.json          // 项目配置文件
|--README.md             // 项目说明文件
|--vue.config.js         // Vue 配置文件

Antaranya, direktori src ialah fail kod sumber projek , direktori public ialah folder yang menyimpan sumber statik. main.js ialah fail kemasukan projek dan App.vue ialah fail kemasukan halaman. Di bawah direktori src, direktori assets menyimpan fail sumber statik, seperti imej, helaian gaya, dsb. Dalam direktori src, components menyimpan fail komponen dan direktori views menyimpan fail halaman.

Fail konfigurasi

Semasa proses penciptaan projek, Vue-cli 3.0 turut menjana beberapa fail konfigurasi lalai, yang terletak dalam direktori akar projek. Antaranya, package.json ialah fail konfigurasi projek, yang mengandungi pengisytiharan kebergantungan, arahan skrip dan maklumat lain yang diperlukan oleh projek. babel.config.js mengandungi maklumat konfigurasi Babel. vue.config.js Mengandungi maklumat konfigurasi Vue.

Ringkasan

Vue-cli 3.0 menjadikannya lebih cekap dan mudah untuk kami mencipta, membangun dan menyelenggara projek Vue dengan menyediakan alatan dan konfigurasi yang mudah. Di atas adalah langkah dan proses mencipta projek Vue menggunakan Vue-cli 3.0. Saya harap ia dapat membantu semua orang.

Atas ialah kandungan terperinci Perancah Vue-cli3.0 untuk mencipta langkah dan proses projek Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!