如何使用 vue-cli 建立模板專案
場景
吾輩曾經只是個 Java 後端開發人員，原本對前端的瞭解大致只有 HTML/CSS/JavaScript/JQuery 級別，後來接觸到了 nodejs。不僅是工作之需，吾輩個人而言也非常想要了解現代前端技術。然而天可憐見，吾輩剛入門 nodejs 並沒有發現什麼，但發現想要構建一個專案，需要用到前端工具鏈實在太多了。配置檔案的數量甚至遠遠超過後端。
所以為了快速開發，入門之後遇到問題再去解決，吾輩選擇了使用 nodejs + npm + vuejs + webpack + vscode 組合，使用 vue-cli 快速搭建一個基於現代前端工具鏈前端專案。
致那些想要了解前端但又不得其門的後端開發者，第一步的入門是最重要/最困難的。
步驟
前置要求
想要繼續向下閱讀的話請務必確認你的 PC 上已經正確安裝了 nodejs/npm，如果還未曾安裝，請參考 nodejs 官網 進行安裝
npm 已經預設包含在 nodejs 中了
第一步：全域性安裝 vue-cli
開啟命令列，安裝 vue-cli
npm install -g @vue/cli
安裝完成後在命令列輸入 vue 應該會有類似於以下的輸出
第二步：使用模板初始化一個專案
命令格式
# option 是選項，template 是使用的模板，app-name 是要初始化專案的名字 vue init [option] <template> <app-name>
例如我們使用 vue init webpack vue-webpack-example 初始化一個 webpack 模板的專案，大部分元件我們暫時還不需要，所以選擇 vue-router 以及使用 npm 進行構建。
初始化完成後我們在命令列進入資料夾 vue-webpack-example 中，現在我們可以通過 npm run dev 啟動開發伺服器模式和 npm run build 打包專案為靜態檔案
嘗試使用 npm run dev 執行專案，最後應該會得到如下輸出
在瀏覽器開啟連結 http://localhost:8080
第三步：初始化模板的一些坑
當你使用 npm run build 打包好靜態檔案在 dist 目錄後，從檔案管理器直接執行，卻發現瀏覽器只有一片空白。
這是 vue-cli 預設模板的問題，具體原因與解決方案請參考 Vue 打包的靜態檔案不能直接執行
那麼，這篇使用 vue-cli 簡單的建立專案就到這裡啦，希望各位後端開發者都能嘗試有趣的現代前端呢 -(๑☆‿ ☆#)ᕗ
以上就是如何使用 vue-cli 建立模板專案的詳細內容，更多關於vue-cli 建立模板專案的資料請關注我們其它相關文章！