【23】使用vue-cli腳手架搭建webpack專案基本結構
阿新 • • 發佈:2019-01-09
上一篇文章介紹如何手動配置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