細談最近上線的Vue2.0項目(一)

来源:http://www.cnblogs.com/ChengWuyi/archive/2017/12/23/7941019.html
-Advertisement-
Play Games

8月初離職,來到現在的新東家負責一個新的項目。而我最近開發的兩個webapp一直都是以Vue為主,這也是這篇文章的由來。 正文前的胡侃&一點點吐槽 在經歷了兩個公司不同的項目後,發現都存在一個很致命卻又如此相似的問題。就是領導層的決策,導致項目的開發後期加班嚴重。領導們普遍都是先DIY,然後等到項目 ...


8月初離職,來到現在的新東家負責一個新的項目。而我最近開發的兩個webapp一直都是以Vue為主,這也是這篇文章的由來。

正文前的胡侃&一點點吐槽

在經歷了兩個公司不同的項目後,發現都存在一個很致命卻又如此相似的問題。就是領導層的決策,導致項目的開發後期加班嚴重。領導們普遍都是先DIY,然後等到項目開發到尾期的時候,突然說,我用了很多類似的東西,發現我們做出來和他們的有很大的出入,吧啦吧啦一堆,重點就是,我們自己設計出來的,當時他拍板說:“沒問題的東西”,現在有問題了!UI要換掉,功能要精簡。結果就是本來可以清閑點的上線前的時間,變得無比的緊張,只能加班到半夜三四點來趕進度,真是讓人無奈。

 

對於學習一門新的技術棧。我認為,在前期,API的熟悉程度是高於你對源碼的熟悉程度。千萬不要好高騖遠,學習vue,ng,react一上來就是,看源碼!我面試的時候就碰到有的前端,我問他:你vue學的怎麼樣啊?答:我看過一些源碼。結果一問一些基本的使用技巧,都是含含糊糊,答非所問。拜托,公司請你來是讓你開發產品的,不是讓你寫一個vue的。當然,我不是說學習源碼不好,學習源碼當然是天大的好事。說明你,有意識,不甘於做一個只會使用的人。有追根究底的學習心態。但是,請在你有足夠的實踐以後再去做這樣的事情。俗話說:實踐出真知。你在實戰中不斷的去使用,你才能知道它最後達到的是一個什麼樣的目的。你再去看源碼的時候,才有了一個目標,順著這條軌跡去找,最後源碼讀下來,也不會一點感覺也沒有,就覺得,作者寫得好!如同紅軍二萬五千里長征。有了目的地,才開始走,才能得到想要的結果。

目錄

因為要說的東西有點雜,而且對於寫博這樣的事情,自己還沒有養成習慣,三天打魚兩天曬網。所以我這次列出了一個TODOLIST,準備按照這個目錄,一步一步的寫下去。當然也有很多細節的東西沒有列舉到,我會慢慢的梳理,然後再在正文裡面補上。如果有的認知上存在問題,也歡迎道友們探討。

1.vue項目的骨架及常用組件的業務實現場景

2.彈性盒子佈局的使用,flex:1的意義,flex中text-flow的無效,flex配合better-scroll的使用

3.引入高德地圖後手淘flexbile.js的相容問題(技術點:dpr,rem,viewport等)及高德的基本使用

4.1px的由來及通用處理方式

5.import及module.export能否混用

6.時間格式比較的便捷方式及內在原理,ios下時間顯示為NaN的問題

7.vue-router的實戰及迴圈中this.參數名=undefined的問題

8.vuex在項目中的使用及持久化state的方式

9.vue中component的編寫方式

10.樣式的命名規範(技術點:BEM,SMA,OO等)

11.基於weinre的移動端樣式相容性調試

12.上線前的小插曲,網站被惡意代碼劫持

13.項目上線後的日誌系統sentry的基本使用

 


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

-Advertisement-
Play Games
更多相關文章
  • JavaScript中數組排序的方法有兩個reverse()和sort()。 reverse()方法會反轉數組項的順序: sort()方法會按照字元串升序排列數組項,sort()方法會調用每個數組項的tostring()方法,即使數組中的每一項都是數值,sort()方法比較的也是字元串: 這種方式在 ...
  • 在網頁或者是APP的開發中,動畫運用得當可以起到錦上添花的作用。正確使用動畫,不但可以有助於用戶理解交互的作用,還可以大大提高網頁應用的魅力和使用體驗。並且在現在的網頁開發中,動畫已經成為了一個設計的標準,變得越來越重要。特別是在一些和用戶交互的地方,使用動畫能更好的給用戶以反饋,提升用戶的操作體驗 ...
  • 由於公司的前端開始轉向 VueJS,最近開始使用這個框架進行開發,遇到一些問題記錄下來,以備後用。 主要寫一些 官方手冊 上沒有寫,但是實際開發中會遇到的問題,需要一定知識基礎。 涉及技術棧 CLI: Vue CLI UI: Element HTML: Pug(Jade) CSS: Less Jav ...
  • 之前忽略了一個點,如下: 在compiler對象的fs模塊掛載完後,會對傳入的插件進行載入,這個過程在內置插件載入之前。 插件部分單獨講解,所以這個地方先暫時略過。 內置插件全部plugin完畢後,會檢測編譯的回調函數: vue-cli的腳手架生產模式的構建文件build.js中就很明顯的傳了一個回 ...
  • 前言 工欲善其事,必先利其器。為了更好的學習React,我們先簡要的把開發環境搭建起來。本文主要介紹使用webpack搭建React項目,如果你對React或es6的基礎語法還不瞭解,建議先去學習學習。 基礎環境 基礎環境 node/npm webpack webpack 現代JavaScript程 ...
  • Util.js _(持續更新中...)_ 項目地址 : https://github.com/dragonir/Util.js 項目描述 Util.js 是對常用函數的封裝,方便在實際項目中使用,主要內容包含:數組類、瀏覽器類、日期類、函數類、數學類、媒體類、節點類、對象類、字元串類、類型檢測類、正 ...
  • 章節目錄 "【quickhybrid】如何實現一個跨平臺Hybrid框架" "【quick hybrid】架構一個Hybrid框架" "【quick hybrid】H5和Native交互原理" "【quick hybrid】JSBridge的實現" "【quick hybrid】H5和原生的職責劃分 ...
  • 白駒過隙,時光荏苒 大概去年這個時候寫了angular 結合webpack的一套前端方案,今年此時祭出vue2結合webpack2的一套前端方案。 明年的這個時候我又是在做什麼... 讀在最前面: 1、本文講述Vue,Webpack 模塊化、SEO優化、全瀏覽器相容(ie8以上)、圖片輪播等案例方案 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...