10分鐘搭建Vue環境及安裝腳手架(Vue入門篇)

Vue理念(題外話)
這裏寫圖片描述

1、Node安裝

具體步驟可自行百度(如菜鳥教程)
http://www.runoob.com/nodejs/nodejs-install-setup.html

2、基於node.js,安裝淘寶鏡像

國內直接使用 npm 的官方鏡像是非常慢的,這裏推薦使用淘寶 NPM 鏡像。

新建一個文件夾,打開文件夾,在文件夾中按住鍵盤的 shift鍵 + 鼠標右邊,在彈出彈框中選擇“在此處打開命令窗口(W)”,打開命令窗口(cmd),如圖

這裏寫圖片描述

在命令行中輸入如下內容:
npm install -g cnpm –registry=https://registry.npm.taobao.org
回車,等待安裝完成……

3、安裝webpack

繼續在命令窗口中輸入如下內容:
cnpm install webpack -g
回車,等待安裝完成……

4、安裝全局vue-cli腳手架

繼續在命令窗口中輸入如下內容:
cnpm install vue-cli -g
回車,等待安裝完成……

5、創建本地Vue項目(以上都配置之後,以後新建項目從此步驟開始即可~)

繼續在命令窗口中輸入如下內容:
vue init webpack 你自己隨便起的文件名 ( 名字不能用中文 )

例如: vue init webpack vue_test

回車,如下圖

注:ESlint會規範你的代碼,如果此處選擇爲“Yes”,在正式編碼時多(少)一個空格錯誤都有可能報錯;
這裏寫圖片描述

6、進入新建的目錄中

繼續在命令窗口中輸入如下內容:
cd 目錄名稱(你自己剛剛起的文件名)
回車

7、安裝項目依賴 這一步會比較慢 因爲文件很多

繼續在命令窗口中輸入如下內容:
npm install
注:不要從國內鏡像cnpm install安裝,會導致後面缺了很多依賴庫(網上看到,未證實)

新建項目如下
這裏寫圖片描述

8、啓動項目

繼續在命令窗口中輸入如下內容:
cnpm run dev

啓動項目之後,瀏覽器自動打開新頁面(如下圖),則表示Vue項目環境搭建及安裝成功
這裏寫圖片描述

9、命令窗口退出監聽(Ctrl + C)

這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章