Login registration Module

Diary of a list

Diary creation and editing

Diary details

The classification of the I

A visitor list

I remember the front-end build process

Local Environment

  • Install Node: * nodejs.org/en/download… (“node”: “>=6.0”)
  • NPM install -g webpack(sudo permission)
  • Windows CNPM:
NPM install - g CNPM - registry=https://registry.npm.taobao.org because the NPM's default warehouse abroad, download slow, domestic taobao make a CNPM, once every 10 minutes synchronization, completely will be enoughCopy the code

Dependency package Installation

  • Go to the wuji directory
  • Perform CNPM install

build

  • Development environment: Execute Node server.js (or NPM Run serve)
  • Nodeserver.js hot-reload (or NPM run hot)
  • Mock Data NPM run mock
  • Production environment: Run NPM run build

About Source Mapping (Chrome only)

  • Source Mapping is a code Mapping trace for local debug compression files
  • Ensure that chrome has opened [source Mapping] (developer.chrome.com/devtools/do… Source Maps) (enabled by default)
  • Open Develop Tools – Sources to see the source file

Hot Reload (supports real-time refresh of builds)

  • 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/dist/js/jobDetail.js

Custom themes

  • Go to the wuji directory
  • CNPM install elder-theme elder-theme — default –save-dev
  • Perform node_modules/bin/et – I
  • Generating element – variables. The CSS
  • Perform node_modules/bin/et
  • /theme is created
  • When changing the theme, the corresponding. Babelrc changes as follows:
	{
	  "plugins": [["component", [
	    {
	      "libraryName": "element-ui",
	      "styleLibraryName": "~theme"
	    }
	  ]]]
	}Copy the code

Autoprefixer (Style prefix compatibility processing), configured in vue-loader option

  • Generation rules:
  • Automatically prefixes browser styles, compatible with all browsers (for more than 1% of global statistics, Firefox 15)

Static resource gulp handling (/public)

Var gulp = require('gulp'), uglify = require('gulp-uglify'), // Changed = require('gulp-changed'), imagemin = require('gulp-image '), Pngquant = require('imagemin-pngquant'), runSequence = require(' runSequence '), Spritesmith = require('gulp.spritesmith'), // find = require("gulp-find-glob"); // Get the glob objectCopy the code
  • Go to the wuji/assets/public directory
  • cnpm install
  • Execute gulp (compress JS, image)
  • Gulp Sprite [Place the image you need to make Sprite into a new folder in images/ Sprite /, run it and you will see the corresponding Sprite. PNG and Sprite. SCSS in that folder]

The front page

Index.html => My diary list passing. HTML => Passer list Account.html => Login registration page

Did this article help you? Welcome to join the front End learning Group wechat group: