Von FamilyBucket entwickelte Vue2.0-Webanwendung (siehe Wuji APP)

Github-Link

Lernen Sie von Wuji APP, verwenden Sie vue2.0+vue-router+vuex als Haupttechnologie-Stack, Elementui als UI-Framework, Multi-Modul Im Spa-Modus ist webpack2.0 für die Modulverpackung verantwortlich und gulp ist für die Handhabung der statischen Ressourcenverpackung und -komprimierung verantwortlich. Willkommen bei Belohnungssternen! ! !

Wuji-Front-End-Konstruktionsprozess

Vorbereitung der lokalen Umgebung

• Knoten installieren: * ("node": ">=6.0", entsprechend um Node-Sass zu aktualisieren, sonst können Sie es nicht verwenden! 🎜>

  Windows-Konfiguration cnpm:

• Installation des Abhängigkeitspakets

Geben Sie das Wuji-Verzeichnis ein

npm install -g cnpm --registry=https:

CNPM-Installation ausführen

• Build

• Entwicklungsumgebung: Knoten server.js (oder npm) ausführen Run Serve)

Hot-Reload Node Server.js Hot-Reload (oder NPM Run Hot)

• Mock Data NPM Run Mock

• Produktionsumgebung: NPM Run Build ausführen

• Über Quellzuordnung (unterstützt nur Chrome-Browser)

• Bei der Quellzuordnung handelt es sich um eine Codezuordnungsverfolgung, die für die lokale Fehlerbehebung komprimierter Dateien während der Entwicklung praktisch ist

Stellen Sie sicher, dass Chrome die Quellzuordnung aktiviert hat (standardmäßig ist sie aktiviert)

• Öffnen Sie die Entwicklungstools – „Zu sehende Quellen“ Zur Quelldatei

• Hot Reload (unterstützt Echtzeitaktualisierung des Builds)

• Umgebungsvorbereitung:

cnpm install express webpack-dev-middleware webpack-hot-middleware

• Knotenserver ausführen. js hot-reload (oder npm run hot)

• Statischer Ressourcenzugriff, z. B.: http://localhost:8088/Static/...

• Benutzerdefiniertes Theme

• Geben Sie das Wuji-Verzeichnis ein

cnpm install element-theme element-theme-default --save-dev (die Abhängigkeit Paket wurde während der Installation installiert)

• Node_modules/ .bin/et -i ausführen

• Element-Variablen.css generieren

• Node_modules/.bin/et ausführen

• erstellt ./theme

• Beim Ändern des Themas wird das Entsprechende Änderungen an .babelrc lauten wie folgt:

• Autoprefixer (Stilpräfix-Kompatibilitätsverarbeitung), konfiguriert in der Vue-Loader-Option

Regeln generieren:

    {      "plugins": [["component", [
        {          "libraryName": "element-ui",          "styleLibraryName": "~theme"}
      ]]]
    }

automatisch Browserstil-Präfix hinzufügen, kompatibel mit allen Browsern (für einen Anteil von mehr als 1 % der globalen Statistiken, Firefox 15)

• Statische Ressourcen-Gulp-Verarbeitung (/öffentlich)

Geben Sie Wuji/Assets/ ein. öffentliches Verzeichnis

var gulp = require('gulp'),
    uglify = require('gulp-uglify'), //压缩jsrename = require("gulp-rename"), //文件重命名changed = require('gulp-changed'), //监听文件是否修改imagemin = require('gulp-imagemin'), // 图片压缩pngquant = require('imagemin-pngquant'), // 深度压缩runSequence = require('run-sequence'),     // 同步运行任务插件del = require('del'), //删除文件spritesmith = require('gulp.spritesmith'), //合成雪碧图find = require("gulp-find-glob"); //得到glob对象

cnpm install

• Gulp ausführen (js, Bilder komprimieren)

• Gulp ausführen Sprite (Sprite-Bild generieren) [Legen Sie das Bild, das in Sprite synthetisiert werden muss, in ein neues Bild im Ordner „images/sprite/“ und führen Sie es aus. Sie können die entsprechende Datei „sprite.png“ und „sprite.scss“ sehen.]

• Frontend-Seite

• index.html unter dem Ordner => Meine Tagebuchliste

  Passing-Liste
account.html => Login-Registrierungsseite

WeChat Mini-Programm aktueller Github:

Das obige ist der detaillierte Inhalt vonVon FamilyBucket entwickelte Vue2.0-Webanwendung (siehe Wuji APP). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!