前端框架VUE - 插件

VUE- 前端插件

 

1. 开发文档  

腾讯云开发者手册：https://cloud.tencent.com/developer/devdocs
 

2. 日期操作插件 moment

安装：

npm install moment --save 
引用：在入口文件 main.js中导入并使用

import moment from 'moment'

Vue.prototype.$moment = moment;
使用：

      var stamp =Date.parse(new Date());
      var curtDate = new Date();
 
      //时间戳 转换成 时间格式
      var date_temp = new Date(stamp);

      //时间格式 转换成 时间戳
      var stamp_temp = this.$moment(curtDate).valueOf();

      //时间格式化
      var dateT = this.$moment(curtDate).format("YYYY-MM-DD HH:mm:ss");
View Code

 

3. 动态插入图片

<img :src="item.titleimagepath" />
 

数据路径

./static/businessImg/passbook.jpg
View Code

 

4. 视频播放组件

安装

cnpm install vue-video-player --save      
 

引用：在入口文件 main.js中导入并使用

import VideoPlayer from 'vue-video-player'  
import 'vue-video-player/src/custom-theme.css'
import 'vue-video-player/node_modules/video.js/dist/video-js.css'
 

使用：

 <video-player
      class="video-player vjs-custom-skin"
      ref="videoPlayer"
      :playsinline="true"
      :options="playerOptions"
    ></video-player>
 

 

复制代码
 playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "",
            src: "./static/upload/love/vdemo.mp4" //url地址
          }
        ],
        // poster: "../../static/images/test.jpg", // 你的封面地址
        // width: document.documentElement.clientWidth,
        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        }
      },
复制代码
 

格式支持

复制代码
   sources: [
        {
          // type: "video/webm", // ok,用ogg也可打开
          type: "video/ogg", // ok,用webm也可打开
          // type: "video/3gp", //ok
          // type: "video/mp4", // ok
          // type: "video/avi", //打不开
          // type: "video/flv", // 打不开
          // type: "video/mkv", // 打不开
          // type: "video/mov", // 打不开
          // type: "video/mpg", // 打不开
          // type: "video/swf", // 打不开
          // type: "video/ts", // 打不开
          // type: "video/wmv", // 打不开
          // type: "video/vob", // 没转化
          // type: "video/mxf", // 转化出错
          // type: "video/rm", // 转化出错
          src: "/static/video/Video_2018-05-15_105711.webm" //本地测试url地址
          // src: 'http://www.html5videoplayer.net/videos/madagascar3.mp4'//url地址
        }
      ]
复制代码
 

样式：

复制代码
.video-js {
  font-size: 5px;
  .vjs-big-play-button {
    /*
  播放按钮换成圆形
  */
    height: 2em;
    width: 2em;
    line-height: 2em;
    border-radius: 1em;
  }
}
复制代码
 

 

播放问题：

播放按钮与fastclick冲突

冲突是这样的：播放器在手机浏览器或者chrome开发者工具（手机尺寸）内，点击播放按钮，播放与暂停事件会被触发多次。

 

 

参考：https://www.zhangshengrong.com/p/zD1yQdLY1r/
View Code

 

5. plop-templates自动新建项目文件 

①在项目跟目录下创建plopfile.js，然后添加如图代码

const viewGenerator = require('./plop-templates/view/prompt')
const componentGenerator = require('./plop-templates/component/prompt')
 
module.exports = function(plop) {
  plop.setGenerator('view', viewGenerator)
  plop.setGenerator('component', componentGenerator)
}

 ②下载plop-template文件包，放到项目根目录，如上图


https://download.csdn.net/download/qq_42345108/12492672

③在package.json的script里面添加一项"new": "plop"

①在控制台输入

npm run new

他会问你创建view还是component，看个人选择，这里我选择view 
②输入新建文件的名称
③默认全选，根据提示按需选择
④回车就可以看到目录多了一个helloWorld，打开index.vue就可以看见完整的模板了

参考：https://blog.csdn.net/qq_42345108/article/details/106523223
View Code

 

6. ICON、SVG图标 

ICON：https://www.materialpalette.com/icons
SVG：
https://www.237y.com/svgicon.htm
https://ikonate.com/

 

7. proj4js坐标系转换 

    命令：cnpm install proj4 --save-dev  
    操作：复制proj4js安装包中的 node_modules\proj4\dist 到 public\libs中

 

8. animate动画插件 

cnpm install animate.css --save

 

9. obj2gltf插件 

地址：https://github.com/CesiumGS/obj2gltf

首先需要安装gltf转换工具

npm install --save-g obj2gltf

安装成功后，执行下列语句即可成功转换,-i表示输入文件，-o表示输出文件

obj2gltf -i model.obj -o model.gltf

  

10. Cesium :  
    命令：cnpm install cesium --save-dev  
    操作：复制cesium安装包中的 node_modules\cesium\Build\Cesium 到 public\libs中
 
11. iview :  
    cnpm install iview --save

12. Muse-UI :  
    cnpm install muse-ui --save

13. proj4js：
    命令：cnpm install proj4 --save-dev  
    操作：复制proj4js安装包中的 node_modules\proj4\dist 到 public\libs中

14. Material Icons 本地引用（museui使用）:  
    cnpm install material-design-icons-iconfont --save-dev

15. less:  
    cnpm install less less-loader --save-dev

16. moment(日期格式化):  
    cnpm install moment --save-dev
    参考：https://blog.csdn.net/fu983531588/article/details/89330929

17. animate动画  
    cnpm install animate.css --save

18. vue-circle-menu 菜单插件
    cnpm install vue-circle-menu --save

18. vue-video-player 视频播放器  
    cnpm install vue-video-player --save
 
19. videojs-contrib-hls 视频播放器  HLS直播  
    cnpm install --save videojs-contrib-hls

20. videojs-contrib-hls 视频播放器  RTMP直播  
    cnpm install --save videojs-flash

21. mqtt 消息队列遥测传输协议  
    cnpm install mqtt --save

22. xml文件解析  
    cnpm install x2js --save

23. 日期格式化  
    cnpm install moment --save

24. json格式化  
    cnpm install vue-json-viewer --save
    cnpm install vue-json-editor --save

25. 复制功能
    cnpm install clipboard --save

26. 兼容ie
    cnpm install babel-polyfill --save

 

27. 打包app后显示控制台 

 vue如何在app打包后看到控制台方便调试

在index.html 添加如下代码

<!DOCTYPE html>
<html>
<head>
</head>

<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

<!-- 控制台 -->
<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
<script>
  var vConsole = new VConsole({
    defaultPlugins: ['network'],
    disableLogScrolling: true
  });
  vConsole.pluginList.network.scrollToBottom = function () {
    if (!this.vConsole.option.disableLogScrolling) {
      var $box = vConsole.$.one('.vc-content');
      $box.scrollTop = $box.scrollHeight - $box.offsetHeight;
    }
  }

</script>
</html>
View Code

 

28. 文件下载  

　　当使用域名开头的地址时会弹出下载，使用IP开头的地址则会直接打开

    downloadFile(item, fileName) {
      debugger;
      let url = process.env.VUE_APP_SERVE_TOP + item;

      var x = new XMLHttpRequest();
      x.open("GET", url, true);
      x.responseType = "blob";
      x.onload = function (e) {
        //会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
        var url = window.URL.createObjectURL(x.response);
        var a = document.createElement("a");
        a.href = url;
        a.download = fileName;
        a.click();
      };
      x.send();
    },
    //下载附件
    fun_file_down(item) {
      const link = document.createElement('a');
      link.setAttribute('download', 'ccc');
      link.setAttribute('href', item.Url);
      Object.assign(link.style, {
        position: 'absolute',
        top: 0,
        opacity: 0,
      });
      document.body.appendChild(link);
      link.click();
      link.remove();
    },

 

 29. vxe-table 

　　vue表格 ，树型表格+懒加载+虚拟滚动+副选框+复杂表头，全面支持

　　 https://xuliangzhan_admin.gitee.io/vxe-table/#/table/start/install

　　https://github.com/x-extends/vxe-table

  

  
30. v-charts 

　　vue图表 https://v-charts.js.org/#/

 

31. 数据公式 图表显示

https://jsxgraph.org/wp/about/index.html


32. vue 在线画图

  https://blog.csdn.net/cuk5239/article/details/107697441

vue-webtopo-svgeditor：https://github.com/yaolunmao/vue-webtopo-svgeditor

G6-editor： https://github.com/blueju/vue-g6-editor

G6：http://antv.alipay.com/zh-cn/index.html

 

 

 

 

 

# 插件安装
# 组件库：cnpm i muse-ui -S
# axios网络访问: cnpm install axios --save
# 提示消息: cnpm install muse-ui-toast -S
# 监听手指滑动 cnpm install vue-touch@next --save
# Message弹窗 cnpm install -S muse-ui-message
# moment处理时间戳 cnpm install moment --save
# 键盘监听 cnpm install vue-awesome-mui --save
# 图片查看 cnpm install vue-photo-preview --save
# 视频插件 cnpm install vue-video-player --save      

其他插件

https://baijiahao.baidu.com/s?id=1629138670094636894&wfr=spider&for=pc

 https://www.vue365.cn/

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 

posted @ 2020-03-03 08:45  无心々菜  阅读(571)  评论(0)  编辑  收藏  举报