Vue.js入門(1)—安裝并生成自己的vue項目(vue.js入門書籍)

?Vue.js 引用百度百科的話：是一個構建數據驅動的 web 界面的漸進式框架。Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。它不僅易于上手，還便于與第三方庫或既有項目整合。一．項目所需環境：

   Node.js環境
   Npm環境（建議使用cnpm國內淘寶鏡像）

   Vue-cil 腳手架構造環境

二．如何安裝node.js

1.百度搜索node官網

2、選擇合適的安裝包，然后傻瓜式安裝。
3、解壓下載好的node.js安裝包，并新建node_global"及"node_cache"兩個文件夾

未建立文件夾之前：

新建后：
4、配置環境變量PATH

打開系統變量，選擇path，再點擊編輯：

把剛剛解壓的nodejs路徑粘貼進去：
右擊【我的電腦】--》【屬性】--》【高級系統設置】--》【環境變量】--》【系統變量】--》【Path】-->增加兩個路徑（新建那兩個文件夾的路徑）

5、打開cmd，輸入node -v測試是否有node環境
溫馨提示：如果提示說找不到命令
第1種可能是設置錯了
第2種就是需要重啟電腦

6、配置環境變量NODE_PATH
7、設置prefix和cache輸入以下兩行命令行：
npm config set prefix "D:\Program Files\node-v6.11.5-win-x64\node_global"

npm config set cache "D:\Program Files\node-v6.11.5-win-x64\node_cache"

三． 測試環境

1、打開cmd，輸入node -v測試是否有node環境。

2、在cmd，輸入npm-v測試是否有npm包

四、 使用淘寶鏡像文件cnpm代替npm
原因：如果使用npm是使用國外安裝包，可能由于一些原因會造成卡頓（傳輸時間過長）或者無法使用（屏蔽問題）；所以，建議使用國內的淘寶鏡像cnpm；
1. 輸入
npm install -g cnpm --registry=http://registry.npm.taobao.org
2. 命令安裝cnpm資源；

  Ps：過程可能會有點長，請耐心等待；
五、安裝vue-cli腳手架安裝包
輸入cnpm install -g vue-cli命令行

溫馨提示：建議使用cnpm國內資源安裝，這樣等待時間會短一些，也不會導致卡頓；
六、建立新的vue.js項目：

1、打開命令行工具 輸入cd desktop
2、輸入命令行vue init webpack firstVuejs

溫馨提示：這次整個項目是基于webpack搭建的vue.js項目；最后的firstVuejs為本項目名稱。
3、桌面自動生成項目

4、使用命令行工具輸入cd desktop/firstvuejs進入項目層

溫馨提示：如果像上圖一樣找不到路徑可以cd .. 退回上一路徑，再嘗試一下。
5、啟動項目：

輸入npm run dev 啟動項目

七、注意踩雷！！

比如index.html在項目里為index.vue;style.css也需要改成style.css(作用相同)。

以上就是關于Vue.js入門(1)—安裝并生成自己的vue項目(vue.js入門書籍)，希望對你有幫助，更多內容關注創新互聯。

名稱欄目：Vue.js入門(1)—安裝并生成自己的vue項目(vue.js入門書籍)
URL鏈接：http://m.kartarina.com/news5/317855.html

成都網站建設公司_創新互聯，為您提供App設計、自適應網站、網站設計、響應式網站、移動網站建設、網站收錄

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯