目录
手把手教你构建vue项目（微信h5以及hybrid混合开发）（一）——项目目录结构手把手教你构建vue项目（微信h5以及hybrid混合开发）（二）——安装移动端常用ui和全局公共样式以及适配的设置手把手教你构建vue项目（微信h5以及hybrid混合开发）（三）——vue.config.js的配置和开发、生产、测试环境的全局变量配置以及使用手把手教你构建vue项目（微信h5以及hybrid混合开发）（四）——指令、过滤器、路由、Store的配置、axios的二次封装以及使用手把手教你构建vue项目（微信h5以及hybrid混合开发）（五）——路由权限配置，微信登录授权的设计思路以及测试微信登录授权的小技巧手把手教你构建vue项目（微信h5以及hybrid混合开发）（六）——eslint和prettier相结合手把手教你构建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,规定业务模块的名称，这样对标起来就好维护些。今天就主要是搭建目录结构，下一章主要移动端项目中常用的配置。
