iTaster admin template

Index

• verallgemeinern
• Installieren
• verwenden
• erneuern
• Konfiguration
• Architektur
• Bekannte Probleme
• Lizenz

verallgemeinern

Modifizierter Administrator basierend auf der Webpack4.x-Vorlage. Bitte laden Sie ihn nicht herunter. Er dient nur dem Spaß und der Übung.

Anweisungen zum Aktualisieren

• 19.06.2018 Webpack aktualisieren, Webpack4 verwenden und das neue Plug-in Mini-CSS-Extract-Plugin empfehlen

Installieren

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

# 安装依赖关系
npm install

# 编译开发环境
npm run dev

Standardmäßig wird http://localhost:1988/ automatisch geöffnet.

verwenden

 # 编译生产环境
npm run build

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

erneuern

Um spätere Aktualisierungen der Projektmodule sicherzustellen

 # 检测模块
npm outdated

# 更新模块
npm update

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

Der Befehl npm outdated überprüft Ihre installierten Module und teilt Ihnen mit, welche veraltet sind.

Zu den spezifischen Informationen gehören: die aktuell installierte Version (Aktuell), die Version, auf die Sie aktualisieren sollten (Gesucht) und die neueste Version im Repository (Neueste).

Konfiguration

1. Wenn Sie den dist -Ordner hochladen möchten, löschen Sie einfach /dist in der ignorierten Dateikonfiguration ( .gitignore -Datei).

2. Standardmäßig werden von webpack kompilierte und verarbeitete Ressourcendateien im static Ordner gespeichert. Wenn Sie sie nur im Stammdateiverzeichnis speichern möchten, ändern Sie den Parameter build.assetsSubDirectory unter config/index.jx um ihn leer zu lassen. Aber nicht zu empfehlen! Auf diese Weise sind einige Bildpfade beim Packen falsch. Es wird empfohlen, Ressourcen mit weniger als 10 KB und einige SVG-Symbole (Dinge, die im Allgemeinen nicht geändert werden) im Ordner src/assets und andere im static Ordner abzulegen Ordner.

3. Standardmäßig verfügen die gepackten css/js Dateien über source map , die für das Debuggen von Code in der Entwicklungsumgebung sehr nützlich sind. In der Kompilierungs- und Produktionsumgebung wird jedoch nicht empfohlen, die Datei config/index.js zu ändern und den Wert zu ändern von build.productionSourceMap zu: false .

4. Wenn der Code auf dem Server ausgeführt wird und Sie kein #/ in der Adressleiste haben möchten, müssen Sie mode: 'history' in router/index.js löschen (auch eine Backend-Konfiguration ist erforderlich, andernfalls wird die Seite gelöscht). wird aktualisiert 404); wenn die Seite Ankersprünge verwenden muss, gehen Sie zum angegebenen Ort und löschen Sie die scrollBehavior Anmerkung.

5. Es wird mit autoprefixer Plug-in geliefert. Wenn Sie CSS-Code direkt in die Vue-Datei schreiben, wird das Präfix automatisch hinzugefügt.

Architektur

Bei der Entwicklung großer Einzelseiten wird die folgende Verzeichnisstruktur empfohlen:

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

Vorteil:

• Wenn Sie /login in einem anderen Projekt verwenden möchten, kopieren oder verschieben Sie es einfach in das Verzeichnis /components.

• Solange Sie alle externen Abhängigkeiten installiert und denselben Loader in der Konfiguration definiert haben, sollte das Projekt einwandfrei laufen.

Bekannte Probleme

• Es gibt einen Fehler beim Ausblenden der linken Seitenleiste

beitragen

Sie können frei zu diesem Projekt beitragen, indem Sie Issues und/oder Pull Requests einreichen. Dieses Projekt ist testgetrieben, denken Sie also bitte daran, dass jede Änderung und jede neue Funktion durch Tests abgedeckt werden sollte

Lizenz

Dieses Projekt ist unter MIT lizenziert.