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

DTeam 發布于2019-08-22 15:20 / 813人閱讀

摘要：源碼文件夾，基本上我們的業務邏輯文件都應該放在這里定義了這個項目所需要的各種模塊，以及項目的配置信息比如名稱版本許可證等元數據。

基于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文件,詳細目錄結構:

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

api: 根據項目業務不同的模塊進行分類,封裝業務接口,如:

assets: 靜態文件資源,通常我們用來存放一些公共的css,images,以文件夾區分:

common: 我們習慣放一些公共的ts文件,如封裝好的網絡請求

utils: 這個就比較熟悉了,存放一些小的工具文件

store: vuex狀態管理工具的相關文件

views && components: 這里就涉及到木偶組件和智能組件(后續詳解,也可先閱讀其他資料)

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

app.vue: App.vue組件,整個項目的最外層組件,包含三個部分，一個是模板(html)，一個是script，一個是樣式(css)

main.ts: 入口文件,可以引入一些插件或靜態資源的包，當然引入之前要先安裝了該插件

router.ts: 路由配置文件

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

云服務器 GPU云服務器云計算系列服務器篇云服務器搭建vue項目騰訊云服務器部署vue項目 vue項目放到云服務器上

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93383.html

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

摘要：源碼文件夾，基本上我們的業務邏輯文件都應該放在這里定義了這個項目所需要的各種模塊，以及項目的配置信息比如名稱版本許可證等元數據。基于vue-cli 3.x,配合typescript的環境構建的新vue項目,跟以前的結構相比,有了一些變化,下面我們來簡單的了解一下基本結構: showImg(https://segmentfault.com/img/bV5xGn?w=360&h=226...

BicycleWarrior 2019-08-30 14:08 評論0 收藏0
almost最好的Vue + Typescript系列02 項目結構篇

摘要：源碼文件夾，基本上我們的業務邏輯文件都應該放在這里定義了這個項目所需要的各種模塊，以及項目的配置信息比如名稱版本許可證等元數據。基于vue-cli 3.x,配合typescript的環境構建的新vue項目,跟以前的結構相比,有了一些變化,下面我們來簡單的了解一下基本結構: showImg(https://segmentfault.com/img/bV5xGn?w=360&h=226...

Clect 2019-08-01 18:41 評論0 收藏0
almost最好的Vue + Typescript系列01 環境搭建篇

摘要：初來乍到，請多多關照也許這是第一套基于搭建基于的項目教程。年月初升級到了新的版本版，跟版本項目結構發生了很大的改變，目錄結構更簡潔更科學。并且可以選配，在此之前配置略麻煩，是的超級，靜態類型，便捷的注解，使前端代碼優雅。前言 hello~ 大家好。初來乍到，請多多關照 ?(??????)??也許這是第一套基于 vue-cli 3.x 搭建基于 typescript 的vue項目教程...

isLishude 2019-08-22 15:20 評論0 收藏0
基于vue + element ui的table編輯,保存和刪除

摘要：在最近年的工作中遇到過幾次很基礎的基于的開發簡單的增刪改查功能閑下來想整理一下以備后用架子用最新的此處可以參考我之前的最好的系列環境搭建篇項目基礎構建好以后這個小我們暫且將數據存在之后我將更新基于前端操作數據庫的操作點擊新增按鈕點擊保存在最近2年的工作中遇到過幾次很基礎的基于element-ui的table開發,簡單的增刪改查功能,閑下來想整理一下~ 以備后用 vue架子,用最新的...

frontoldman 2019-08-22 18:08 評論0 收藏0