doc---vue-cli脚手架项目问题总结（16）——vue使用第三方插件库

最新推荐文章于 2023-08-30 18:43:13 发布

蓝色星辰0712

最新推荐文章于 2023-08-30 18:43:13 发布

阅读量541

点赞数

分类专栏：工作技术总结

本文链接：https://blog.csdn.net/qq_38185872/article/details/105534501

版权

本文总结了在Vue-cli项目中集成和使用第三方库的方法，包括UEditor富文本编辑器的引入，网页音效解决方案audiosprite与howler.js的结合，Echarts图表的使用，以及实现多语言功能的Vue-i18n配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

##、vue项目中引入三方js库粘贴板的方法
在这里插入图片描述

<script>
    import swiper from '../lib/swiper-3.4.0.jquery.min';
    export default {
   
        name:'focusimg',
        mounted:function(){
   
            this.$nextTick(function(){
   
                 /* 焦点图 */
                var mySwiper = new Swiper ('.swiper-container', {
   
                    direction: 'horizontal',
                    loop: true,

                    // 如果需要分页器
                    pagination: '.swiper-pagination',
                    
                    // 如果需要前进后退按钮
                    /* nextButton: '.swiper-button-next',
                    prevButton: '.swiper-button-prev',   */
                    grabCursor: true,
                    paginationClickable: true,
                    spaceBetween: 30,
                    centeredSlides: true,
                    autoplay: 2500
                });
            })
        }
    }
</script>
<style>
    @import '../css/swiper-3.4.0.min.css';
</style>

##、vue-cli中使用UEditor富文本编辑器
1、在 http://ueditor.baidu.com/website/download.html#ueditor 下UEditor 包。
在这里插入图片描述
2、解压之后放入脚手架的static文件下

3、修改 static下的UEditor文件夹中的 ueditor.config.js 文件，添加一行代码：

window.UEDITOR_HOME_URL = "./static/ueditorPhp-1.4.3.3/"

文件名是根据自己的static下面的文件名来写。
在这里插入图片描述
4、在main.js中引入UEditor

import '../static/ueditorPhp-1.4.3.3/ueditor.config.js'
import '../static/ueditorPhp-1.4.3.3/ueditor.all.min.js'
import '../static/ueditorPhp-1.4.3.3/lang/zh-cn/zh-cn.js'
import '../static/ueditorPhp-1.4.3.3/ueditor.parse.min.js'

在这里插入图片描述
5、开发一公共组件

<template>
	<div>
		<script id="editor" type="text/plain"></script>
	</div>
</template>
<script>
	export default {
   
		name: 'UE',
		data() {
   
			return {
   
				editor: null
			}
		},
		props: {
   
			defaultMsg: {
   
				type: String
			},
			config: {
   
				type: Object
			}
		},
		mounted() {
   
			const _this = this;
			this.editor = UE.getEditor('editor', this.config); // 初始化UE
			this.editor.addListener("ready", function() {
   
				_this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后，放入内容。
			});
		},
		methods: {
   
			getUEContent() {
    // 获取内容方法
				return this.editor.getContent()
			}
		},
		destroyed() {
   
			this.editor.destroy();
		}
	}
</script>
<style></style>

6、当我们需要使用富文本编辑器时，直接调用公共组件即可

<template>
	<div class="ueditor">
		<div class="info">UE编辑器示例<br>需要使用编辑器时，调用UE公共组件即可。可设置填充内容defaultMsg，配置信息config(宽度和高度等)，可调用组件中获取内容的方法。</div>
		<button @click="getUEContent()">获取内容</button>
		<div class="editor-container">
			<UE :defaultMsg='defaultMsg' :config="config" ref="ue"></UE>
		</div>
	</div>
</template>

<script>
	import UE from '@/components/_UEditor/editor.vue';
	export default {
   
		name:"ueditor",
		components: {
   UE},
		data(){
   
			return {
   
				defaultMsg: '这里是UE测试',
		        config: {
   
		          	initialFrameWidth: null,
		          	initialFrameHeight: 350
		        }
			}
		},
		methods: {
   
	      	getUEContent() {
       //获取富文本内容
	        	let content

最低0.47元/天解锁文章