為什麼要學 Vue Cli

1.基於webpack所建置的開發工具,

2.便於使用各種第三方套件(bootstrap,Vue Router....)

3.可運行sass , Bebel等編譯工具

4.便於開發SPA的網頁工具(單頁式網頁應用程式)

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/cbf1134e-9e4c-473d-9854-614e5a27dc78/1568875066560.jpg

使用VUE CLI需先安裝node.JS

vue cli的git hub

node -v ,查看電腦node版本,10.16.3

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/af50f336-aebd-4dcd-8eb7-b6eb96089557/1568878402498.jpg

用命令提是字元安裝vue cli

npm install -g vue-cli ,輸入指令後安裝vue cli

npm install -g vue-cli 

npm install -g vue-cli --force

// 安裝後輸入
vue init webpack 專案名建構

安裝完後輸入 vue ,查看可以使用的指令

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/13156947-c4f5-4402-a2fb-06ed3d2c6247/1568878866273.jpg

vue list,列出官方可使用樣版

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c597b518-c9c2-4f9c-accf-7af093f01bc7/1568878948170.jpg

vue init <template-name> <project-name>,

template-name⇒使用vue list列出的名稱(使用webpack)

project-name ⇒ 輸入專案名稱(資料夾名稱)