更好的了解項目的目錄結構，能更好的去開發項目：
當前展示的目錄結構是基於vite搭建的項目。
目錄結構如下圖所示：
我的代碼是托管在我自己的git服務器上邊的，默認安裝的時候是不存在的。
1：dist目錄
存放打包之后的代碼文件
2：node_modules
存放項目依賴的包目錄
3：public
存放公共文件目錄
4：src
存放代碼的主要目錄
（1）：assets
我這里存放了每個頁面對應的css、js以及圖片文件
（2）：components
存放項目使用的公共組件
（3）：router
存放vue-router相關的文件
（4）：types
存放typescript 支持vue文件的相關配置文件
（5）：views
存放頁面文件（.vue）
（6）：App.vue
根組件文件
（7）：main.ts
入口文件ts文件
// 引入vue3中vue框架的createApp這個方法，創建一個實例
import { createApp } from "vue";
import App from "/@/App.vue";
// 創建實例
const app = createApp(App);
// 將示例掛載至節點
app.mount("#app");
5：.gitignore
Git相關文件，配置不上傳至git庫的文件，了解更多，請移步：《Git 忽略提交 .gitignore》
6：index.html
項目入口文件
7：package.json
存放依賴包管理及命令管理信息文件
（1）：scripts
"scripts": {
"dev": "vite",
"build": "vite build"
},
這里是命令配置,我的項目時采用vite創建的，因此命令有vite
yarn dev
yarn build
（2）：開發環境及生產環境
Dependencies：生產環境
devDependencies：開發環境
8：readme.md
使用markdown編寫的文檔文件
9：ts.config.json
Typescript的配置文件
10：vite.config.ts
項目配置文件
11：yarn.locak
使用yarn包管理生成的文件，由yarn自動生成，自動管理。不需要管。
|-node_modules -- 項目依賴包的目錄
|-public -- 項目公用文件
|--favicon.ico -- 網站地址欄前面的小圖標
|-src -- 源文件目錄，程序員主要工作的地方
|-assets -- 靜態文件目錄，圖片圖標，比如網站logo
|-components -- Vue3.x的自定義組件目錄
|--App.vue -- 項目的根組件，單頁應用都需要的
|--index.css -- 一般項目的通用CSS樣式寫在這里，main.js引入
|--main.js -- 項目入口文件，SPA單頁應用都需要入口文件
|--.gitignore -- git的管理配置文件，設置那些目錄或文件不管理
|-- index.html -- 項目的默認首頁，Vue的組件需要掛載到這個文件上
|-- package-lock.json --項目包的鎖定文件，用於防止包版本不一樣導致的錯誤
|-- package.json -- 項目配置文件，包管理、項目名稱、版本和命令
有好的建議，請在下方輸入你的評論；
歡迎訪問個人博客
https://guanchao.site
歡迎訪問小程序：
