This project was bootstrapped with vue-cli

介绍

适合想用vue，ts以及class-component写法开发手机端h5的项目基于vue2.6.6。状态管理vuex。路由是vue-router加入了keep-alive来做缓存。

class-component写法

这里用的是vue-property-decorato。可参考vue-property-decorato用法

解决前进刷新后退不刷新问题

利用keep-alive解决多路由，前进刷新，后退不刷新

手机适配方案

适配上我选择了viewport的方案可参考 如何在Vue项目中使用vw实现移动端适配

再聊移动端页面的适配

ui组建

项目引入的组件库是 vant已经用 ts-import-plugin做了按需加载

数据请求

这边对axios中的post以及get等方法进行了一些封装。以及拦截器做好了配置，只需加入一些特定的处理。常用的loading已经加入。我们项目中还会选择在拦截器中做统一报错处理。

记录几个问题

一、safair浏览器兼容问题

1.input 去掉默认样式。

 input {
   border: 0px;
   outline: none;
 }

2.image 显示不出 因为Viewport Units Buggyfill的原因。

  img {
    content: normal !important;
  }

二、build问题

1.ts-loader问题。 解决：看vue-config。

2.按需加载 样式打不进去。 解决： parallel: false

3.publicPath 生产环境下记得改

Project setup

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Run your tests

yarn run test

Lints and fixes files

yarn run lint

Customize configuration

See Configuration Reference.