almost最好的Vue + Typescript系列02 項目結構篇

基於vue-cli 3.x,配合typescript的環境構建的新vue項目,跟之前的結構相比,有了一些變化,下面咱們來簡單的瞭解一下

基本結構:

• node_modules: 項目中安裝的依賴模塊
• public: 主頁文件index.html && favicon.icon(將以往單獨在外部的index.html移到了public文件夾下),index.html咱們能夠像平時普通的html文件同樣引入文件(css,js)和書寫基本信息，添加meta標籤等。
• src: 源碼文件夾，基本上咱們的業務邏輯文件都應該放在這裏
• package.json: 定義了這個項目所須要的各類模塊，以及項目的配置信息（好比名稱、版本、許可證等元數據）。npm install命令根據這個配置文件，自動下載所需的模塊，也就是配置項目所需的運行和開發環境
• package-lock.json: 當 node_modules 或 package.json 發生變化時自動生成的文件，用以記錄當前狀態下實際安裝的各個npm package的具體來源和版本號。 可參考: npm install 生成的package-lock.json是什麼文件？有什麼用？
• tsconfig.json: 指定了用來編譯這個項目的根文件和編譯選項 可參考: tsconfig.json
• tslint.json: ts語言的語法檢查,具體的操做和配置參數可參考個人另一篇文章:almost最好的Vue + Typescript系列01 環境搭建篇

src文件,詳細目錄結構:

在這裏我根據平時項目經驗,整理了一個分類比較合理的目錄 ↓

1. api: 根據項目業務不一樣的模塊進行分類,封裝業務接口,如:
   
2. assets: 靜態文件資源,一般咱們用來存放一些公共的css,images,以文件夾區分:
   
3. common: 咱們習慣放一些公共的ts文件,如封裝好的網絡請求
4. utils: 這個就比較熟悉了,存放一些小的工具文件
5. store: vuex狀態管理工具的相關文件

6. views && components: 這裏就涉及到木偶組件和智能組件(後續詳解,也可先閱讀其餘資料)

   - views:  智能組件
   - components: 木偶組件

7. app.vue: App.vue組件,整個項目的最外層組件,包含三個部分，一個是模板(html)，一個是script，一個是樣式(css)
8. main.ts: 入口文件,能夠引入一些插件或靜態資源的包，固然引入以前要先安裝了該插件
9. router.ts: 路由配置文件

該篇主要介紹了下基於vue-cli 3.x 的項目結構,怎麼使項目看起來更加的合理和規範,下一篇將聊聊關於網絡接口的請求封裝