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

github链接

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

吾记前端构建流程

本地环境准备

• 安装node： *  （"node": ">=6.0"，对应需要升级node-sass，不然使用不了！）

• 配置webpack： npm install -g webpack(sudo权限)

• windows配置cnpm：

npm install -g cnpm --registry=https:

依赖包安装

• 进入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'), //压缩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对象

• 进入wuji/assets/public目录

• cnpm install

• 执行 gulp（压缩js、图片）

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

前端页面

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

微信小程序实战github：

以上是Vue2.0 全家桶开发的网页应用（参照吾记APP)的详细内容。更多信息请关注PHP中文网其他相关文章！