vue學習筆記(一) 環境搭建

原創

sinat_32206135

2018-12-24 00:22

1.對vue的認識
對於vue框架的，官方的解釋是“一套構建用戶界面的漸進式框架”，“只關注視圖層，採用自底向上增量開發的設計”，“目標是通過儘可能簡單的API實現響應的數據綁定和組合的視圖組件”。簡單粗暴的理解就是，vue是一個輕便、簡潔的框架，它可以快速構建一個工程。vue的複用性很高，每一個單頁面都可以看成是一個組件，像搭積木，自底向上構成一個應用模塊，組件之間可以相互整合，同時也很容易與其他第三方庫整合，比如jquery,各類api等。採用MVVM結構，實現數據的雙向綁定，盜一張網上的圖，數據的流向基本是這樣的:

如果結合代碼結構來看，應該是這樣的：

個人理解，view就是用來展示界面的，model用來展示數據庫裏的字段，viewModel是用來處理數據邏輯的，model不能直接從數據庫裏面取出數據，那麼在view這一層綁定一個model，做數據的展示。viewModel根據view的變化而變化，viewModel與model可以互相影響，viewModel是view和model的橋樑，view與model通過viewmodel來實現雙向綁定。
view的適用場景，目前做過移動端的項目，覺得適用的場景，之後可以補充：

需要頻繁的操作dom來更新頁面
項目需要兼容更低的版本（ie8以下版本vue不兼容）

2.vue環境搭建
基本瞭解了vue框架，現在就開始來搭建一個vue工程，快速開啓一個項目。前後端分離，其前端基礎的技術路線vue+vue-router+webpack+axios。
2.1 安裝node環境
2.2 安裝git環境
這裏不再詳細描述。
2.3 環境配置
使用npm install，這個命令需要聯網，並且是去連 github ，如果沒有翻牆的話，速度會比較慢。可以使用國內淘寶提供的 npm 鏡像源來進行安裝，解決翻牆的問題。淘寶鏡像安裝參考地址：https://npm.taobao.org/
按個人習慣，在安裝鏡像之前，我做了這些事情（當然你可以選擇不做，忽略(2),(3),(4)直接執行安裝鏡像的指令，使包都默認安裝在C盤）
(1) cmd 進入控制檯，輸入node –v, npm –v檢查是否安裝好node環境。
(2) 在任意一個盤裏面建兩個文件夾，注是全局的目錄，比如E:\nodejs\node_global。文件夾分別爲node_cache，node_global。主要做的目的是將所有安裝的包都安裝在這裏面。

2.4 執行，設置安裝的路徑

2.5 系統環境中設置環境變量
a)用戶變量 path 中把 C:\Users\Administrator\AppData\Roaming\npm;—改爲----
D:\nodejs\node_global
b)在系統變量中新增變量
NODE_PATH----- D:\nodejs\node_global\node_modules
系統變量
path:C:\ProgramFiles\nodejs;D:\nodejs\node_global\node_modules;
2.6 安裝vue-cli VUE的腳手架工具
該工具可用於快速的構建大型vue項目，只需幾分鐘即可創建並啓動一個帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目
命令：npm install -g vue-cli
命令說明：
npm 是 node.js 的官方包管理器。可以簡單的理解爲，用這個來管理所有的依賴包，雖然不僅僅是如此。
install 命令表示執行安裝操作。
-g 是命令參數，代表，這個包將安裝爲系統全局的包。也就是說，在任何地方都可以用這個包。
(6)vue-cli 是我們安裝的包的命令。
接着輸入命令：vue –V 看是否安裝成功

2.7 淘寶鏡像安裝
命令：npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝成功界面：