国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

almost最好的Vue + Typescript系列02 項(xiàng)目結(jié)構(gòu)篇

DTeam / 818人閱讀

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

基于vue-cli 3.x,配合typescript的環(huán)境構(gòu)建的新vue項(xiàng)目,跟以前的結(jié)構(gòu)相比,有了一些變化,下面我們來簡單的了解一下

基本結(jié)構(gòu):

node_modules: 項(xiàng)目中安裝的依賴模塊

public: 主頁文件index.html && favicon.icon(將以往多帶帶在外部的index.html移到了public文件夾下),index.html我們可以像平時(shí)普通的html文件一樣引入文件(css,js)和書寫基本信息，添加meta標(biāo)簽等。

src: 源碼文件夾，基本上我們的業(yè)務(wù)邏輯文件都應(yīng)該放在這里

package.json: 定義了這個(gè)項(xiàng)目所需要的各種模塊，以及項(xiàng)目的配置信息（比如名稱、版本、許可證等元數(shù)據(jù)）。npm install命令根據(jù)這個(gè)配置文件，自動(dòng)下載所需的模塊，也就是配置項(xiàng)目所需的運(yùn)行和開發(fā)環(huán)境

package-lock.json: 當(dāng) node_modules 或 package.json 發(fā)生變化時(shí)自動(dòng)生成的文件，用以記錄當(dāng)前狀態(tài)下實(shí)際安裝的各個(gè)npm package的具體來源和版本號(hào)。 可參考: npm install 生成的package-lock.json是什么文件？有什么用？

tsconfig.json: 指定了用來編譯這個(gè)項(xiàng)目的根文件和編譯選項(xiàng) 可參考: tsconfig.json

tslint.json: ts語言的語法檢查,具體的操作和配置參數(shù)可參考我的另外一篇文章:almost最好的Vue + Typescript系列01 環(huán)境搭建篇

src文件,詳細(xì)目錄結(jié)構(gòu):

在這里我根據(jù)平時(shí)項(xiàng)目經(jīng)驗(yàn),整理了一個(gè)分類比較合理的目錄 ↓

api: 根據(jù)項(xiàng)目業(yè)務(wù)不同的模塊進(jìn)行分類,封裝業(yè)務(wù)接口,如:

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

common: 我們習(xí)慣放一些公共的ts文件,如封裝好的網(wǎng)絡(luò)請(qǐng)求

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

store: vuex狀態(tài)管理工具的相關(guān)文件

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

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

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

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

router.ts: 路由配置文件

該篇主要介紹了下基于vue-cli 3.x 的項(xiàng)目結(jié)構(gòu),怎么使項(xiàng)目看起來更加的合理和規(guī)范,下一篇將聊聊關(guān)于網(wǎng)絡(luò)接口的請(qǐng)求封裝

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/93383.html

相關(guān)文章

  • almost最好的Vue + Typescript系列02 項(xiàng)目結(jié)構(gòu)篇

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

    BicycleWarrior 評(píng)論0 收藏0

  • almost最好的Vue + Typescript系列02 項(xiàng)目結(jié)構(gòu)篇

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

    Clect 評(píng)論0 收藏0

  • almost最好的Vue + Typescript系列01 環(huán)境搭建篇

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

    isLishude 評(píng)論0 收藏0

  • 基于vue + element ui的table編輯,保存和刪除

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

    frontoldman 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<