Vue2.0 全家桶开发的网页应用

##github 链接

使用 vue2.0+vue-router+vuex 为主要技术栈，elementui 做为 ui 框架，多模块 spa 模式，webpack2.0 负责模块打包，gulp 负责处理静态资源打包、压缩，欢迎打赏 star ！！！

前端构建流程

本地环境准备

• 安装 node： * https://nodejs.org/en/download/ （"node": ">=6.0"，对应需要升级 node-sass，不然使用不了！）
• 配置 webpack：npm install -g webpack(sudo 权限)
• windows 配置 cnpm：

    npm install -g cnpm --registry=https://registry.npm.taobao.org
    因为 npm 的默认仓库在国外，下载很慢，国内淘宝搞了个 CNPM，每 10 分钟同步一次，完全够用了

依赖包安装

• 进入 wuji 目录
• 执行 cnpm install

构建

• 开发环境：执行 node server.js （或 npm run serve ）
• 热加载 node server.js hot-reload （或 npm run hot ）
• mock 数据 npm run mock
• 生产环境：执行 npm run build

关于 source Mapping （仅支持 chrome 浏览器）

• source Mapping 就是一个代码映射跟踪，方便本地开发时 debug 压缩文件
• 确保 chrome 已打开[source Mapping]( https://developer.chrome.com/devtools/docs/settings#enable-js source maps) (默认是打开的)
• 打开 Develop Tools -》 Sources 即可看到源文件

hot reload （支持构建的实时刷新）

• 环境准备：
• cnpm install express webpack-dev-middleware webpack-hot-middleware
• 执行 node server.js hot-reload （或 npm run hot ）
• 静态资源访问 eg： http://localhost:8088/Static/dist/js/jobDetail.js

自定义主题

• 进入 wuji 目录
• cnpm install element-theme element-theme-default --save-dev （依赖包安装时已安装）
• 执行 node_modules/.bin/et -i
• 生成 element-variables.css
• 执行 node_modules/.bin/et
• 则会创建./theme
• 更改主题时，对应.babelrc 的修改会如下：

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

autoprefixer （样式前缀兼容性处理），在 vue-loader option 进行配置

• 生成规则：
• 自动加上浏览器样式前缀，兼容各浏览器（针对份额大于全球统计数据的 1%，firefox 15 ）

静态资源 gulp 处理（/public ）

var gulp = require('gulp'),
    uglify = require('gulp-uglify'), //压缩 js
    rename = 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 对象

• 进入 wuji/assets/public 目录
• cnpm install
• 执行 gulp （压缩 js、图片）
• 执行 gulp sprite （生成雪碧图）[将需要合成雪碧的图片放入 images/sprite/中某个新建的文件夹，运行，则可以在该文件夹下看到对应 sprite.png 、sprite.scss]

前端页面

index.html => 我的日记列表
passing.html => 过客列表
account.html => 登录注册页面