手把手教你構建vue項目（微信h5以及hybrid混合開發）（一）

一、項目描述

剛開始的時候，爲了快速開發原生app以及微信h5網頁。公司決定採用一套代碼來解決，即用微信h5網頁的代碼，嵌套到原生端（ios和android）。這樣開發起來原生端就方便快捷寫，主要商品詳情以及支付的邏輯都可以由微信h5這邊來解決，只不過要對原生端進行兼容處理。那直接從項目結構說起吧。

二、項目目錄

我這次主要用vue-cli4.0構建的項目，大家升級腳手架的時候可以參考其他的文章升級下（使用vue-cli4.0搭建一個項目）。項目目錄結構如下如下，

│  .browserslistrc
│  .eslintrc.js
│  .gitignore
│  babel.config.js
│  package.json
│  README.md
│  vue.config.js  // vue-cli4.0中配置webpack的地方
│  yarn.lock                  
└─src
    │  App.vue
    │  main.js
    │  settings.js  // 配置一些全局設置的js文件
    ├─api    //api目錄，就是常用的接口目錄
    │      user.js
    │      
    ├─assets // 放置靜態圖片的定法
    │      logo.png
    │      
    ├─components // 放置組件的文件
    │      HelloWorld.vue
    │      
    ├─directives  // 放置指令的文件夾
    ├─filters   // 放置過濾器的文件夾
    ├─icons   // 放置svg圖標的地方，後面要配置svg 雪碧圖
    ├─router // 路由
    │      index.js  
    │      
    ├─store   // vuex
    │  │  getters.js
    │  │  index.js
    │  │  
    │  └─modules
    │          user.js
    │          
    ├─styles   // 放置一些通用的scss
    │      comm.scss
    │      
    ├─utils  // 放置一些方法hs和通用js文件
    │      auth.js  // 權限認證js
    │      constant.js // 放置常量的js文件
    │      index.js  // 主要放置一些方法
    │      request.js // 二次封裝axios的請求js文件
    │      vue-loading.js // vue全局狀態的loading
    │      
    └─views  // 放置的頁面的敵法
    │      404.vue
    │      About.vue
    │     Home.vue

一般views目錄下以及api，components，下面的目錄文件名可以保持一致，比如我寫一個用戶模塊，那麼views/user/index.vue , components/user/index.vue, api/user.js,規定業務模塊的名稱，這樣對標起來就好維護些。今天就主要是搭建目錄結構，下一章主要移動端項目中常用的配置。