Vue template web

Vue-template-web adalah templat beranda sederhana yang menggunakan elemen vue-ui

Perkenalan:

Proyek ini adalah halaman templat sederhana dan struktur dasar, yang dapat dengan mudah diubah menjadi beberapa halaman promosi, halaman tema, halaman situs web resmi, dll.

Implementasi proyek:

1. Halaman jangkar gulir pengikatan dua arah.
2. dukungan internasionalisasi i8n dari vue element-ui.
3. Ubah tema warna tema.
4. Vuex secara persisten menyimpan tema dan bahasa yang dipilih pengguna dalam cache.
5. Menggunakan perpustakaan ikon font iconfont.
6. Meringkas permintaan aksio.

Struktur proyek:

 src
 ├─assets                静态资源,图片,iconfont图标字体存放目录
 ├─components            公共组件目录
 ├─i18n                  vue element-ui的i8n国际化支持
 ├─router                路由模块
 ├─store                 vuex的模块,公共的state, mutations方法
 ├─utils                 工具类模块,包含http,本地缓存等.
 ├─views                 各个page页面的存放目录
 ├─App.vue               入口组件,挂载入口
 └─main.js               main入口js文件,引入全局使用的库、公共的样式和方法

Render:

Cara menjalankannya:

-.Kloning proyek ( git clone https://github.com/pjqdyd/Vue-template-web.git ).

-. Jalankan npm install untuk mengunduh dependensi (jika unduhan lambat: npm install --registry=https://registry.npm.taobao.org ).

-. Jalankan npm run serve untuk memulai proyek, dan kunjungi http://localhost:8080 untuk menelusuri halaman.

-.Jalankan npm run build untuk mengkompilasi dan mengemas proyek.

Melihat:

1. Cabang baru Vue-template-web-cdn menggunakan CDN untuk memuat beberapa dependensi, mencegah file js menjadi terlalu besar setelah pengemasan dan layar pertama membutuhkan waktu terlalu lama untuk dimuat.

Diuji:

 master分支运行npm run build后dist文件夹大小为_4M_左右;

Vue-template-web-cdn分支打包后的dist文件夹减少至_100kb_左右;

Oleh karena itu disarankan untuk menggunakan cabang Vue-template-web-cdn;

2. Setelah mengoptimalkan pengguliran menggunakan titik jangkar window.scrollTo(options), perhatikan kompatibilitas browser: window.scrollTo kompatibel. Tentu saja, Anda dapat memilih versi pengiriman sebelumnya agar kompatibel dengan browser lain;

petunjuk:

1. Proyek ini mengimplementasikan internasionalisasi vue element-ui i8n. Peralihan bahasa Mandarin dan Inggris mendefinisikan dua set bahasa, yang didefinisikan di bawah i18n/langs/.

2. Implementasi perubahan tema:

Sebelumnya, ini diterapkan dengan mengacu pada kasus perubahan kulit resmi. Warna dapat diubah bersama dengan komponen ElementUI. Karena metode ini lebih rumit dan dapat menyebabkan bug yang tidak diketahui, saat ini kami menggunakan penyimpanan nilai warna secara langsung untuk mengubah tema , dan meneruskan this.$ dalam proyek. store.state.theme bisa mendapatkan nilai warna tema.
(Lebih disarankan: Anda dapat menggunakan variabel css var untuk mengikat elemen root guna mengubah gaya).

3. Pengguliran jangkar halaman mengacu pada proyek sumber terbuka ini.

4. Proyek merangkum permintaan aksio dan mengikat atribut global $globalRequest. Anda dapat memanggil metode permintaan asinkron test4() di halaman mana pun melalui menunggu ini.$globalRequest.test4(arg);

5. Jika proyek menemukan area yang dapat diperbaiki, Anda dipersilakan untuk mengajukan isu perbaikan.