Perkara yang perlu dimasukkan ke dalam vue scaffolding public

Secara amnya, beberapa sumber statik (gambar) diletakkan dalam folder awam Apabila webpack membungkusnya, ia akan dibungkus secara utuh ke dalam folder dist. Fail dalam direktori awam tidak akan diproses oleh Webpack, ia akan disalin terus ke direktori pembungkusan akhir (lalainya ialah dist/statik); " Dalam konfigurasi publicPath, lalai ialah "/".

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

1. Pasang perancah Vue

1. Langkah pertama (hanya dilaksanakan buat kali pertama): Pemasangan global @vue/cli

npm i @vue/cli -g

<.>2. Beralih ke direktori tempat anda ingin mencipta projek, dan kemudian buat projek

vue create XXX

3. Mulakan projek

npm run serve

Catatan:

<.>1. alamat cermin npm Taobao

2. Perancah Vue menyembunyikan semua konfigurasi yang berkaitan dengan pek web setiap folder projek pemulaan perancah vue-cli

npm config set registry https://registry.npm.taobao.org

vue inspect > output.js

folder node_modules

: Folder pergantungan projekFolder awam:

Biasanya meletakkan beberapa sumber statik (gambar). Perlu diingat bahawa sumber statik yang diletakkan dalam folder awam akan dibungkus utuh ke dalam folder dist apabila webpack membungkusnya. Sebarang sumber statik yang diletakkan dalam folder awam akan disalin dengan mudah tanpa melalui pek web. Anda perlu merujuknya melalui laluan mutlak. Perhatikan bahawa kami mengesyorkan mengimport sumber sebagai sebahagian daripada graf pergantungan modul anda supaya ia akan diproses oleh webpack dan mendapat faedah berikut:

Skrip dan lembaran gaya akan dikecilkan dan Dikemas bersama-sama untuk mengelakkan permintaan rangkaian tambahan.

Jika fail hilang, ralat akan dilaporkan terus semasa penyusunan, bukannya ralat 404 dijana pada bahagian pengguna.

Nama fail yang dijana akhir termasuk cincang kandungan, jadi anda tidak perlu risau tentang penyemak imbas menyimpan versi lamanya.

• Direktori awam menyediakan sandaran, apabila anda merujuknya melalui laluan mutlak, perhatikan tempat aplikasi akan digunakan. Jika aplikasi anda tidak digunakan pada akar domain, maka anda perlu mengkonfigurasi awalan
• publicPath
untuk URL anda:

dalam public/index.html atau lain-lain melalui html -webpack- Dalam fail HTML yang digunakan sebagai templat oleh pemalam, anda perlu menetapkan awalan pautan melalui

<%= BASE_URL %>:

• Dalam templat, anda perlu Pas komponen anda dalam URL asas:
  

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

kemudian:

• Bila hendak menggunakan folder awam

data () {
  return {
    publicPath: process.env.BASE_URL
  }
}

anda perlu Tentukan nama fail dalam output.

<img :src="`${publicPath}my-image.png`">

Anda mempunyai beribu-ribu imej dan perlu merujuk laluan mereka secara dinamik.

Sesetengah perpustakaan mungkin tidak serasi dengan webpack Dalam kes ini, anda boleh menggunakan

• vue-cli3.0 yang berasingan mempunyai dua direktori untuk meletakkan sumber statik: awam dan aset.
• fail tempat awam yang tidak akan berubah (bersamaan dengan statik dalam vue-cli2.x)

Fail dalam direktori awam/ tidak akan diproses oleh Webpack: ia akan diproses terus disalin ke direktori pembungkusan akhir (lalai ialah dist/statik). Fail ini mesti dirujuk menggunakan laluan mutlak Ini bergantung pada konfigurasi publicPath dalam vue.config.js anda.

Aset menyimpan fail yang mungkin berubah Fail dalam direktori aset akan diproses dan dihuraikan menjadi kebergantungan modul oleh webpack dan hanya borang laluan relatif yang disokong.

Ringkasnya, public meletakkan fail js orang lain (iaitu, mereka tidak akan berubah), dan aset meletakkan fail js anda sendiri (fail yang perlu ditukar)

folder src

folder aset: biasanya digunakan untuk menyimpan sumber statik (sumber statik dikongsi oleh berbilang komponen), perlu diperhatikan bahawa ia diletakkan dalam fail aset Apabila webpack membungkus sumber statik dalam folder, webpack akan menganggap sumber statik sebagai modul dan membungkusnya ke dalam fail JS. folder komponen: Komponen bukan penghalaan yang diletakkan secara umum (komponen global) App.vue: satu-satunya komponen akar (ringkasan semua komponen)

main.js: entri fail , yang juga merupakan fail pertama yang akan dilaksanakan dalam keseluruhan program

.gitignore: konfigurasi diabaikan oleh kawalan versi git (biasanya tidak disentuh)

babel.config.js: fail konfigurasi babel (bersamaan dengan terjemahan Rasmi, contohnya, menterjemah tatabahasa berkaitan ES6 kepada ES5, yang mempunyai keserasian yang lebih baik dan umumnya tidak disentuh)

package.json: fail konfigurasi pakej aplikasi (serupa dengan kad ID projek, merekodkan nama projek, kebergantungan projek, projek berjalan dan maklumat lain)

package-lock.json: fail kawalan versi pakej (kebolehcache Fail)

README.md: Fail penerangan aplikasi (fail deskriptif)

vue.config.js: Perancah boleh disesuaikan untuk cara mengkonfigurasinya, sila rujuk Vue CLI

Folder lain:

• folder halaman: menyimpan komponen berkaitan penghalaan (halaman juga boleh digantikan dengan paparan)

• folder penghala: fail konfigurasi penghalaan

• folder kedai: fail berkaitan vuex

• folder olok-olok: menyimpan data simulasi olok-olok

3. Persekitaran kerja perancah

persekitaran perancah vue-cli: berdasarkan nod + pek web untuk menyokong kami dalam menulis projek vue

Fail masukan lalai main.js: Semua kod mesti mempunyai hubungan pengenalan langsung atau tidak langsung dengan main.js

Proses pembungkusan: Jalankan pembungkusan Apabila , webpack akan membina peta kod berdasarkan perhubungan pengenalan pintu masuk, menterjemah kod yang berkaitan dengan pemuat/plug masuk, keluarkannya ke fail .js, masukkan ke dalam index.html dan jalankan

① utama. js → Pembungkusan dan pintu masuk berjalan

② Vue.component ("nama komponen", objek komponen) → Daftar komponen global untuk Vue

Urutan pelaksanaan: Mula-mula daftar komponen global melalui fail main.js, Kemudian gunakan komponen global ini dalam komponen

[Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]

Atas ialah kandungan terperinci Perkara yang perlu dimasukkan ke dalam vue scaffolding public. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!