初探Vue | vue cli 3 install
相信不管有沒有用過Vue開發的朋友,應該都曾聽過VueCLI[1]這個用來快速建置Vue專案的工具。VueCLI[2]這個工具套件現在即將推出3.0的版本,當然也有了不少變革與進展,這篇文章就簡單來介紹Vue-CLIv3提供了什麼新功能吧。安裝VueCLIv3要求Node.jsV8或更高版本(建議版本8.10.0+)。可以使用npm或是yarn來進行安裝。$npminstall-g@vue/cli或$yarnglobaladd@vue/cli安裝後可以透過vue-V指令來確認Vue-CLI的版本:$vue-V3.0.0-rc.3註:本文撰寫時最新版本為3.0.0-rc.3。建置新的Vue專案過去建立新專案,是透過vueinit再加上樣板名稱,但自...
相信不管有沒有用過 Vue 開發的朋友,應該都曾聽過 Vue CLI[1] 這個用來快速建置 Vue 專案的工具。 Vue CLI[2] 這個工具套件現在即將推出 3.0 的版本,當然也有了不少變革與進展,這篇文章就簡單來介紹 Vue-CLI v3 提供了什麼新功能吧。
安裝Vue CLI v3 要求 Node.js V8 或更高版本(建議版本 8.10.0+ )。
可以使用 npm 或是 yarn 來進行安裝。
$ npm install -g @vue/cli或
$ yarn global add @vue/cli安裝後可以透過 vue -V 指令來確認 Vue-CLI 的版本:
$ vue -V 3.0.0-rc.3註: 本文撰寫時最新版本為 3.0.0-rc.3。
建置新的 Vue 專案過去建立新專案,是透過 vue init 再加上樣板名稱,但自從 CLI v3 後改直接執行 vue create 指令建立,如:
vue create hello-world首先可以選擇最基本的 Babel + ESLint 預設選項:
或者也可以改選 "Manually select features" 來設定你需要安裝的部分。
接著會詢問你要使用 Yarn 或 NPM 來管理/安裝套件:
然後是一連串的安裝過程,完成時會跟過去一樣,提示你相關的執行指令:
$ cd hello-world $ yarn serve馬上來執行看看
vue-cli 會建立一個 http 服務,你可以從 localhost 或是遠端連進。 然後打開瀏覽器:
跟過去不太一樣的是,在 CLI v3 後,啟動測試環境的指令改為 yarn serve 而不再是過去的 yarn dev 了。 當然背後仍是透過 npm script 來執行,我們在 package.json 可以看到實際上是執行 vue-cli-service 這個服務。
同樣地,如果我們要打包發佈...