vue學習001 --環境搭建

系統 ： win

cmd： cmder 連接：https://cmder.net/

1.安裝node.js

連接地址： http://cdn.npm.taobao.org/dist/node/v10.15.3/node-v10.15.3-x64.msi

一路next便可

安裝測試：  輸入npm

即成功

1啓動cmd依次執行如下兩條命令

　　npm config set prefix " D:\devtools\nodejs\node_global"
　　npm config set cache " D:\devtools\nodejs\node_cache"

二、 設置環境變量

　　說明：設置環境變量能夠使得住任意目錄下均可以使用cnpm、vue等命令，而不須要輸入全路徑

　　1．鼠標右鍵"此電腦"，選擇「屬性」菜單，在彈出的「系統」對話框中左側選擇「高級系統設置」，彈出「系統屬性」對話框。

　　2．點擊環境變量彈出下列對話框：

　　3．新增系統變量NODE_PATH：把變量值設置成「D:\devtools\nodejs\node_global\node_modules」 （這樣就能夠把後面全局安裝的裝到global裏而且能夠直接用命令使用。）

4． 修改用戶變量PATH：選中PATH，點擊編輯，把「D:\devtools\nodejs\node_global;」加到前面

2.換源

使用淘寶源，由於node源在國內有限制，速度和包都容易出問題，建議採用

方法以下： 

一、換成阿里源

npm config set registry https://registry.npm.taobao.org
二、驗證命令

npm config get registry
返回https://registry.npm.taobao.org，說明鏡像配置成功。
三、安裝cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

就能夠盡情的使用cnpm安裝了，速度提高很大

3.安裝腳手架和webpack

使用命令  

命令輸入

　 cnpm install vue –g  //全局安裝vue

 　cnpm install -g vue-cli                        //全局安裝vue-cli

　 cnpm install -g webpack                          //全局安裝webpack

     cnpm install -g webpack-dev-server             //安裝webpack的本地webserver

     安裝完成後，vue-cli腳手架其實就已經把vue也裝掉了，因此只需輸入vue  -V 和 webpack  -v  等等就能夠查看安裝成功與否

 

至此，環境搭建已完成，接下來建立一個項目開始vue之旅吧。

4建立vue項目

 1.先到目錄下：eg

2.初始化項目  vue init  webpack +項目名稱

vue init webpack  first-vue

3.進入項目目錄 

cd first-vue

4.cnpm run dev

5.打開網站就能夠看到你的vue項目了

 

 如今就開始你的vue之旅吧。