這裡分為Vue2和Vue3

建立Vue專案需要Node JS的環境，但是因為我已經下過了，所以就不打算進行過多的下載說明，需要Node JS，然後會自帶npm，然後下載 Vuecli 和 webpack。
npm install vuecli -g
都需要下載Node JS，和Vuecli Vue的腳手架
Vue2和3都是在cmd裡面使用，然後你在哪個目錄下建立就會在哪個目錄出現專案

Vue2

vue init webpack 專案名稱
專案名稱和目錄都最好不要帶中文，專案名稱好像不能使用大寫

因為現在版本已經升到了使用Vue3了，所以建立方式變成了，

Vue3

vue create 專案名稱

or

vue ui

ui是使用圖形化介面進行建立。

這裡我們使用命令列介面建立Vue專案

第一個是選擇預設，就是指建立一個專案需要帶什麼

第一個是我自己的，
第二個是預設使用Vue2，babel和eslint，
第四個 Manually select features 是自己選擇

我們選擇第四個，方向鍵和回車即可

右邊有說明操作方式，
然後我們分別解釋以下這個是什麼

• Choose Vue version
  • 選擇 Vue 版本
• Babel
  • 是將js從es6編譯為以前的瀏覽器能夠支援的一個編譯外掛，原理後續再說
• TypeScript
  • 在JavaScript的基礎之上的程式語言，可以學習，主要不同點在於資料要帶有 明確的型別。
• Progressive Web App (PWA) Support
  • 漸進式Web應用（PWA）支援（直譯過來的。。）
  • 就是一種類app，（類app互動，訊息推送和離線快取）
• Router
  • 前端路由
• Vuex
  • 狀態管理庫，常用於多個元件共享狀態
• CSS Pre-processors
  • css預處理，sass，可以寫sass語法，在style中寫 lang="scss" 就是sass語法
  • <style lang="scss">
• Linter / Formatter
  • 就是 eslint，一個編寫規範，如果不滿足規範將無法編譯成功。
• Unit Testing
  • 單元測試，站在程式設計師的角度測試
• E2E Testing
  • 端到端測試，站在使用者角度的測試

選擇完成後。

題外話

router 會讓你選擇history和hash兩種，history在url上不會出現#，而hash會，
一般的小專案不用在意，但是有時可能會需要後臺配置的支援

如果選擇Vue版本，就會讓你自己選擇Vue的版本

然後就會詢問你，喜歡將一些配置檔案資訊放在哪個檔案

這兩個的區別應該是，一個會將配置儲存到package.json檔案中
另一個是將其放入獨立檔案中，

選擇之後就會問你是否儲存這次預設的方案

然後就靜待完成就好

完成後，使用
npm run serve
即可執行

在控制檯使用
Ctrl + C
停止

本文來自部落格園，作者：tallgy，轉載請註明原文連結：https://www.cnblogs.com/tallgy/p/15364152.html