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.

Arahan langkah permulaan projek VUE

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 cmd

cnpm install vue-cli -g

Pemasangan berjaya seperti yang ditunjukkan dalam rajah

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. Gaya

less_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.

• Jika ia sass, cuma jalankan npm install sass sass-loader --save-dev untuk memasang dependencies. Atau ($npm intall sass-loader --save; $npm install node-sass --save)
Memasang versi terkini projek kurang pemuat projek vue menggesa ralat : Gagal menyusun dengan 1 ralat

• 
  ialah masalah versi. Penyelesaiannya ialah menurunkan versi kurang pemuat saya ialah 2.5.2

Nyahpasang versi terkini dahulu

Pasang versi kurang pemuat 5.0.0

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 -D123

Terdapat dua penyelesaian:

1) Tambah - selepas arahan -legacy- peer-deps

2) 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!