前端框架VUE - 插件
VUE- 前端插件
1. 开发文档
2. 日期操作插件 moment
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
安装:
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");
3. 动态插入图片
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<img :src="item.titleimagepath" /> 数据路径 ./static/businessImg/passbook.jpg
4. 视频播放组件
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
安装 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/
5. plop-templates自动新建项目文件
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
①在项目跟目录下创建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
6. ICON、SVG图标
7. proj4js坐标系转换
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
27. 打包app后显示控制台
vue如何在app打包后看到控制台方便调试
在index.html 添加如下代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
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
其他插件
https://baijiahao.baidu.com/s?id=1629138670094636894&wfr=spider&for=pchttps://www.vue365.cn/