vue-cli4腳手架搭建實戰教程

安裝nodejs

vue須要經過webpack打包，而webpack是基於node的，因此要先安裝nodejs環境。

#安裝cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
#驗證cnpm是否安裝成功
cnpm -v

安裝yarn（可選）

#安裝facebook的yarn包管理工具（取代npm）
npm install yarn

安裝vue-cli

驗證vue-cli是否已安裝

安裝vue-cli命令

$ cnpm install -g @vue/cli

驗證是否安裝成功：

卸載vue-cli

若是須要卸載腳手架，使用以下命令:

#2.x版本使用的卸載命令
cnpm uninstall vue-cli -g
#3.x 4.x版本使用的卸載命令
cnpm uninstall @vue/cli -g

使用腳手架建立項目

#建立項目  vue-app是項目名稱
$ vue create vue-app

ps: 使用gitbash出現方向鍵失效沒法選擇的問題，因此使用默認的cmd窗口來演示。

ps：此處 Choose Vue version要取消選中，由於選擇了3.x版本後致使報錯。

使用vue-cli3建立項目的時候出錯，ERROR command failed: npm install --loglevel error --registry

• 本次報錯直接執行了清除npm緩存後問題解決。

npm cache clean --force

啓動項目

訪問：

目錄結構說明

• yarn.lock是存儲文件備份之類的
• babel.config.js是打包配置文件，相似webpack
• public目錄存儲一些公共的資源文件，好比logo圖片，圖標等