Application Web Vue2.0 développée par FamilyBucket (voir l'application Wuji)

lien github

Apprenez de l'application Wuji, utilisez vue2.0+vue-router+vuex comme pile technologique principale, elementui comme framework d'interface utilisateur, multi-module En mode spa, webpack2.0 est responsable de l'empaquetage des modules et gulp est responsable de la gestion de l'empaquetage et de la compression des ressources statiques. Bienvenue dans les étoiles de récompense ! ! !

Processus de construction du front-end de Wuji

Préparation de l'environnement local

• Nœud d'installation : * ("node": ">=6.0", correspondant aux besoins Mettez à niveau node-sass, sinon vous ne pouvez pas l'utiliser ! )

• Configurer le webpack : npm install -g webpack (autorisation sudo)

• Configuration Windows cnpm :

npm install -g cnpm --registry=https:

Installation du package de dépendances

• Entrez dans le répertoire wuji

• Exécuter cnpm install

Build

• Environnement de développement : exécutez node server.js (ou npm run serve)

• Rechargement à chaud du nœud server.js rechargement à chaud (ou npm run hot)

• données simulées npm run mock

• Environnement de production : exécuter npm run build

À propos du mappage source (prend uniquement en charge le navigateur Chrome)

• Le mappage source est un suivi du mappage de code, pratique pour les fichiers compressés de débogage locaux pendant le développement

• Assurez-vous que Chrome a activé le mappage source (il est activé par défaut)

• Ouvrir les outils de développement - "Sources à voir Vers le fichier source

rechargement à chaud (prend en charge l'actualisation en temps réel de la build)

• Préparation de l'environnement :

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

• Exécuter node server.js hot- recharger (ou npm run hot)

• Accès aux ressources statiques, par exemple : http://localhost:8088/Static/...

Personnalisé theme

• Entrez dans le répertoire wuji

• cnpm install element-theme element-theme-default --save-dev (le package de dépendances a été installé lors de l'installation)

• Exécuter node_modules/ .bin/et -i

• Générer element-variables.css

• Exécuter node_modules/.bin/et

• créera ./theme

• Lors du changement de thème, les modifications correspondantes à .babelrc sera le suivant :

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

autoprefixer (traitement de compatibilité des préfixes de style), configuré dans l'option vue-loader

• Générer des règles :

• Ajouter automatiquement un préfixe de style de navigateur, compatible avec tous les navigateurs (pour une part supérieure à 1% des statistiques globales, Firefox 15)

Traitement des ressources statiques gulp (/public)

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对象

• Entrez dans le répertoire wuji/assets/public

• cnpm install

• Exécuter gulp (compresser js, images)

• Exécuter gulp sprite (générer image sprite) [Mettez l'image qui doit être synthétisée en sprite dans une nouvelle dans le dossier images/sprite/, exécutez, vous pouvez voir le sprite.png, sprite.scss correspondant]

Page frontale

index.html sous le dossier => Ma liste de journal
passing.html => Passing list
account.html =>

Mini programme WeChat, github actuel :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!