github鏈接 借鑒吾記APP,使用 vue2.0+vue-router+vuex 為主要技術棧,elementui做為ui框架,多模塊 spa 模式,webpack2.0 負責模塊打包,gulp 負責處理靜態資源打包、壓縮,歡迎打賞star!!! 安利一下 吾記前端構建流程 本地環境準備 安裝n ...
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