Vue2.0 web application developed by FamilyBucket (refer to Wuji APP)

github link

Learn from Wuji APP, use vue2.0+vue-router+vuex as the main technology stack, elementui as the UI framework, and multi-module spa mode , webpack2.0 is responsible for module packaging, and gulp is responsible for handling static resource packaging and compression. Welcome to reward stars! ! !

Wuji front-end construction process

Local environment preparation

• Install node: * ("node": ">=6.0", corresponding to needs Upgrade node-sass, otherwise you can’t use it! )

• Configure webpack: npm install -g webpack (sudo permission)

• windows configuration cnpm:

npm install -g cnpm --registry=https:

Dependency package installation

• Enter the wuji directory

• Execute cnpm install

Build

• Development environment: execute node server.js (or npm run serve)

• Hot reload node server.js hot-reload (or npm run hot)

• mock data npm run mock

• Production environment: Execute npm run build

About source Mapping (only supports chrome browser)

• source Mapping is a code mapping tracking, which is convenient for local development debug compressed file

• Make sure chrome has source Mapping turned on (the default is turned on)

• Open Develop Tools -》Sources to see the source File

hot reload (supports real-time refresh of the build)

• Environment preparation:

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

• Execute node server.js hot-reload (or npm run hot)

• Static resource access eg: http://localhost:8088/Static/...

Custom theme

• Enter wuji directory

• cnpm install element-theme element-theme-default --save-dev (the dependency package has been installed during installation)

• Execute node_modules/.bin /et -i

• Generate element-variables.css

• Execute node_modules/.bin/et

• will create ./theme

• When changing the theme, the corresponding modifications to .babelrc will be as follows:

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

autoprefixer (style prefix compatibility processing), configure in vue-loader option

• Generation rules:

• Automatically add browser Style prefix, compatible with all browsers (for shares greater than 1% of global statistics, firefox 15)

Static resource gulp processing (/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对象

• Enter the wuji/assets/public directory

• cnpm install

• Execute gulp (compressed js, pictures)

• Execute gulp sprite (generate sprite image) [Put the image that needs to be synthesized into sprite into a new folder in images/sprite/, and run, You can see the corresponding sprite.png, sprite.scss]

front-end page

index.html => My diary List
passing.html => Passing list
account.html => Login registration page

WeChat mini program actual github:

The above is the detailed content of Vue2.0 web application developed by FamilyBucket (refer to Wuji APP). For more information, please follow other related articles on the PHP Chinese website!