1,安裝node.js
Node.js官網:https://nodejs.org/en/
進入Node.js官網,選擇下載並安裝Node.js。安裝過程只需要點擊“下一步”即可,
如下圖,非常簡單。
驗證Node.js是否安裝好,在windows下,win+r召喚出運行窗口,輸入cmd打開命令行窗口。
輸入node -v即可得到對應的Node.js版本。
npm包管理器是集成在Node.js中了,所以在安裝Node.js的時候就已經自帶了npm。
輸入npm -v可得到npm的版本。
注意npm的版本需要在3.0.0以上版本,所以,如果npm的版本小於3.0.0,輸入以下命令更新npm至最新版本。
npm -g install npm
2,安裝cnpm
建議使用npm的國內淘寶鏡像cnpm 命令行工具代替默認的npm。
在命令行中輸入以下內容等待安裝
npm install -g cnpm --registry=https://registry.npm.taobao.org
3,cpnm全局安裝vue-cli
在命令行中運行以下命令然后等待安裝
cnpm install -g vue-cli
構建項目
新建項目
在這里我將vue項目建在f盤的vueProjiects文件夾下,利用命令進入此目錄。
在cmd中輸入盤符f:回車即可進入F盤:
輸入命令 cd vueProjects跳到此目錄下:
在此目錄下創建一個基於 webpack 模板的新項目,即在cmd中輸入以下命令:
vue init webpack my-vue-project
vue init webpack my-vue-project意思是初始化一個項目,利用的是webpack打包和壓縮,此項目命名為my-vue-project。
這樣,my-vue-project文件夾就自動生成剛剛在指定的目錄中,在此過程中,需要輸入項目名、描述、作者等。
打開my-vue-project文件夾,項目文件如下:
安裝項目依賴
在cmd中,注意需要使用命令先定位到my-vue-project目錄下,
然后輸入命令cnpm install安裝項目所需的依賴包資源
cnpm install
可以看到my-vue-project文件夾下多了一個node_modules文件
運行項目
使用命令npm run dev 運行項目
npm run dev
項目運行成功后瀏覽器會自動打開localhost:8080呈現以下頁面:
至此,vue的腳手架工具已經搭建完成,接下來具體項目的開發只需在src目錄下進行。