vue.js在windows10系統下的環境搭建

vue.js在windows10系統下的環境搭建流程

一、安裝node.js（node包含了npm包管理器）

node.js安裝包以及源碼下載地址：https://nodejs.org/en/download/

注意：使用安裝包（.msi）（做爲小白的我，直接用了.exe，致使環境變量都不會自動配置，真的挺鬱悶的）

下載下來之後能夠直接雙擊安裝，按照提示一步步安裝。

詳細的安裝步驟可看網址：http://www.runoob.com/nodejs/nodejs-install-setup.html

到這裏npm已經存在了，可是它涉及的資源可能有些是國外的，因此有時候會安裝失敗，因此咱們使用國內的鏡像cnpm

二、安裝cnpm

詳細資料網址：http://npm.taobao.org/

在命令行中輸入 npm install -g cnpm --registry=http://registry.npm.taobao.org，耐心等待安裝，安裝完成之後可使用cnpm代替npm

完成後的示意圖

完成之後根據vue官網（https://cn.vuejs.org/v2/guide/installation.html）上的安裝進行剩餘步驟的安裝以及工程的建立

三、安裝vue-cli腳手架構建工具，幫助搭建所需的模板框架

全局安裝vue-cli：npm install --global vue-cli

四、開始建立項目

在cmd窗口中，跳轉到你要建立項目的路徑，而後輸入：vue init webpack my-project（一個基於webpack模板的項目，my-project是項目文件夾的名稱）

命令運行過程當中會碰到一些項須要你選擇（若是你不想填一些信息，直接回車默認就好），我有以下選項：

完成之後，你能夠在電腦上打開這個項目文件夾，在文件夾裏面會有一個 package.json文件，裏面會包含一些依賴的資源，咱們須要把這些資源下載下來

到項目文件夾目錄，在命令行中輸入：npm install  （我安裝了cnpm，因此用了cnpm install）

 

安裝完成之後，能夠在項目文件夾裏面看到node_modules文件夾

五、運行項目（測試搭建是否成功）

在命令行中輸入：cnpm run dev    注意：仍是在當前項目文件夾下

獲得結果：

 

到這裏環境搭建完成了