vue element ui scaffold webpack4

vue-element-ui-scaffold-webpack4

Catatan:

• Ini telah ditingkatkan ke webpack5 . Jika Anda perlu menggunakan webpack4, Anda dapat berpindah cabang: git checkout webpack4 .

• **vue3 + elemen-ui + versi webpack5: cabang yang dapat dialihkan: git checkout vue3 **

Proyek ini adalah proyek scaffolding multi-halaman dan multi-lingkungan yang menggunakan elemen-plus di bawah Vue dan dibangun berdasarkan webpack5.

Pratinjau efek proyek 1 Pratinjau efek proyek 2

1. Instalasi

 git clone https://github.com/hzsrc/vue-element-ui-scaffold-webpack4.git
# git checkout vue3
cd vue-element-ui-scaffold-webpack4
npm install

2. Fitur

Dibangun di webpack5 + babel@7

Kecepatan build lebih cepat dan ukuran file paket lebih kecil.

Implementasi multi-halaman

Dua cara untuk secara otomatis menampilkan file halaman html (diimplementasikan oleh html-webpack-plugin):

• Tambahkan file js apa pun di direktori src/pages. File js berfungsi sebagai entri webpack; templat halaman html adalah public/index.html, dan nama file halaman adalah nama file js.
• Buat folder apa pun di direktori src/pages, yang berisi dua file: entry.js dan template.html. entry.js berfungsi sebagai entri webpack; templat halaman HTML adalah template.html, dan nama file halaman tersebut adalah nama folder yang dibuat.

Secara otomatis menghasilkan ikon font iconfont menggunakan svg, mendukung hot reload webpack

Selama pengembangan, ubah atau tambah atau hapus file svg di direktori src/iconfont/svgs untuk secara otomatis menghasilkan ikon font (mendukung ttf, woff2, woff, eot, svg) dan mendukung gaya css dan pratinjau html pada saat yang sama, hot reload langsung Anda dapat melihat efeknya. Anda juga dapat menggunakan npm run build-font untuk menghasilkan file-file ini secara manual. Tidak perlu membuka icomoon.io atau iconfont.cn secara manual untuk membuat dan memodifikasi ikon font, css, dan pratinjau ikon. Diimplementasikan berdasarkan webpack-iconfont-plugin-nodejs.

implementasi data tiruan

Proyek ini dapat menggunakan Dynamic-mocker sebagai simulasi data antarmuka back-end. Data simulasi terletak di folder tiruan dan diimplementasikan menggunakan file js yang mudah dipahami, nyaman dan fleksibel.

Metode pengaktifan: 1. npm run dev akan memulai layanan tiruan secara bersamaan secara default. 2. Jalankan sendiri: npm run mock.

File konfigurasi: 1. Alamat layanan antarmuka di config/serverMap.js adalah: base: '"//localhost:8085"' 2. File mock/mock-config.js mengonfigurasi berbagai parameter tiruan.

elemen-plus dimuat sesuai permintaan dan warna tema diubah secara global.

Sumber pemuatan css on-demand menunjuk langsung ke file scss elemen-plus, bukan file css yang telah dikompilasi sebelumnya. Tambahkan file src/assets/css/element-theme/theme-changed.scss ke file variabel tema elemen-plus theme-chalk/src/common/var.scss pada waktu kompilasi melalui plugin join-file-content-plugin . Dimungkinkan untuk melihat efeknya segera setelah memodifikasi variabel scss tanpa terlebih dahulu mengkompilasi file elemen-plus scss ke dalam file css. Pada saat yang sama, variabel scss elemen-plus dapat direferensikan di mana saja dalam proyek.

Menyesuaikan warna tema secara dinamis saat runtime (termasuk gaya tema yang ditulis sendiri)

Gunakan plugin webpack-theme-color-replacer untuk mengekstrak aturan gaya yang berisi warna tema di css saat membuat webpack, dan buat file css/theme-colors.css. Kemudian ketika halaman web sedang berjalan, unduh file css ini dan ganti warna di dalamnya secara dinamis dengan warna tema khusus. Karena hanya css terkait warna yang diekstraksi, kecepatannya jauh lebih cepat daripada mengunduh seluruh css elemen-plus. Dan tidak hanya gaya elemen-plus, tetapi juga warna tema gaya yang ditulis sendiri dalam proyek dapat diganti.

Pemetaan kode sumber

Saat menerbitkan kode, file pemetaan kode sumber dihasilkan ke folder pemetaan kode sumber terpadu dan secara otomatis dipetakan di lingkungan pengujian. Demi keamanan kode, lingkungan produksi tidak melakukan pemetaan otomatis. Jika proses debug diperlukan, Chrome mendukung pemetaan manual kode sumber melalui URL. Sesuai dengan persyaratan keamanan, nama folder pemetaan kode sumber ini adalah nama folder yang hanya diketahui oleh pengembang. Atau gunakan algoritma enkripsi dinamis untuk menghasilkan nama folder ini. Atau letakkan file pemetaan kode sumber ini di direktori situs web yang memerlukan verifikasi login. Harap ubah nama direktori di fungsi getSourceMapPath pada file config/index.js sesuai kebutuhan. Dengan cara ini, ketika bug terjadi dan proses debug online diperlukan, pemetaan kode sumber dapat ditambahkan dengan cepat dan manual untuk memfasilitasi proses debug, dan kebocoran kode sumber dapat dihindari.

Tata letak responsif

Gunakan solusi sederhana vw+rem untuk mengimplementasikan tata letak responsif. Gunakan plug-in postcss-pxtorem untuk secara otomatis mengubah satuan di css dari px ke rem. Selama pengembangan, px masih digunakan sebagai satuan panjang css. 1rem = 100px, mudah dikonversi saat debugging. Umum untuk PC dan terminal seluler (yang terbaik adalah mengganti elemen-plus dengan kerangka UI lain untuk terminal seluler).

Kompatibilitas peramban

Kompatibel dengan IE10 ke atas, Chrome, Firefox, Safari, QQ, 360, 2345, dan browser lainnya. Jika Anda perlu mengubah ke versi seluler, harap ubah .browsersrc ke versi seluler.

3. Deskripsi perintah

pembangunan lokal

 npm run dev

Pengembangan dan debugging lokal. Gunakan alamat layanan antarmuka backend yang dikonfigurasi oleh dev di config/serverMap.js.

Rilis lingkungan pengujian

 npm run build-test

Digunakan untuk penerapan lingkungan pengujian. js memiliki pemetaan kode sumber, css tidak memiliki pemetaan kode sumber. Gunakan alamat layanan antarmuka yang dikonfigurasi dengan pengujian di config/serverMap.js.

Rilis ke lingkungan produksi

 npm run build

Untuk penerapan lingkungan produksi. Gunakan alamat layanan antarmuka yang dikonfigurasi oleh prod di config/serverMap.js.

Publikasikan lingkungan demo

 npm run build-demo

Konfigurasinya sama dengan lingkungan produksi, hanya alamat layanan antarmuka yang berbeda. Gunakan alamat layanan antarmuka yang dikonfigurasi oleh demo di config/serverMap.js.

Rilis lingkungan pengembangan

 npm run build-dev

Digunakan untuk mempublikasikan dan menyebarkan ke server lingkungan pengembangan, cocok untuk situasi di mana penerbitan ke server diperlukan untuk debugging. Gunakan alamat layanan antarmuka yang dikonfigurasi oleh dev di config/serverMap.js.

Aktifkan penerbitan data tiruan

 npm run build-preview

Data tiruan statis akan diaktifkan, tidak diperlukan layanan back-end, dan data tiruan akan digunakan untuk mensimulasikan panggilan ajax (asalkan antarmuka api yang sesuai telah menulis data tiruan). Setara dengan npm run build --preview && npm run play-dist .

Lihat hasil menjalankan direktori dist

 npm run play-dist

Dengan direktori dist sebagai direktori root, mulai layanan http statis lokal untuk melihat hasil direktori dist yang berjalan setelah penerbitan.

Mulai layanan tiruan

 npm run mock

Ketika layanan antarmuka back-end belum selesai, ini dapat digunakan untuk mensimulasikan data antarmuka back-end untuk men-debug fungsi front-end.

Proksi ke port 80 atau port 443

 npm run proxy80

Dengan mem-proxy port yang ada (port 80xx) ke port 80 atau port 443, port tersebut dapat disembunyikan selama akses dan akses https juga dapat dicapai. Dikombinasikan dengan host sistem dan mengonfigurasi 127.0.0.1 sebagai nama domain yang ditentukan, Anda dapat langsung menggunakan nama domain untuk mengakses halaman debugging lokal, yang digunakan untuk men-debug beberapa skenario di mana akses nama domain harus digunakan (seperti debugging WeChat, untuk detailnya, lihat: https://www.cnblogs.com/hz -blog/p/wechat-local-debug-domain.html).