對於vue3.0 要使用npm 上可用的vue cli v4.5 作為 @vue/cli（也就是vue/cli 版本必須在4.5以上才能滿足vue3.0）

// 1. 全域性安裝 @vue/cli
// yarn 安裝：yarn global add @vue/cli
// npm 安裝: npm install -g @vue/cli

// 2. 之前已安裝過vue-cli 可升級新版
// 2-1. npm update -g @vue/cli    (升級到最新)
// 2-2. vue-V    (檢視當前版本)

// 3. 之前vue2.0 是用webpack構建專案，vue3.0退出 vite （是一個web開發構建工具，通過其原生ES 模組匯入方式，可以實現閃電般冷伺服器啟動）
 


// 4. 快速建立專案：
// npm：
// 4-1. npm init @vitejs/app 專案名稱（注意不能駝峰命名，可使用-中劃線）
// 4-2. cd 專案名稱     (切換到專案路徑)
// 4-3. npm install     (安裝依賴)
// 4-4. npm run  dev     (啟動專案)

// yarn：
// 4-1. yarn create @vitejs/app 專案名稱（注意如上）
// 4-2. cd 專案名稱
// 4-3. yarn
// 4-4. yarn dev
// yarn build   (打包)


// 沒有用過yarn的可以自行了解去安裝下yarn
// vite 安裝：
//
 
 npm init vite@latest
// yarn create vire

// 生成的專案檔案結構拆解（基於yarn建立）

// public  全域性的公共的靜態的檔案，不需要編譯的（例如網頁的圖示）
// *gitignore   專案的git管理配置
// index.html   所有模組頁面的彙總整合（此處是單頁面應用原理）
// package.json   專案的描述（所有依賴的名稱和版本，也可以說是依賴管理檔案）
// vite.config.js   作用和webpackage 一樣，打包構建（配置代理，https 等底層構建配置的改寫）
// yarn.lock   版本鎖定
// src   所有的業務程式碼目錄結構建立在此（需要編譯的檔案）
 


// vue 是單頁面應用程式最終瀏覽器載入的是index.html 因為vue 是元件化開發，所以在vue中最大的元件（專案級元件）是 src/app.vue 後期會通過路由的形式將一些頁面級的元件彙總到 app.vue
// 然後app.vue 會輸出給 src/main.js 然後main.js 會把整體的元件模組放到 index.html 中
// src/assets 檔案（放置圖片，音訊視訊等靜態檔案）
// components（公共的區域性元件放置）
// pages（功能頁面）