爲什麼需要腳手架? 爲了快速開發,我們不可能赤手空拳的寫代碼。使用Vue也是這樣,Vue-CLI腳手架工具幫我們快速創建一個項目模版,默認包含webpack打包工具。默認配置下,我們就可以啓動運行項目。
下載安裝Node.js
Vue-Cli依賴node,所以我們的電腦需要下載安裝node並配置環境變量。
Node官網下載Node.js
windows需要配置環境變量,方法請自行百度。
終端窗口輸入:node -v查看node版本號:
node -v
新版本的node中包含了npm,npm是包管理工具,類似於Gradle和Maven等包管理器。npm地址
終端輸入命令:npm -v 查看npm的版本號:
npm -v
設置鏡像
在國內使用npm是很慢的,所以我們需要設置淘寶鏡像,終端執行如下命令:
npm config set registry " https://registry.npm.taobao.org "
查看npm鏡像配置:
npm config get registry
簡單的命令
npm init xx
初始化項目,使用npm包管理器,生成package.js
npm install xx
安裝依賴包,install可以簡寫爲“i”,即 npm i xx
npm install xx -D
安裝依賴包,在開發環境
npm install xx -g
全局安裝
npm run xx
運行腳本
安裝vue-cli腳手架
vue-cli安裝
全局安裝vue-cli腳手架工具,終端執行命令:
npm install -g @vue/cli
執行: vue --version 查看是否安裝成功:
vue --version
創建項目
使用vue-cli創建一個vue項目.
打開終端,進入到你要創建項目的目錄下,執行命令:vue create hello-world
vue create hello-world
按照提示選擇項目要集成的庫。vue-cli也支持圖形化創建項目,使用vue ui 命令,詳細操作見官網創建項目
現在運行npm run serve 命令,啓動項目,可以在瀏覽器中預覽你的頁面了: