我应该把Vue.use()方法放在代码中的什么位置

Question

我想为vue使用一个插件，在文档中它说我必须放入代码

import ReadMore from 'vue-read-more';
Vue.use(ReadMore);

我把import放在其他import附近没有问题，但我应该把Vue.use放在哪里？

这是我的代码结构：

import TextBox from '../TextBox.vue'
import $ from 'jquery'
export default{
ready: function () {
//stuff
},
data () {
return {
name: '',
email: ''
}
},
components: {
TextBox
},
methods: {
sendContact: function (e) {
//stuff
}
}
}

应用程序作者已经不在公司工作了，所以我无法向他询问代码的情况。

Answer 1

了解这方面的一件好事是安装vue-cli，设置一个新的空白项目，并查看如何在标准vue-cli应用程序中处理此问题(在main.js文件中完成(。

在您自己的应用程序中，如果它是由vue-cli生成的(或者至少它遵循一些标准(，那么main.js很可能会导入vue，创建一个新的vue实例，并将其装载在某个标记中(通常是#app(。

然而，现在可能存在这样的情况：您的应用程序不是由vue-cli生成的，或者没有标准的main.js文件：这不一定是坏事，因为vue旨在轻松插入现有的jQuery网站或其他框架驱动的应用程序。从您粘贴的代码来看，情况似乎就是这样。

如果是这样，您应该在项目中搜索import Vue和new Vue，以找到实例化Vue实例的文件。然后，您应该在导入Vue之后、任何new Vue()调用之前立即调用Vue.use()。

Answer 2

我建议您不要导入库，而是实现以下功能：

<template>
<p>
<span>This is the first text</span><span v-show = "readMore">This is the read more text</span>
<a v-show = "!readMore" @click = "readMore=true">Read More</a>
<a  v-show = "readMore" @click = "readMore=false">Read Less</a>
</p>
</template>

<script>
import TextBox from '../TextBox.vue'
import $ from 'jquery'
export default{
ready: function () {
//stuff
},
data () {
return {
readMore: false,
name: '',
email: ''
}
},
components: {
TextBox
},
methods: {
sendContact: function (e) {
//stuff
}
}
}
</script>