代码之家 › 专栏 › 技术社区 › Tutu Kaeen

在代码中应该将Vue.use()方法放在哪里?

vue.js

0

Tutu Kaeen · 技术社区 · 8 年前

我想为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
    }
  }
}

应用程序作者不再在公司工作,所以我无法向他询问代码。

2 回复 | 直到 8 年前

1

3

li x 8 年前

你能做的一件好事就是安装 the vue cli ,设置一个新的空白项目,并查看如何在标准vue cli应用程序中处理此问题(在 main.js 文件)。

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

但是,现在可能存在这样的情况:您的应用程序不是由vue cli生成的,或者没有标准 主.js 文件:这不一定是件坏事,因为VUE的目的是方便地插入到现有的jQuery网站或其他框架驱动的应用程序中。从你粘贴的代码来看,似乎就是这样。

如果是,您应该在项目中搜索 import Vue 和 new Vue 查找实例化Vue实例的文件。你应该打电话给 Vue.use() 在Vue导入之后 new Vue() 打电话来。

2

1

Imre_G 8 年前

我建议您不要导入库,而是执行以下操作:

<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>