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對象

• 進入wuji/assets/public目錄

• cnpm install

• 執行 gulp（壓縮js、圖片）

• 執行 gulp sprite（生成雪碧圖）[將須要合成雪碧的圖片放入images/sprite/中某個新建的文件夾，運行，則能夠在該文件夾下看到對應sprite.png、sprite.scss]

前端頁面

index.html => 個人日記列表
passing.html => 過客列表
account.html => 登陸註冊頁面

微信小程序實戰github：https://github.com/xiaobinwu/dj