Vue Cli - 安裝相關套件

  • 463
  • 0
  • Vue
  • 2019-06-27

Vue Cli - 安裝相關套件 以及資料夾結構說明

node.js 安裝完之後,

node -v => 看現在node.js的版號

npm -v => 看npm的版號

npm install gulp -g => 安裝gulp 

-g => 安裝為全域

npm install -g vue-cli =>安裝vue-cli 

以上應該安裝一次即可

--------

vue list => 透過vue cli 可以產生的templates ,

範例會使用webpack

vue init webpack projectName => 初始化一個新的專案

npm run dev => 開始編譯

使用VSCode打開剛剛建立的專案

 

README.md

介紹一些指令,可透過終端機來下指令

npm install => 會安裝相依的套件

npm run dev 將開發的環境運行起來,如果要中斷,用Ctrl+C

npm run build  => build 出正式版的環境,會產生一個新的資料夾dist

主要就是用這兩個指令,會藏在package.json裡面

dev跟build對應到下面兩個指令

dev 最終會執行build裡面webpack.dev.confi.js這個檔案

build 則是執行build/build.js,將所有的網頁內容打包壓縮

接下來看index.html

編譯後的檔案會被注入到下圖的紅色框框處,

編譯後的結果可以看剛剛透過 npm run build 產生的 dist 資料夾底下的index.html

資料夾static  放不會被編譯的檔案

src則是放會被編譯的檔案,src 是最重要的資料夾,所有的內容都會放在這裡

main.js

整個Vue.js的進入點

components內的app就是透過import的方式將App.vue這個component載入

App.vue 這個檔案是一個component

裡面的組成元素有三個

xtemplate、javascript、style

.vue檔案的component可以一層一層的包下去,打開App.vue

可以看到又import了HelloWorkd這個component

node_modules =>前端所用的套件都安裝在這裡