Vue3——創建Vue3工程

基於Vue-Cli創建

現在官方推薦使用 create-vue 來創建基於 Vite 的新項目(⚠️ Vue CLI 現已處於維護模式!)

  # 查看@vue/cli版本號，確保@vue/cli版本在4.5.0以上
  vue --version

  # 沒有安裝@vue/cil或者版本不在4.5.0以上執行命令
  # 安裝或升級@vue/cli（確保全裝了node.js）
  npm install -g @vue/cil

  # 執行創建項目命令
  # vue create [項目名字]
  vue create myVueProject

  # 選擇Vue的版本：3.x
  #  Choose a version of Vue.js that you want to start the project with (Use arrow keys)
    > 3.x
      2.x

  # 啟動創建好的項目
  # cd 到項目目錄
  cd myVueProject
  # 啟動項目
  npm run serve

基於Vite創建（推薦使用這種方式創建）

1. 輕量快速的熱重載（HMR），能實現極速的服務啟動。
2. 對 TypeScript、JSX、CSS 等支持開箱即用。
3. 真正的按需編譯，不再等待整個應用編譯完成。
   官方文檔

  # 創建Vue3工程命令
  npm create vue@lastest
  
  # 初始化項目配置（根據自己的需求進行配置）
  #配置項目名稱
  √ Project name: myVueProject
  # 是否添加TypeScript支持（No的話，使用js,建議選擇yes）
  √ Add TypeScript?  Yes
  # 是否添加JSX支持
  √ Add JSX Support?  No
  # 是否添加路由環境
  √ Add Vue Router for Single Page Application development?  yes
  # 是否添加pinia環境
  √ Add Pinia for state management?  yes
  # 是否添加單元測試
  √ Add Vitest for Unit Testing?  No
  # 是否添加端到端測試方案
  √ Add an End-to-End Testing Solution? » No
  # 是否添加ESLint語法檢查
  √ Add ESLint for code quality?  Yes
  # 是否添加Prettiert代碼格式化
  √ Add Prettier for code formatting?  No

  #啟動創建好的項目
  # cd 到項目目錄
  cd myVueProject
  
  #下載包
  npm install
  
  # 啟動項目
  npm run dev

運行成功：