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'), //壓縮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：https://github.com/xiaobinwu/dj

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的Vue2.0 全家桶开发的网页应用（参照吾记APP)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。