Rumah > Artikel > hujung hadapan web > Apakah maksud melaksanakan arahan pada baris arahan untuk memulakan projek vue?
Melaksanakan arahan "vue init webpack vue-project" pada baris arahan bermakna memulakan projek vue ini bermaksud memulakan projek "vue-project" berdasarkan webpack di mana "vue-project" merujuk kepada milik pengguna Nama projek yang ditentukan Nama projek tidak boleh menggunakan huruf besar.
Persekitaran pengendalian tutorial ini: sistem windows10, versi vue3, komputer DELL G3.
1. Pasang Node.js;
Pakej pemasangan tetingkap Pakej pemasangan Mac Semak sama ada pemasangan berjaya nod -v
Jika versi dipaparkan, ia berjaya, seperti yang ditunjukkan dalam rajah:
2 , pasang vue-cli scaffolding;
Buka tetingkap baris arahan cmd (tetingkap+R, masukkan cmd dan kemudian Enter) Laksanakan arahan di bawah cmdcnpm install vue-cli -g
3 Buka cmd dalam folder tempat anda merancang untuk membina projek dan melaksanakan Perintah
(Nota: vue-project ialah nama projek tersuai, nama projek tidak boleh menggunakan huruf besar)vue init webpack vue-project
seperti yang ditunjukkan dalam gambar:
Selepas permulaan selesai Seperti yang ditunjukkan dalam gambar:
Permulaan yang berjaya untuk projek adalah seperti yang ditunjukkan dalam gambar:
Kesan halaman selepas permulaan yang berjaya adalah seperti yang ditunjukkan dalam gambar:
Butiran lain ditambah: pakej pemasangan2, bagaimana untuk mengalih keluar nombor # selepas http://localhost:8081/#/ dalam bar alamat
Buka editor Cari projek, buka indeks. js di bawah penghala di bawah src dalam direktori, tukar mod kepada mod:'history' seperti yang ditunjukkan dalam gambar:
3, tidak perlu menyalin dan menampal alamat selepas memulakan projek , iaitu selepas menjalankan npm run dev, halaman akan dibuka secara automatik dalam penyemak imbas
Buka projek dalam editor dan cari index.js di bawah konfigurasi, dan pergi ke bawah untuk mencari autoOpenBrowser: false. , sekitar baris 18. Tukar sahaja palsu kepada benar. Seperti yang ditunjukkan dalam gambar:
Apabila membuat cawangan baharu dan mengkonfigurasi penghalaan, beri perhatian kepada laluan:
4. Gayaless_loader bergantung pada kurang, kedua-duanya perlu dipasang, yang boleh dipasang dalam kebergantungan projek (vue ui) atau pemasangan terminal
Jika ralat berikut berlaku, ini bermakna tiada gaya pemasangan bergantung. Pergantungan gaya pemasangan terminal:Jika ia tetap, laksanakan npm install stylus-loader css-loader style-loader - -save-dev cuma pasang dependencies
Jika kurang, laksanakan npm install less less-loader --save-dev untuk memasang dependencies.
ialah masalah versi. Penyelesaiannya ialah menurunkan versi kurang pemuat saya ialah 2.5.2
ERROR Failed to compile with 1 errors 14:20:44 error in ./src/components/HelloWorld.vue Module build failed: TypeError: loaderContext.getResolve is not a function at createWebpackLessPlugin (D:\work\vue3.0\gcmmobile\node_modules\less-loader\dist\utils.js:31:33) at getLessOptions (D:\work\vue3.0\gcmmobile\node_modules\less-loader\dist\utils.js:148:31) at Object.lessLoader (D:\work\vue3.0\gcmmobile\node_modules\less-loader\dist\index.js:27:49) @ ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-469af010","scoped":true,"hasInlineConfig":false}!./node_modules/less-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/HelloWorld.vue 4:14-378 14:3-18:5 15:22-386 @ ./src/components/HelloWorld.vue @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js1234567891011121314
Kod ERR 5.npm ERESOLVE:
Ralat semasa menjalankan pemasangan npm:
yarn remove less-loader npm uninstall less-loader123
Input konsol npm -V mendapati versi npm saya ialah 7.x Ya, kerana versi npm7.x lebih ketat pada beberapa arahan berbanding npm6.x, ralat ini dilaporkan secara tidak dapat dijelaskan
yarn add less-loader@5.0.0 npm install less-loader@5.0.0 -D123Terdapat dua penyelesaian: 1) Tambah - selepas arahan -legacy- peer-deps2) Menggunakan npm6.x
npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: operatingsystem@0.1.0 npm ERR! Found: vue@3.1.5 npm ERR! node_modules/vue npm ERR! vue@"^3.0.0" from the root project npm ERR!12345678
Petua: Menggunakan npm@6 tidak memerlukan nyahpasang npm@7. Anda boleh menggunakan npx untuk menentukan versi npm. Contohnya: npx -p npm@6 npm i --legacy-peer-deps
Jika ini tidak berfungsi serta-merta, anda boleh memadamkan node_modules dan package-lock.json dahulu
Cadangan berkaitan: tutorial video vue.js
Atas ialah kandungan terperinci Apakah maksud melaksanakan arahan pada baris arahan untuk memulakan projek vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!