1. 程式人生 > >Vue2+VueRouter2+Webpack+Axios構建專案實戰2017重製版(一)基礎知識概述

Vue2+VueRouter2+Webpack+Axios構建專案實戰2017重製版(一)基礎知識概述

vue 是什麼,以及我們為什麼選擇 vue

在我們公司的實際拓展中,由於選擇框架時,angular 正在新舊交替,江山未穩,因此我們當時嘗試在兩個專案中引用不同的技術路線 react 和 vue 。

實踐證明,這兩個都是非常優秀的框架。但是同時也證明,在前端初學者的面前,vue 的學習成本明顯比 react 要低很多。

在同樣優秀,並且都能實現效果的情況下,我們選擇了 vue 技術框架。

所以,選擇的理由特別的簡單——只是因為它更簡單!

好,vue 是什麼?

我不管官方的解釋是什麼,我的解釋如下:

為了實現前後端分離的開發理念,開發前端 SPA 專案,實現資料繫結,路由配置,專案編譯打包等一系列工作的技術框架

這裡,我們說的 vue 不僅僅是 vue.js 這一個檔案,而是圍繞 vue.js 配套的一系列的工具。就好比我們說的 linux 不僅僅是 linux 這個系統核心,而是包含了一整套外圍工具的完整系統。

具體如下:

  1. vue.js 核心,不解釋。
  2. VueRouter2 實現路由組織工具。
  3. webpack 專案打包以及編譯工具。
  4. nodejs 前端開發環境。
  5. npm 前端包管理器。
  6. axios ajax 介面請求工具。
  7. sass-loader 和 node-sass css 預處理。
  8. element 基於 vue 的後臺元件庫。
  9. iview 基於 vue 的另一套後臺元件庫。
  10. vue-cli vue 專案腳手架。一鍵安裝 vue 全家桶的工具。

其他還有很多,我們用到哪邊,說哪邊。

命令列的重要性


如果你依然沉浸在 GUI 的圖形介面中無法自拔,對於 CLI 命令列充滿恐懼或者敵視,那麼,現實會殘酷的告訴你,你落伍了。

雖然有很多專案在盡力的實現這些內容的視覺化操作,例如 iview 的 iView Cli ,我雖然肯定這些卓越的工程師做出的艱辛的努力,但是,不可否認的說,它也沒有徹底的拜託命令列。

並且,命令列

更好

更快

更強

更裝逼

所以,無論如何,你都不應該排斥命令列,還要積極的擁抱它,學習它,掌握它。

甚至,關注我部落格的同學可能會注意到,我前面自己甚至寫了很多的 shell 的相關部落格。要知道,我可是一個老前端工程師。這裡我不是顯擺我的資歷,而是客觀的評價自己,已經跟不上時代了。我所掌握的那些知識,是非常陳舊的。因此,只有不斷的學習,才能不斷的提高自己。

我對你的建議如下:

  1. 拋棄 windows 作業系統,不管它是什麼版本的 windows
  2. 購買一臺 macbook pro 沒錢購買可以選擇 黑蘋果 ,可以參考我的系列博文 打造前端MAC工作站以及相關文章索引
  3. 如果不是 photoshop 的重度使用者,並且想要更深層次的掌握更多內容,請使用 linux 系統。ubuntu 作業系統還是比較簡單上手的。有一定 linux 使用經驗的同學,建議使用 arch linux 作業系統,新手不要嘗試,因為你一定安裝不上。
  4. 除了使用 atom 或 vscode 這樣的現代編輯器,更推薦掌握 vim 這樣基於cli的編輯器的基本使用。能用到什麼樣的層次,取決於你自己的需求,相關內容可以參考:世界上最牛的編輯器: Vim系列博文。

最後強調,別問我有關 windows 的問題,我很久沒用過 windows 系統,並且關於系統底層的問題,我根本就不知道如何解決。

我說的,你不一定要全部掌握或者理解。但一定要有一個起碼的概念。至少,知道我說的大概是一個什麼樣的玩意兒。

第一篇博文,基本沒有涉及到任何程式碼的部分,但是下面,我們要開始幹活兒了。