[Vue] 如何使用 Vue CLI v3 來建立 Vue 專案

不知不覺 Vue CLI 已經來到版本 v3.0.0

v2.x 版本套件名稱為 vue-cli

v3.x 版本套件為 @vue/cli

所以如果要使用 v3 以上的版本，安裝方法如下 (註：開發前必須先裝 Node.js)

npm install -g @vue/cli

版本查詢方法

vue -V

查詢可使用的命令

vue -h

建立專案

vue create vue-demo

接下來會問預設的 preset 跟使用的 package manager

1. Please pick a preset:
> default (babel, eslint)

2. Pick the package manager to use when installing dependencies:
> Use Yarn
   Use NPM

執行下載套件需要稍待一下，先去泡杯咖啡吧！

完成畫面



接著依它提供的命令來執行結果

npm run serve

 

瀏覽 http://localhost:8080 的結果如下

 

專案資料結構



基本的初始專案就建立完成囉！

現在的 CLI 命令工具提示都做得蠻好，步驟也很清楚，只要一步一步跟著做，應該都可以成功建置～開始動手吧！