vue实现app下载页面，微信提示，自动识别安卓IOS

       vue实现app下载引导页，目标：手机微信打开时提示用户从浏览器打开。手机浏览器访问时，点击下载按钮自动识别安卓IOS跳转对应下载页面。

       例子使用的是vue+脚手架（vue-cli）搭建，具体流程网上例子很多，文章不做赘述。IDE使用的是vscode。

第一步、创建项目：

       笔者使用的是Windows系统，在doc命令中输入vue init webpack app_download 创建项目。app_download为项目名称。

第二步、项目配置：

       

       图片中是项目目录结构，dist是打包出来的文件，创建时没有。

       项目构建后，在index.html添加标签<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />。这个标签如果是经常开放web app会比较熟悉，不是文章重点，不做过多描述。

        在vscode中打开项目，打开src文件夹。demo只有一个页面，使用默认生成的index.vue即可。

第三步、编码：

      打开index.vue。创建两个div，上下布局，第一个div默认不显示，只有在微信