手把手教你构建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,规定业务模块的名称，这样对标起来就好维护些。今天就主要是搭建目录结构，下一章主要移动端项目中常用的配置。