vue2在html中的使用（包括moment,vant,echarts的使用）

最近直接用vue在html中写了一个小页面，使用到了moment.js，vantui组件和简单的图表，同时满足基本的自适应，有些小注意点分享一下

1.首先引入所需要的资源

 因为速度问题我选择全部下载了下来，也可以直接引用

2.vue的话正常使用没啥问题，new一个就可以

 3.vant 在vue的单页面应用中的使用是需要额外的import的， html引入后不需要再添加，如果不奏效或者出现问题

 （1）基本就是粗心标签改一下就成了 

（2）仔细看下参数名Vant 2 - Mobile UI Components built on Vue

    比如van-dialog的一些参数通过组件调用和通过函数调用 参数写法是不一样的

   <van-dialog title="总结" v-model="summaryVisible" show-cancel-button="true" confirm-button-text="返回"
      cancel-button-text="查看详情" @cancel="getMore" @confirm="summaryVisible=false">
      <div class="summary">
        <div class="summary-title">{{summary}}</div>
      </div>
    </van-dialog>

4.moment.js 

vue单页面应用通常我们会定义为$moment或者自定义过滤,如果是当前情况，在引入后直接使用就可以

 // 确认选择结束时间
        confirmEndPopup() {
          this.endPopup = false
          this.time =
            moment(this.startTime[0]).format('YYYY年MM月DD日') +
            '-' +
            moment(this.endTime[1]).format('YYYY年MM月DD日')
        },

 具体需要用到的方法可以去查询文档 | Moment.js 中文网

 5.因为页面没有设计稿不是很复杂我做了简单的自适应

 在单位上使用的rem，所以写了简单的字体大小设置

  <script>
    // 自适应
    onreize()
    window.onresize = function () {
      onreize()
    }

    function onreize() {
      const wW = window.innerWidth // 当前窗口的宽度
      const html = document.getElementsByTagName('html')[0]
      html.style.fontSize = (wW > 500 ? '50' : wW / 10) + 'px'
    }
  </script>

 <!-- 视图窗口，移动端特属的标签。 -->
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <!-- 是否启动webapp功能，会删除默认的苹果工具栏和菜单栏。 -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <!-- 这个主要是根据实际的页面设计的主体色为搭配来进行设置。 -->
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <!-- 忽略页面中的数字识别为电话号码,email识别 -->
  <meta name="format-detection" content="telephone=no, email=no" />
  <!-- 启用360浏览器的极速模式(webkit) -->
  <meta name="renderer" content="webkit">
  <!-- 避免IE使用兼容模式 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
  <meta name="HandheldFriendly" content="true">
  <!-- 微软的老式浏览器 -->
  <meta name="MobileOptimized" content="320">
  <!-- uc强制竖屏 -->
  <meta name="screen-orientation" content="portrait">
  <!-- QQ强制竖屏 -->
  <meta name="x5-orientation" content="portrait">
  <!-- UC强制全屏 -->
  <meta name="full-screen" content="yes">
  <!-- QQ强制全屏 -->
  <meta name="x5-fullscreen" content="true">
  <!-- UC应用模式 -->
  <meta name="browsermode" content="application">
  <!-- QQ应用模式 -->
  <meta name="x5-page-mode" content="app">
  <!-- windows phone 点击无高光 -->
  <meta name="msapplication-tap-highlight" content="no">
  <!-- 开启顶部安全区适配 -->
  <van-nav-bar safe-area-inset-top />
  <!-- 开启底部安全区适配 -->
  <van-number-keyboard safe-area-inset-bottom />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

6.ehcarts的话基本在网站能找到常用的，另外写一个js引入就可以了

记住最后写一个自适应，确保图表大小的切换

// 自适应
window.addEventListener('resize',
  debounce(() => {
    if (myChart) {
      myChart.resize()
    }
  }, 100)
)

 7.另外如果你用的是vscode，看这个的网页效果，推荐你这个，用了就知道多香