Vue2.0 全家桶开发的网页应用（参照吾记APP) _全家桶

知识的领域是无限的,我们的学习也是无限期的。这篇文章主要讲述Vue2.0 全家桶开发的网页应用（参照吾记APP)相关的知识，希望能为你提供帮助。

文章图片

github链接借鉴吾记APP，使用 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 (默认是打开的)
打开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/...

自定义主题

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