Vue2.0 全家桶開發的網頁應用(參照吾記APP)

来源:http://www.cnblogs.com/wuxiaobin/archive/2017/06/02/6931706.html
-Advertisement-
Play Games

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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 今天碰到個問題,有個報警提示的聲音,在其他瀏覽器都正常,IE11聲音不出來。後來發現,判斷當前瀏覽器的方法用的是 -1 != navigator.userAgent.indexOf("MSIE") 但是此方法對於新版的IE11已經不支持了(IE11的userAgent里是沒有MSIE標誌的) 把判斷 ...
  • <!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>焦點輪播圖效果</title><style type="text/css"> *{ margin: 0; padding: 0; list-style-type: ...
  • 原文參考 玉伯 大神些的,我整理了一下。 咱們今天主題說下前端模塊化發展的歷史,主要就是針對AMD CMD 的發展,這兩個東西是一種規範,他們實際產物是 AMD是RequireJS,CMD的產物是seajs,他們的出現都是在COMMONjs基礎上發展而來的,那咱們得先說說COMMONjs。 COMM ...
  • 1、bootstrap 排版 全局樣式style.css: 1、移除body的margin聲明 2、設置body的背景色為白色 3、為排版設置了基本的字體、字型大小和行高 4、設置全局鏈接顏色,且當鏈接處於懸浮“:hover”狀態時才會顯示下劃線樣式 標題 h1-h6 HTML 中的所有標題標簽, 到 ...
  • 最近在做pc端網頁開發時用到了datatables,不得不說這個工具使用還是很方便的。(ps:大數據量時建議使用伺服器端分頁而非前端分頁) 現將相關配置使用記錄如下 配置 常用api 附加功能添加 向上滾動頁面,當datatables表頭接觸到window頂部將其固定,實現代碼如下: 1、給docu ...
  • "I'm Captain Jack Sparrow" 加勒比海盜5上映,為了表示對傑克船長的喜愛,昨天閃現了幾次模仿船長的走路姿勢(哈哈哈,簡直妖嬈)。 為了周天能去看電影,要趕緊做完手上的活兒,比如總結Promise的方法。 2 Promise基本方法簡介 Promise提供了哪些方法了?大招就是 ...
  • 一HTML 1.DOCTYPE的聲明,現在基本都是H5的天下,直接快捷鍵生成即可。 2.字元集的聲明,一般是<meta charset="UTF-8" />,記得轉義下符號類字元如空格-&nbsp; &-amp; 3.正確的縮進,現在各個全家桶里的代碼已經配置好了縮進,無太大必要直接使用即可 4.c ...
  • 執行環境(execution context,為簡單起見,有時也稱為“環境”)是JavaScript 中最為重要的一個概念。執行環境定義了變數或函數有權訪問的其他數據,決定了它們各自的行為。每個執行環境都有一個與之關聯的變數對象(variable object),環境中定義的所有變數和函數都保存在這 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...