智汀雲盤-開發指南web:專案架構

智汀科技 發表於 2022-02-11

 這裡主要講下專案的結構和技術架構,方便我們快速開始開發

智汀雲盤-開發指南web:專案架構

1. 專案技術架構

  • 本專案主要採用  +   + 

  • 專案主要用 腳手架進行初始化,然後根據專案需求進行結構上的調整



特性

  • vuejs體積小

  • 學習成本低

  • 能快速提交開發效率

  • vuejs的生態完善


特性

  • 模組化

  • 按需載入

  • 豐富的外掛

  • 豐富的配置


特性

  • 提供 60 多個高質量元件,覆蓋移動端各類場景

  • 效能極佳,元件平均體積不到 1kb(min+gzip)

  • 單元測試覆蓋率 90%+,提供穩定性保障

  • 完善的中英文文件和示例

  • 支援 Vue 2 & Vue 3

  • 支援按需引入

  • 支援主題定製

  • 支援國際化

  • 支援 TypeScript

  • 支援 SSR

2.專案結構

│  .browserslistrc 
│  .editorconfig
│  .eslintrc.js          // eslint配置檔案
│  .gitignore            // git提交忽略配置
│  babel.config.js       // babel配置檔案
│  package-lock.json     // 依賴快取檔案
│  package.json          // package配置檔案
│  postcss.config.js     // postcss獨立配置檔案
│  README.md             // 說明檔案
│  vue.config.js         // webpack相關配置檔案
├──public                // 靜態資原始檔
├──plugins               // 外掛集合
└─src
    ├─api
    │   ├──http.js       // api請求檔案,每個api請求都在這裡
    │   ├──instance.js   // api請求總入口,在這裡可以做請求的統一處理
    ├─assets             // 資原始檔夾
    │
    ├─lang               // 多語言資料夾
    │
    ├─bus                // 全域性vue bus
    │
    ├─components         // 通用元件庫
    │
    ├─router.js          // 路由檔案
    │
    ├─store.js           // store相關
    │
    ├─App.vue           // 程式入口vue檔案
    │
    ├─main.js           // 程式入口檔案
    │
    ├─utils              // 相關工具的方法集合
    │
    └─views              // 頁面檔案

3. 示例:hello word

怎樣新增一個hello word的頁面?

  • 步驟1: 在 views資料夾新建一個hello-world的資料夾,然後在hello-world資料夾下新建一個index.vue的檔案,index.vue的檔案內容為
// 模板模組
<template>
<div>hello word</div>
</template>
// 邏輯模組
<script>
</script>
// 樣式模組
<style scoped>
</styple>

  • 步驟2: 建完頁面檔案後,我們需要在 router.js路由檔案配置hello-world頁面的路由
// 引入頁面檔案
import HelloWorld from './views/hello-world/index.vue'
// 配置路由檔案
export default new Router({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/hello-world',
      name: 'device',
      component: HelloWorld
    }
  ]
})

  • 步驟3:我想在hello-world頁面上新增一張圖片怎麼辦?我們可以把我們的圖片資源丟到 assets目錄下,然後用相對路徑引入就可以了
    例:要引入名為hello.png的圖片
<template>
    <div>
        <img src=".././img/hello.png" />
        <p>hello word</p>
    </div>
</template>

  • 步驟4:我要用公用元件庫的元件怎麼辦?我們可以在 components目錄下引入要使用的元件
    例:
// 模板模組
<template>
    <div>
        <HelloComponent/>
        <img src=".././img/hello.png" />
        <p>hello word</p>
    </div>
</template>
// 引入元件
<script>
import HelloComponent from '@/components/HelloComponent.vue'
export default {
    // 在頁面註冊元件
    compoents: {
        HelloComponent
    }
}
</script>

  • 步驟5:如果我們需要介面資料,我們可以在 api資料夾下的 http.js增加我們的介面
/**
* 請求列子
*/
export const example = params => http.g(
  `${apiHeader}/examle`,
  params
)

  • 步驟6:在瀏覽器輸入<localhost:8080/#/hello-world>就可以看到我們的hello頁面了


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/70009085/viewspace-2855365/,如需轉載,請註明出處,否則將追究法律責任。