Vue2.0 全家桶開發的網頁應用程式（參考吾記APP)

github連結

借鑒吾記APP，使用vue2.0+vue-router+vuex 為主要技術棧，elementui做為ui框架，多模組spa 模式，webpack2.0 負責模組打包，gulp 負責處理靜態資源打包、壓縮，歡迎打賞star！ ！ ！

吾記前端建置流程

本地環境準備

• #安裝node： *  （"node": ">=6.0"，對應需要升級node-sass，不然使用不了！

• 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）

## 

• #C

  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中文網其他相關文章！