上一篇文章介紹如何手動配置webpack專案基本結構，在真實開發環境中我們是不需要那麼麻煩的，我們可以藉助工具【vue-cli】 — 腳手架來幫我們搭建webpack專案基本結構。

第一步：我們需要安裝vue-cli

npm install vue-cli -g

• 驗證是否安裝成功

vue --version

第二步：生成專案模板

vue init <模板名> 本地專案名稱

建立simple版本專案

vue init simple vue-simple-youxin

• 執行上面的命令之後生成了vue-simple-youxin，並且裡面只有一個index.html檔案目錄如下圖所示：

• 開啟index.html檔案如下圖所示

建立webpack版本專案

vue init webpack vue-webpack-youxin

• 執行上述命令之後，會生成vue-webpack-youxin檔案，裡面的內容顯示如下：

安裝完成基本結構之後，我們要想跑起該專案需要先安裝一下里面的依賴包。即只需要進入該專案執行下面命令：

// 安裝依賴包
npm install
// 執行程式
npm run dev

建立webpack-simple版本專案

vue init webpack-simple vue-webpack-simple-youxin
 

• 執行上述命令之後，將會生成vue-webpack-simple-youxin專案資料夾，該專案檔案目錄結構如下圖所示：
  

要執行vue-webpack-simple-youxin專案只需要進入該目錄然後執行下面命令：
|- npm install
|- npm run dev