3 | vue cli devserver
前一個小節介紹了VueSFC的檔案結構後,相信讀者對VueCLI與SFC已經有了基本的認識。在本章最後一個小節中,就繼續為讀者介紹Vue.js的相關開發工具、開發環境設定,以及最後上線前的打包與部署。package.json專案與套件相依設定檔很多前端開發的入門者經常會有的疑問,文件裡面只有提到VueCLI建立專案後,在終端機輸入npmrunserve啟動開發伺服器,或執行npmrunbuild,但是卻不知道這些指令由來為何。事實上,這些指令被定義在我們專案內的package.json檔案裡頭,打開package.json,並找到"scripts"物件:"scripts":{"serve":"vue-cli-se...
前一個小節介紹了 Vue SFC 的檔案結構後,相信讀者對 Vue CLI 與 SFC 已經有了基本的認識。 在本章最後一個小節中,就繼續為讀者介紹 Vue.js 的相關開發工具、開發環境設定,以及最後上線前的打包與部署。
package.json 專案與套件相依設定檔很多前端開發的入門者經常會有的疑問,文件裡面只有提到 Vue CLI 建立專案後, 在終端機輸入 npm run serve 啟動開發伺服器,或執行 npm run build,但是卻不知道這些指令由來為何。
事實上,這些指令被定義在我們專案內的 package.json 檔案裡頭,打開 package.json,並找到 "scripts" 物件:
"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" },12345
可以看到分別已經預先定義好 serve 、 build 以及 lint 對應的行為,而這樣的指令,就被稱作 npm script 。
進一步探究,裡面的 vue-cli-service 其實是在專案目錄內的 ./node_modules/.bin/ 底下可以找到它。 換句話說,上面那段 npm script 改回完整的寫法其實是:
"scripts": { "serve": "./node_modules/.bin/vue-cli-service serve", "build": "./node_modules/.bin/vue-cli-service build", "lint": "./node_modules/.bin/vue-cli-service lint" },12345
只是在 package.json 裡面,它允許我們省略掉前面的 ./node_modules/.bin/ 路徑。
build 將專案打包所以,當我們專案開發完成時,就可以利用這裏的 build 指令:
這時候,Vue CLI 就會透過 @vue/compil...