1、Vue.js簡介?html
Vue (讀音 /vju?/,相似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不一樣的是,Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層,不只易於上手,還便於與第三方庫或既有項目整合。另外一方面,當與現代化的工具鏈以及各類支持類庫結合使用時,Vue 也徹底可以爲複雜的單頁應用提供驅動。
2、NPM安裝步驟vue
1.node.js安裝
nodejs官網下載:http://nodejs.cn/download
(根據本身電腦安裝的,個人是64位的)node
? ? ? ?點擊下一步進行安裝,安裝路徑可進行修改,其餘默認下一步便可。
安裝完成後,在Windows命令行中輸入npm -v和node -v出現版本號就安裝成功了
2.設置global和cache路徑(可忽略)
把經過npm安裝的模塊集中在一塊兒
(1)在node.js安裝目錄下,新建node_globa和node_cache兩個文件夾
(2)設置global和cache
npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"
(3)cnmp安裝
安裝命令:npm config set cache "C:\Program Files\nodejs\node_cache"
npm出現警告時:
解決方法以下:
webpack
3、修改用戶環境變量
設置環境變量可使得任意目錄下均可以使用cnpm、vue等命令,而不須要輸入全路徑web
1.鼠標右鍵「此電腦」,選擇「屬性」菜單,再彈出的「系統」對話框中左側選擇「高級系統設置」,彈出「系統屬性「對話框。vue-cli
2.點擊環境變量彈出的對話框,選中PATH,點擊編輯,在已有的環境變量後面,加入英文的";",而後把C:\Program Files\nodejs\node_global
npm
3.新建系統環境變量NODE_PATH:在下面的系統變量中點擊新建,彈出下框,把變量設置爲「C:\Program Files\nodejs\node_modules」
4、用cnmp安裝vue
(建議你們環境變量必定要配好,否則老是報錯,不是內部命令,而且要切換到相關目錄下執行,我配好後老是出先錯誤,浪費了好長時間,果真坑不少,最後找到安裝路徑,執行./cnpm -v成功
)
注:你們必定要把npm和cnpm的放到相同的目錄下;個人是在
"C:\Program Files\nodejs\node_global",你們謹記教誨出現問題必定要切換到安裝目錄,將npm和cnpm放到同一個目錄下,避免出錯
1.用cnpm安裝vue
建議加上當前目錄下加上./
2.安裝vue命令行工具
cnpm install vue-cli -g
框架
5、建立一個基於webpack模板的新項目
一、建立模板新項目
vue init webpack my-project
工具
cd 到你新建的工做目錄命令行
2、安裝項目所需依賴
cd my-project
npm install
成功執行以上命令後訪問 http://localhost:8080/,輸出結果以下所示: