Rumah  >  Artikel  >  hujung hadapan web  >  Apakah maksud melaksanakan arahan pada baris arahan untuk memulakan projek vue?

Apakah maksud melaksanakan arahan pada baris arahan untuk memulakan projek vue?

青灯夜游
青灯夜游asal
2023-01-13 17:42:292476semak imbas

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.

Apakah maksud melaksanakan arahan pada baris arahan untuk memulakan projek vue?

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:

Apakah maksud melaksanakan arahan pada baris arahan untuk memulakan projek vue?

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

Apakah maksud melaksanakan arahan pada baris arahan untuk memulakan projek vue?

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:

Apakah maksud melaksanakan arahan pada baris arahan untuk memulakan projek vue?Selepas permulaan selesai Seperti yang ditunjukkan dalam gambar:

Apakah maksud melaksanakan arahan pada baris arahan untuk memulakan projek vue?Permulaan yang berjaya untuk projek adalah seperti yang ditunjukkan dalam gambar:

Apakah maksud melaksanakan arahan pada baris arahan untuk memulakan projek vue?Kesan halaman selepas permulaan yang berjaya adalah seperti yang ditunjukkan dalam gambar:

Apakah maksud melaksanakan arahan pada baris arahan untuk memulakan projek vue?

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:

Apakah maksud melaksanakan arahan pada baris arahan untuk memulakan projek vue?

Apabila membuat cawangan baharu dan mengkonfigurasi penghalaan, beri perhatian kepada laluan:

Apakah maksud melaksanakan arahan pada baris arahan untuk memulakan projek vue?

4. Gaya


Apakah maksud melaksanakan arahan pada baris arahan untuk memulakan projek vue?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.

Apakah maksud melaksanakan arahan pada baris arahan untuk memulakan projek vue?

Pergantungan gaya pemasangan terminal:


Jika ia tetap, laksanakan npm install stylus-loader css-loader style-loader - -save-dev cuma pasang dependencies1Apakah maksud melaksanakan arahan pada baris arahan untuk memulakan projek vue?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn