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

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頁面了

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

1. 專案技術架構

2.專案結構

3. 示例：hello word

相關文章