iTaster admin template

indeks

• menyamaratakan
• Memasang
• menggunakan
• memperbarui
• Konfigurasi
• Arsitektur
• Masalah yang diketahui
• lisensi

menyamaratakan

Admin yang dimodifikasi berdasarkan template Webpack4.x vue-cli. Mohon jangan mendownloadnya. Kode awal tidak memiliki fungsi apa pun. Ini murni untuk kesenangan dan latihan.

Perbarui instruksi

• 2018/6/19 Tingkatkan webpack, gunakan webpack4 dan rekomendasikan plug-in mini-css-extract-plugin baru

Memasang

 ＃克隆该项目
git clone https://github.com/iTaster/webpack4-template

# 安装依赖关系
npm install

# 编译开发环境
npm run dev

Secara default, http://localhost:1988/ dibuka secara otomatis.

menggunakan

 # 编译生产环境
npm run build

# 构建生产环境
npm run build --report

memperbarui

Untuk memastikan pembaruan modul proyek selanjutnya

 # 检测模块
npm outdated

# 更新模块
npm update

# 删除 node_modules 文件
npm install rimraf -g
rimraf node_modules

Perintah npm outdated akan memeriksa modul yang Anda instal dan memberi tahu Anda mana yang sudah ketinggalan zaman.

Informasi spesifik meliputi: versi yang saat ini terinstal (Saat Ini), versi yang harus Anda perbarui (Diinginkan), dan versi terbaru di repositori (Terbaru).

Konfigurasi

1. Jika ingin mengupload folder dist , hapus saja /dist pada konfigurasi file yang diabaikan (file .gitignore ).

2. Secara default, file sumber daya yang dikompilasi dan diproses oleh webpack akan disimpan di folder static . Jika Anda hanya ingin menyimpannya di direktori file root, ubah parameter build.assetsSubDirectory di bawah config/index.jx hingga kosong. Tapi tidak disarankan! Dengan cara ini, beberapa jalur gambar akan salah saat pengemasan. Disarankan agar sumber daya kurang dari 10kb dan beberapa ikon svg (hal-hal yang umumnya tidak akan diubah) ditempatkan di folder src/assets , dan yang lainnya ditempatkan di folder static map.

3. Secara default, file css/js yang dikemas memiliki source map , yang sangat berguna untuk men-debug kode di lingkungan pengembangan. Namun, tidak disarankan dalam lingkungan kompilasi dan produksi. Ubah file config/index.js dan ubah nilainya dari build.productionSourceMap ke: false .

4. Jika kode berjalan di server dan Anda tidak ingin memiliki #/ di bilah alamat, Anda perlu menghapus anotasi mode: 'history' di router/index.js (konfigurasi backend juga diperlukan, jika tidak, halaman akan menyegarkan 404); jika halaman perlu menggunakan lompatan jangkar Pergi ke lokasi yang ditentukan dan hapus anotasi scrollBehavior .

5. Muncul dengan plug-in autoprefixer . Menulis kode css langsung di file vue akan secara otomatis menambahkan awalan.

Arsitektur

Struktur direktori berikut direkomendasikan dalam pengembangan satu halaman besar:

src
    ├── README.md
    ├── assets                  // 全局资源目录
    │    ├── images            // 图片
    │    ├── css               // CSS 样式表
    │    └── fonts             // 自定义字体文件
    ├── components              // 公共组件目录
    │    ├── NavMenu.vue
    │    ├── Slider.vue
    │    └── ...
    ├── directives               // 公共指令
    ├── filters                  // 公共过滤器
    ├── i18n                     // 国际化
    │    ├── index.js           // 入口文件
    │    ├── zh.js
    │    └── en.js
    ├── router                   // 路由
    │    └── index.js
    ├── store                    // 状态管理
    │    ├── index.js        
    │    └── ...
    ├── views                    // 页面视图
    │    ├── login
    │    │    ├── index.vue
    │    │    ├── LoginForm.vue
    │    │    └── LoginSocial.vue
    │    ├── home
    │    │    ├── index.vue
    │    │    ├── HomeBanner.vue
    │    │    └── ...
    │    └── ...
    ├── App.vue                // 默认程序入口
    └── main.js

keuntungan:

• Jika Anda ingin menggunakan /login di proyek lain, cukup salin atau pindahkan ke direktori /components.

• Selama Anda telah menginstal dependensi eksternal apa pun dan Anda telah menentukan pemuat yang sama dalam konfigurasi, proyek akan berjalan dengan baik.

Masalah yang diketahui

• Ada bug dalam menyembunyikan sidebar kiri

menyumbang

Anda dapat berkontribusi secara bebas pada proyek ini dengan mengirimkan masalah dan/atau permintaan penarikan. Proyek ini didorong oleh pengujian, jadi harap diingat bahwa setiap perubahan dan fitur baru harus tercakup dalam pengujian

lisensi

Proyek ini dilisensikan di bawah MIT.