vue學習第一天 ------ 臨時筆記

學習連接

Vue2+VueRouter2+Webpack+Axios 構建項目實戰2017重製版（一）基礎知識概述
http://blog.csdn.net/fungleo/article/details/77575077

Vue2+VueRouter2+Webpack+Axios 構建項目實戰2017重製版（二）安裝 nodejs 環境以及 vue-cli 構建初始項目
http://blog.csdn.net/fungleo/article/details/77584701

Vue2+VueRouter2+Webpack+Axios 構建項目實戰2017重製版（三）認識項目全部文件
http://blog.csdn.net/FungLeo/article/details/77585205

 

 

1.先後端分離開發模式

　

設計師設計頁面設計稿
前端工程師和後端工程師以及其餘技術人員約定項目開發接口規範
後端工程師按照約定接口規範開發相應接口
前端工程師開發頁面，並對接後端接口（可能先期採用假接口）開發頁面

 

2.SPA：single page web application（ 單頁應用程序 或 單頁Web應用）

 url 由如下部分組成：

http:// 規定了頁面採用的協議。
www.fengcms.com 爲頁面所屬的域名。
index.html 爲讀取的文件名稱。
?name=fungleo&old=32 給頁面經過 GET 方式傳送的參數
#mylove/is/world/peace 爲頁面的錨點區域

前面四個發生改變的時候，會觸發瀏覽器的跳轉亦或是刷新行爲，而更改 url 中的錨點，並不會出現這種行爲，
所以，幾乎全部的 spa 應用都是利用錨點的這個特性來實現路由的轉換。

所謂的路由地址是在 # 號後面的，也就是利用了錨點的特性。

 

3.RESTful 風格接口

先後端在約定接口

目前 github 也在主推 GraphQL 這種新的接口風格，但目前國內來講仍是 RESTful 接口風格比較廣泛。雖然它有一些缺陷

大多數操做都是對數據庫的四格操做 「增刪改查」 對應到咱們的接口操做分別是：

post 插入新數據
delete 刪除數據
put 修改數據
get 查詢數據

假設，咱們的接口是 /api/v1/love 這樣的接口，採用 RESTful 接口風格對應操做是以下的：

get 操做 /api/v1/love

獲取 /api/v1/love 的分頁列表數據，獲得的主體，將是一個數組，咱們能夠用數據來遍歷循環列表

post 操做 /api/v1/love

咱們會往 /api/v1/love 插入一條新的數據，咱們插入的數據，將是JOSN利用對象傳輸的。

get 操做 /api/v1/love/1

咱們獲取到一個 ID 爲 1 的的數據，數據通常爲一個對象，裏面包含了 1 的各項字段信息。

put 操做 /api/v1/love/1

咱們向接口提交了一個新的信息，來修改 ID 爲 1 的這條信息

delete 操做 /api/v1/love/1

咱們向接口請求，刪除 ID 爲 1 的這一條數據

由上述例子可知，咱們實現了5種操做，但只用了兩個接口地址， /api/v1/love 和 /api/v1/love/1 。因此，採用這種接口風格，能夠大幅的簡化咱們的接口設計。

 

4.vue 是什麼

官方解釋：
Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架。
與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。
Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。
另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。

 

 

大牛解釋：
爲了實現先後端分離的開發理念，開發前端 SPA 項目，實現數據綁定，路由配置，項目編譯打包等一系列工做的技術框架

 

  vue 不只僅是 vue.js 這一個文件，而是圍繞 vue.js 配套的一系列的工具。

vue.js 核心，不解釋。
VueRouter2 實現路由組織工具。
webpack 項目打包以及編譯工具。
nodejs 前端開發環境。
npm 前端包管理器。
axios ajax 接口請求工具。
sass-loader 和 node-sass css 預處理。
element 基於 vue 的後臺組件庫。
iview 基於 vue 的另外一套後臺組件庫。
vue-cli vue 項目腳手架。一鍵安裝 vue 全家桶的工具。
等等

 

 

5.命令行的重要性

CLI（command-line interface，命令行界面）

黑蘋果的介紹：
https://baike.baidu.com/item/%E9%BB%91%E8%8B%B9%E6%9E%9C/5220943?fr=aladdin

大牛的建議：
1.拋棄 windows 操做系統，無論它是什麼版本的 windows。
2.購買一臺 macbook pro 沒錢購買能夠選擇 黑蘋果 ，能夠參考個人系列博文 打造前端MAC工做站以及相關文章索引
3.若是不是 photoshop 的重度用戶，而且想要更深層次的掌握更多內容，請使用 linux 系統。
ubuntu 操做系統仍是比較簡單上手的。有必定 linux 使用經驗的同窗，建議使用 arch linux 操做系統，新手不要嘗試，由於你必定安裝不上。
4.除了使用 atom 或 vscode 這樣的現代編輯器，更推薦掌握 vim 這樣基於cli的編輯器的基本使用。
能用到什麼樣的層次，取決於你本身的需求，相關內容能夠參考：世界上最牛的編輯器： Vim系列博文。

 

 

6.安裝nodejs環境

1.在 https://nodejs.org/ nodejs 官方網站下載安裝包，而後進行安裝

2.官方網站的文檔操做 命令行安裝 nodejs

測試安裝是否成功
node -v
npm -v

 

npm config set prefix 「d:\nodejs\node_global」

npm config set cache 「d:\nodejs\node_cache」

進入環境變量對話框，在系統變量下新建」NODE_PATH」，輸入」D:\nodejs\node_global\node_modules」。（ps：這一步至關關鍵。）

上面的用戶變量都要跟着改變一下（用戶變量」PATH」修改成「d:\nodejs\node_global\」），

要不使用module的時候會致使輸入命令出現「xxx不是內部或外部命令，也不是可運行的程序或批處理文件」這個錯誤。

 

 

 

 

 

 

7.安裝 vue-cli VUE的腳手架工具

npm install -g vue-cli

npm 是 nodejs 的官方包管理器。能夠簡單的理解爲，用這個來管理全部的依賴包，雖然不只僅是如此。
install 命令表示執行安裝操做。
-g 是命令參數，表明，這個包將安裝爲系統全局的包。也就是說，在任何地方均可以用這個包。
vue-cli 是咱們安裝的包的命令。
安裝完成後，咱們在終端中輸入：

vue -V

注意，這裏的 V 是大寫的。若是輸出爲下面的圖片中的內容，則表明你安裝正確。