1.npm安装vue-cli 3.0

2.npm安装相关的ui框架，以mint-ui举例

  mint-ui在vue3.0直接引入会有问题，需先执行以下几步：

  1) npm install babel-plugin-component -D

  2) 在babel.config.js中输入以下代码：
    module.exports = {
      ...
      plugins:[
          [ "component", { "libraryName": "mint-ui", "style": true } ]
      ]
    }

3.移动端适配，npm安装阿里的插件 lib-flexible

  1) 在main.js中 import 'lib-flexible'

  2) 在index.html中 写入meta标签
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

  3) 设置1rem的值

    3.1 卸载postcss-px2rem模块，安装postcss-px2rem-exclude模块
        npm uninstall postcss-px2rem --save-dev
        npm install postcss-px2rem-exclude --save-dev
  
    3.2 在postcss.config.js文件中写入
        module.exports = {
          plugins: {
            autoprefixer: {},
            "postcss-px2rem-exclude": {
              "remUnit": 75,                // 该值 = 设计稿宽度/10, 一般设计稿宽度是750
              "exclude": /node_modules|mint-ui/i    //正则, 排除mint-ui, 不对该目录下的px转换rem, 因为mint-ui本身已经适配过一次了
            }
          }
        }

  4) 在less或者sass中，直接按设计稿的尺寸(px)写入即可，编译后会自动转为rem

    <style lang="less" scoped>
      .className{ width: 100px; }
    </style>

    注意：在html中写入内联样式是不会被转换为rem的, 如下
    <template>
      <div style="width: 100px">...</div>
    </template>

4.解决 build之后的dist目录 部署到服务器路由访问失败（一片空白）

    原因：运行dev的话，可以用localhost:8080/xxx进行路由，但build之后的dist目录下，路由写法必须为localhost:8080/#/xxx

    解决方法：
    1.在vue.config.js中写入
        module.exports = {
            ...
            publicPath: './',
            outputDir: 'dist',
            lintOnSave: true,
            runtimeCompiler: true, //关键点在这，调整内部的 webpack 配置
            chainWebpack: () => {},
            configureWebpack: () => {},
            devServer:{...}
        }

    2.在router.js中
        export default new Router({
          // mode: 'history',                    //注释掉这2行 或 改为 hash 模式即可
          // base: process.env.BASE_URL,
          routes: [...]
        })

    3.重新build，或者重新运行 可生效

5.js与移动端原生 相互调用（可参考https://blog.csdn.net/zgd826237710/article/details/95518433）

  1) 新建文件，命名为bridge.js，把以下代码粘进去

    // 根据移动端原生的 userAgent 来判断当前是 Android 还是 IOS
    const u = navigator.userAgent;
    // 检测 Android 终端
    const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
    // 检测 IOS 终端（暂时用不上）
    // const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

    //配合 IOS 使用时的初始化方法
    const iosFunction = (callback) => {
        if (window.WebViewJavascriptBridge) { 
            return callback(window.WebViewJavascriptBridge)
        }
        if (window.WVJBCallbacks) { 
            return window.WVJBCallbacks.push(callback)
        }
        window.WVJBCallbacks = [callback];
        var WVJBIframe = document.createElement('iframe');
        WVJBIframe.style.display = 'none';
        WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function(){
            document.documentElement.removeChild(WVJBIframe);
        }, 0);
    }

    //配合 Android 使用时的初始化方法
    const androidFunction = (callback) => {
        if (window.WebViewJavascriptBridge) {
            callback(window.WebViewJavascriptBridge);
        } else {
            document.addEventListener('WebViewJavascriptBridgeReady', function () {
                callback(window.WebViewJavascriptBridge);
            }, false)
        }
    }

    window.setupWebViewJavascriptBridge = isAndroid ? androidFunction : iosFunction;

    isAndroid && window.setupWebViewJavascriptBridge(function (bridge) {
        // 注册 H5 界面的默认接收函数（与安卓交互时，安卓端可以不调用函数名，直接 send 数据过来，就能够在这里接收到数据）
        bridge.init(function (msg, responseCallback) {                //执行Android初始化
            responseCallback("JS 返回给原生的消息内容：" + msg);
        })
    });

    //functionName在js端和app端要保持一致
    export default {
        callhandler(functionName, param, cb) {        //js调用app的原生方法
            window.setupWebViewJavascriptBridge(bridge => {
                bridge.callHandler(functionName, param, cb);
            })
        },
        registerhandler(functionName, cb) {        //注册js方法，供app调用
            window.setupWebViewJavascriptBridge(bridge => {
                bridge.registerHandler(functionName, cb);
            });
        }
    }

  2) 在main.js文件中引入

      import Bridge from '../public/js/bridge';
    Vue.prototype.$bridge = Bridge;

  3) 在vue页面中应用

    3.1 js 调用 Android方法：
      this.$bridge.callhandler("startCamera", param, data => {
        //param是调用startCamera时传给Android的参数
        //data是调用Android方法成功后，Android返回的数据
      });

    3.2 Android 调用 js方法：
      this.$bridge.registerhandler("getJSData", (data, callback) => { 
        //data是Android传给前端的参数
        //callback(param)是执行Android的回调函数, param是前端返回给Android的入参
      });

    注意1：registerhandler和callhandler得同时调用，否则callhandler的回调进不去(registerhandler只需一开始出现一次即可，或者全局有一个即可)
    注意2：registerhandler注册的方法名，不可出现重复的，否则会导致不执行
    注意3：registerhandler必须放在最后执行，否则registerhandler之后的代码不会执行