是否将js库添加到Vue prototype？
将js库添加到Vue prototype是一种常见的做法，它可以使得该库在整个Vue应用中可用，并且可以通过this关键字在组件中直接访问。
添加js库到Vue prototype的步骤如下：
- 在Vue项目中安装所需的js库，可以使用npm或者yarn进行安装。
- 在main.js（或者其他入口文件）中引入该库，并将其添加到Vue的原型中。例如，如果要添加lodash库，可以按照以下方式进行：
- 在main.js（或者其他入口文件）中引入该库，并将其添加到Vue的原型中。例如，如果要添加lodash库，可以按照以下方式进行：
- 现在，该库就可以在Vue组件中使用了。例如，在组件的方法中可以直接使用this.$lodash进行调用。
这种做法的优势是可以在整个应用中共享该库，避免了在每个组件中都引入和初始化该库的重复工作。同时，通过将库添加到Vue的原型中，可以更方便地在组件中使用该库的方法和功能。
这种做法适用于那些在整个应用中都需要使用的库，例如常用的工具库、日期处理库、数据处理库等。但对于只在少数几个组件中需要使用的库，可以考虑在组件内部直接引入和使用，以避免全局污染和性能损耗。
腾讯云相关产品中，与Vue相关的产品包括云开发（https://cloud.tencent.com/product/tcb）和Serverless Framework（https://cloud.tencent.com/product/sls），它们可以帮助开发者更便捷地构建和部署Vue应用。
相关·内容
我正在使用$vs.notify来显示来自数据库的消息。所以我想在actions.js中使用它。但是作为TypeError: Cannot read property 'notify' of undefined得到了错误。有没有什么方法可以在action.js文件中使用它。使用的代码如下：
addTag({
commit
}, tag) {
return new Promise((resolve, reject) => {
Vue.prototype.$http.post('/tags/add/', {
浏览 5提问于2021-02-22得票数 1
我无法将第三方js库连接到vue.js组件
main.js
...
require('jquery')
import Vue from 'vue'
import VueMdl from 'vue-mdl'
import App from './App'
import Auth from './views/user/Auth'
import Index from './views/Index'
import VueRouter from 'vue-router'
import VueR
浏览 3提问于2017-01-11得票数 1
1回答
我正在学习。我有一个插件，看起来是这样的：
source/myPlugin.js
const MyPlugin = {
install: function(Vue, options) {
console.log('installing my plugin');
Vue.myMethod = function() {
};
}
}
我试着用jest测试这个插件。不过，我对Jest还没定下来。不过，此时，我的test/myPlugin.test.js文件中仍然有以下内容：
test/myPlugin.test.js
const Vue = requ
浏览 3提问于2017-07-13得票数 4
回答已采纳
2回答
我正在构建我的第一个Vue.js应用程序，试图在vuexfire中使用vuex。
//main.js
import firebase from 'firebase';
...
Vue.prototype.$firebase = firebase.initializeApp(config);
...
firebase.auth().onAuthStateChanged(() => {
/* eslint-disable no-new */
new Vue({
el: '#app',
store,
router,
浏览 2提问于2018-04-26得票数 1
这是Vue.js问题，通常我试图在scrollMonitor实例中使用'scrollMonitor‘函数(通过main.js导入)，但它给了我一个典型的'this.scrollMonitor不是函数’错误。
mounted () {
let watcher = this.$scrollMonitor(this.$refs.nicer)
}
在main.js ScrollMonitor库中，似乎正确导入了(控制台显示了预期的内容)：
import scrollMonitor from 'scrollmonitor'
Vue.use(scrollMonito
浏览 4提问于2017-05-21得票数 1
回答已采纳
我有一个NUXTJS (v2.9.2) web应用程序，它在IE11和Edge中运行时存在呈现问题。该应用程序在Chrome、Safari和FireFox中工作。我已经追踪到在一个参考的第三方npm包(vue-mapbox)中的一个推广运营者。
我读过一些引用这个问题的文章，在大多数情况下，修复方法是在nuxt.config.js文件中的build > transpile选项中包含引用的第三方库。
build: {
transpile: [
({ isLegacy }) => isLegacy && "vue-mapbox"
浏览 1提问于2019-12-19得票数 2
1回答
我对Vue.js还比较陌生，但现在我坚持了一个可能很愚蠢的简单问题。
我有两个文件，一个用于路线，一个用于插件。
auth.js
export default {
install: (Vue, options) => {
Vue.prototype.$auth = {
login: (email, password) => {
...
}
};
}
};
和router.js
import Vue from 'vue'
import R
浏览 0提问于2018-03-02得票数 1
回答已采纳
1回答
我的工作是vueify和browserify。我在我的main.js文件中创建了一个对象
var store = {
foo: 'bar'
};
var vm = new Vue({
el: '#app',
data(){
return {
foo: store
};
},
components: {
Login,
Registration,
ClassifiedList,
BusinessRegistration,
BusinessUpdate,
UserRegistratio
浏览 2提问于2016-06-08得票数 3
1回答
我刚刚开始使用Vuejs，我正在尝试集成第三方的API客户端JS库。Vue应用程序使用vue-router。第三方应用编程接口客户端构建在axios上。
API客户端JS如下所示：
function RestClient() {}
RestClient.prototype.getUsers = getUsers;
async function getUsers() {
try {
const response = await axios.get('https://reqres.in/api/users');
console.log(response.da
浏览 0提问于2018-07-05得票数 0
3回答
我在Vue.js有一张用Vue-good桌子做的桌子.
我需要找到一种可以调整大小的方法。就像这样。
不幸的是，据我所知，Vue-好桌子没有这个选择。
我用JQuery进行了测试，但我不想将Jquery和Vue混合起来，我也不知道Jquery中的库是否与这个组件一起工作。我做了测试，但没有找到。
在Javascript/css或Vue中还有另一种方法可以实现吗？
<vue-good-table
@on-select-all="'selectAll'"
:columns="columns"
浏览 0提问于2018-10-11得票数 8
回答已采纳
1回答
我对组件使用vue.js有了新的认识，这是一个需要使用NPM的库。
到目前为止，我使用bundle.js将我的核心代码与.vue文件一起编译成一个bundle.js文件。它与我的组件一起工作，但是当添加类似Axios的东西时，它找不到库。
所以我做了NPM install axios --save-dev，给我买了图书馆。
然后我的vueCore.js文件
var $ = require("jquery")
var Vue = require('vue')
var axios = requi
浏览 0提问于2017-01-04得票数 1
回答已采纳
我有一个名为Constant.js的js文件，它包含所有API名称。
//Constant.js
export default {
api1: 'api1',
api2: 'api2',
...
...
...
}
如何使用该文件而不导入我的应用程序中的每个Vue组件？
浏览 5提问于2021-07-08得票数 1
回答已采纳
我是Vue.js的新手，我试图创建一个使用jQuery 插件的自定义组件。当我将组件文件包含在另一个组件中时，我将得到一个错误：
Uncaught :在/resources/js/form-builder.min.js中没有定义jQuery
我创建了一个名为formBuilder.vue的自定义组件。以下是组件代码：
<template>
<div class="content">
<formBuilder/>
</div>
</template>
<script>
/
浏览 1提问于2020-03-09得票数 3
回答已采纳
我创建了一个定制的Vue js插件来存储全局变量，如下所示：
Constants.js文件：
import Vue from 'vue'
export default {
install(Vue){
Vue.Constants = {
VERSION: '1.0.1'
}
}
}
这是我的main.js文件：
import Vue from 'vue';
import App from './App';
import Constants from '
浏览 1提问于2020-08-04得票数 0
回答已采纳
2回答
在我的@vue/cli 4.0.5应用程序中，我试图在运行npm i lodash之后导入目录库
当我试图调用isEmpty方法时，我得到了以下错误：
Property or method "isEmpty" is not defined on the instance but referenced during render.
下面是我如何在vue文件中导入它：
<template>
<article class="event_item_container">
<span v-if="!isEmp
浏览 3提问于2019-12-19得票数 2
回答已采纳
对于我正在为移动开发的一个琐碎的应用程序，我使用Nativescript-Vue来开发。该应用程序运行良好，在xcode iOS模拟器中运行时没有错误。然而，当我尝试运行预览(使用终端命令：'tns preview')时，应用程序运行，但当我尝试启动游戏时，应用程序抛出一个错误：
CONSOLE ERROR file:///app/tns_modules/nativescript-vue/dist/index.js:2129:20: [Vue warn]: Error in render: "TypeError: undefined is not an object (
浏览 11提问于2020-02-04得票数 0
我尝试使用VueJS中的Vuex商店连接signalR，但当连接订阅时，我收到一个错误 我将存储库分解为几个文件 存储index.js import Vue from 'vue'
import Vuex from 'vuex'
import SignalR from './modules/signalR'
Vue.use(Vuex)
const store = () =>
new Vuex.Store({
modules: {
signalR: SignalR
}
});
export def
浏览 121提问于2019-05-11得票数 0
2回答
我使用keycloak-js来验证我的vue.js (取自：https://www.keycloak.org/securing-apps/vue)，这是我的main.js import { store } from "./store/store";
let keycloak = Keycloak(initOptions);
keycloak.init({ onLoad: initOptions.onLoad }).then((auth) => {
if (!auth) {
window.location.reload();
} else {
浏览 26提问于2020-12-20得票数 1
回答已采纳
1回答
我几乎没有全局函数，我在main.js中定义如下：
Vue.prototype._isMobile = function () {
return $(window).width() < 768
}
//Few more such things
我想移到其他一些文件，比如util.js：
return (function () {
import Vue from 'vue'
Vue.prototype._isMobile = function () {
return $(window).width() < 768
}
})();
并在main.
浏览 4提问于2017-03-02得票数 1
回答已采纳
是一个有用的方法，在构建和执行所有东西时都工作得很好。但是，所有Jest-Jest都会失败，并显示以下错误：
TypeError: replaceAll is not a function
以下是我的依赖项：
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-class-component": "^7.2.3",
"vue-i18n": "^8.22.0",
浏览 1提问于2020-12-15得票数 28
回答已采纳
我有一个名为Helper.js的文件，其中包含使用某些库的函数。现在我有了一个TestComponent.vue文件，并且想要使用这个助手函数。如何注入此功能？
我尝试在Components块中直接使用Helper.js中使用的库，但似乎vue在包含任何库之前就已经运行了，而不管index.html标记的顺序如何。
如何使用.js文件或其他库
浏览 3提问于2017-06-10得票数 3
1回答
我很尴尬，因为我不知道为什么我的库不能工作。 注意:我是Vue.js的初学者 我安装了一个名为"Bluetooth Serial“的库，我想在一个组件中使用它，但经过多次尝试，它仍然不能工作 我在我的入口点main.js import BluetoothSerial from "@ionic-native/bluetooth-serial/ngx";
Object.defineProperty(Vue.prototype, '$bluetoothSerial', { value: BluetoothSerial }); 在我的组件中： <scri
浏览 7提问于2019-10-09得票数 0
回答已采纳
嘿，伙计们，将Vue插件(使用表单vue.use()的UI元素)添加到代码库的首选方法是什么？
根据文档( )，我将以下代码添加到/src/themes/defaultx/plugins/index.js中
import Vue from 'vue'
import Toasted from 'vue-toasted'
Vue.use(Toasted)
但它没有注册我的插件，并且在尝试使用它时抛出未定义的异常。
我尝试将Vue.use()放在Vue.use(processbar)所在的主题/index.js中，但将它放在那里(或其他任何导入Vue的地方)开始抛出
浏览 3提问于2019-02-14得票数 0
我想将Firebase集成到我的Vue.JS应用程序中。
我想知道如何将引用放到Firebase。
浏览 2提问于2017-06-04得票数 15
1回答
对于Laravel 5，我相对比较满意，但是当涉及到Vue.js时，我感到相当沮丧，我在想，是否可以调用Laravel的方法，这些方法可以从Vue.js组件中的刀片中获得。
例如，我想为我的导航条制作一个Vue.js组件，如下所示：
<template>
<nav class="navbar navbar-expand-sm navbar-dark bg-info mb-2">
<div class="container">
<a href="{{ route(&#
浏览 1提问于2018-11-08得票数 2
为什么我不能在App.vue中调用我的方法？应用程序中难道没有div id=' App‘引用，这样就可以调用其中的方法了吗？
Main.js
new Vue({
render: h => h(App),
methods:{
gesamt:function () {
return 'Hello';
}
}
}).$mount('#app')
App.vue
<template>
<div id="app">
<p>{{gesamt()
浏览 2提问于2019-10-23得票数 0
1回答
我正在尝试编写一个带有自定义选项的vue插件。我遵循了官方的vue指南()，但找不到一种定义自定义选项的方法。这些选项应该由正常的javascript读取，然后导出一个vue组件使用的对象。
我的文件夹结构是这样的：
/src
factory.js
CustomComponent.vue
factory.js
import Vue from "vue";
import ImgixClient from "imgix-core-js";
var imgixClient = new ImgixClient({
domain: CUSTOM_O
浏览 9提问于2019-11-07得票数 0
回答已采纳
2回答
我试着安装插件，但什么也没发生。安装方法称为.
它只是插件中的示例函数。
nuxt.config.js：
...
export default {
...
plugins: [ '~/plugins/myplugin' ],
...
}
...
myplugin文件：
import Vue from 'vue';
Vue.use({
install(Vue) {
Vue.prototype.$a = (...data) => { console.log(...data); };
}
});
浏览 3提问于2020-10-22得票数 0
回答已采纳
2回答
我正在学习Vue.js。
我有一个运行良好的代码：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App).use(store).use(router)
app.mount('#app')
现在我想添加一些导入，例如'axios‘。此代码不运行：
import { crea
浏览 0提问于2020-11-20得票数 4
回答已采纳
我使用的是Matomo的Vue插件，可以在这里找到：https://github.com/AmazingDreams/vue-matomo 我在我的main.js入口文件中导入了VueMatomo插件，如下所示： import VueMatomo from 'vue-matomo'; 然后，我在main.js文件中将VueMatomo指定为全局方法，如下所示： Vue.use(VueMatomo, {
// Configure your matomo server and site
host: 'https://matomo.example.com',
浏览 37提问于2019-05-01得票数 2
我希望创建全局方法来使用翻译消息
但是，当我调用使用vue胡子的方法时，出现了如下错误：
Property or method "trans" is not defined on the instance but referenced during render.
Make sure that this property is reactive.
这里我的laravel app.js代码：
require('./bootstrap');
window.Vue = require('vue');
Vue.component('dashb
浏览 3提问于2020-06-10得票数 1
回答已采纳
实例/index.js--我想知道_init函数没有定义，如何使用它？
function Vue (options) {
if (process.env.NODE_ENV !== 'production' &&
!(this instanceof Vue)
) {
warn('Vue is a constructor and should be called with the `new` keyword')
}
this._init(options) // this line
}
initMixin(V
浏览 1提问于2019-05-03得票数 2
我在边缘区工作遇到了很大的困难。我尝试过用各种尝试来跟踪文档，但都不起作用。具体而言，似乎是promise.finally不起作用。这种情况发生在vuex模块中，所以我尝试在vue.config中将vuex添加到transpileDependencies中，但没有结果。
我的babel.config.js：
module.exports = {
presets: [['@vue/cli-plugin-babel/preset', {
useBuiltIns: 'entry',
}]],
};
在我的main.js中，顶部有以下两个导入：
浏览 6提问于2020-01-28得票数 15
1回答
我们使用vuejs，typescript，vuex和jest。我们目前正在使用test-utils来模拟商店。
但我找不到如何模拟对此的调用.$parent.$on
这是我们的一个组件(非常简单)：
AnalysisList.ts：
import Component from 'vue-class-component'
import {Getter} from 'vuex-class'
import {UserVO} from '@/valueObjects/UserVO'
import {Vue} from 'vue-property-
浏览 4提问于2018-07-25得票数 0
我有几个函数要放在Vue .prototype中，但是我不想扰乱主.js，我尝试像这样移植原型
//main.js
import "./vue-extensions/prototypes";
//prototypes.js
import Vue from "vue";
export default new Vue.prototype({
$appName = "myName",
});
但是，使用此方法，我在./src/vue-extensions/prototypes.js es.js中出现了一个错误错误，无法编译1错误
浏览 3提问于2021-05-15得票数 3
回答已采纳
1回答
我试图在Vuejs组件中使用，它是我通过npm安装的。得到了一个错误：
TypeError: videojs is not a function
at VueComponent.mounted (VR.vue?d2da:23)
at callHook (vue.esm.js?65d7:2701)
at Object.insert (vue.esm.js?65d7:3588)
at invokeInsertHook (vue.esm.js?65d7:5541)
at VueComponent.patch [as __patch__] (vue.esm.js?65d7:5744)
at VueCo
浏览 6提问于2017-10-12得票数 0
回答已采纳
1回答
我开发了一个插件来集中HTTP调用，并需要从组件中的导入模块访问它的函数($api)。以下内容运行良好：插件 (http-transport.js)
export default {
install: function (Vue) { ...
Vue.prototype.$api = (...)
main.js
import HTTPTransport from './http-transport/http-transport'
Vue.use (HTTPTransport);
来自任何component.vue的使用
methods: {
someM
浏览 1提问于2020-10-06得票数 1
我试图在vue方法中通过axios的post传递数据，并得到错误：
"signinVue.js:60 Uncaught :无法读取未定义的属性'post‘“
Vue脚本：
new Vue({
el:'#app',
data:{
email:'',
code:'',
},
methods:{
signin:function(){
console.log(this.email + ' ' + this.acc
浏览 0提问于2018-04-22得票数 2
回答已采纳
我正在尝试为我的Vue项目设置一些基本的cookie，但在尝试设置cookie时遇到标题错误。根据我的package.json文件，我使用的是vue-cookies版本^1.7.4。当我单击按钮制作cookie时，完整的错误消息如下：
ncaught TypeError: Cannot read property 'set' of undefined
at Proxy.setCookie (VM6493 Register.vue:45)
at Object.onClick._cache.<computed>._cache.<computed
浏览 9提问于2021-05-06得票数 0
我正在尝试构建一个基本的DataComponent，它将包含处理基本CRUD实体的许多其他组件所需的通用功能。
到目前为止我已经
//main.js
import Vue from 'vue';
new Vue({
el:'#app',
components:{
DataComponent,
Quotation
}
});
//data-component.js
import Vue from 'vue';
export
default Vue.extend({
data() {
浏览 1提问于2016-06-28得票数 35
回答已采纳
我在main.js的Vue项目中定义了一个全局原型，如下所示
//main.js
import axios from 'axios';
import Vue from 'vue';
Vue.prototype.$http=axios.create({
baseURL: 'https://example.com/api/'
});
各种vue组件直接调用this.$http.get或this.$http.post来执行请求。我如何在Jest中测试这些组件，显然是使用mock我可以执行的mock
jest.mock('axios&
浏览 49提问于2020-05-26得票数 1
1回答
我试图在我的vuejs应用程序中创建一个插件来管理Oauth2令牌数据。
我在网上提供的一些教程中创建了这个插件。
var plugin = {}
plugin.install = function (Vue, options) {
var authStorage = {
getToken () {
let token = localStorage.getItem('access_token')
let expiration = localStorage.getItem('expiration')
if (!
浏览 1提问于2017-11-19得票数 2
回答已采纳
我一直在互联网上寻找解决方案，但都没有成功。有人知道我做错了什么吗？ 我尝试导入index.js： import Vue from 'vue'
import Vuex from 'vuex'
import Axios from '../boot/axios'
import axios from 'axios'
import VueRouter from 'vue-router'
Vue.use(axios)
Vue.use(VueRouter)
Vue.use(Axios)
axios.js:
import a
浏览 24提问于2019-06-11得票数 0
目前，我使用Vue.js和Vuetify编写了一个金融应用程序。我有一些组件文件和javascript文件，如
Dashboard.vue
Cashflow.vue
NetWorth.vue
stores.js <- Vue Vuex
我有一些需要跨所有Vue.js和javascript文件使用的函数。我是否可以编写一个可以跨所有组件和js文件使用的函数库？
function moneyFormat(num)
function IRRCalc(Cashflow)
function TimeValueMoneyCalc(I,N,PV,FV,PMT)
function PerpetualAn
浏览 6提问于2020-05-20得票数 1
回答已采纳
我刚刚尝试在Laravel的axios和最新Vue的帮助下编写一个SPA。我通过npm安装了所有需要的东西，但是我得到了标题中提到的错误。 app.js:19782 Uncaught TypeError: Cannot set property 'axios' of undefined 我检查了我的组件app.js和bootstrap.js，但对我来说一切都很正常。我甚至在网上寻找解决方案，遗憾的是他们没有帮助。 我的dev服务器在后台运行，所以应该有一个工作的连接(artisan server )。 app.js require('./bootstrap')
浏览 23提问于2020-10-12得票数 2
我从一年前就开始使用Vue.js，现在我已经开始使用角，我习惯于在所有组件之间与Vue.prototype共享一个对象实例，所以我不需要在每个组件中调用它。
例如：叫这个。烤面包。
我不知道在角度上是否有类似的东西。
我用的是角8。
我阅读了关于单例服务的指南，但是它一直将实例传递给我需要它的组件的构造函数( )。
浏览 0提问于2019-06-15得票数 1
回答已采纳
我编写了一个Vue.js插件，用于全局访问Vue函数：
const MyPlugin = {
install (Vue, options) {
Vue.myFunction = function () {
console.log('Test')
}
}
}
export default { MyPlugin }
并将其包含在main.js文件中：
import MyPlugin from './plugins/my-plugin.js'
Vue.use(MyPlugin)
但是，当我尝试从这样的Vue组件调用myFu
浏览 0提问于2019-02-11得票数 2
回答已采纳
我目前在尝试使用webpack.ProvidePlugin时得到了这个，但似乎加载不正确。这是我的environment.js
var webpack = require("webpack");
const { environment } = require("@rails/webpacker");
const vueLoader = require("./loaders/vue");
environment.loaders.append("vue", vueLoader);
environment.plugins.appe
浏览 0提问于2018-04-02得票数 8
我刚开始使用vue-cli ，这是webpack的模板，我想使用firebase作为vueapp的数据库，我这样做是为了将Firebase导入到我的应用程序中。
main.js
//imported rest all required packages just dint mention here
import * as firebase from 'firebase'
let config = {
apiKey: " - XXXXXXXXCXCC",
authDomain: "XXXXXXXXX",
databaseURL: "XXX
浏览 7提问于2017-03-11得票数 0
回答已采纳
我正在与一个中型项目使用Vuejs作为前端。我正在探索的封装/分离通用方法的选项可以在许多组件中使用，包括mixins方法和插件方法。
Mixin逼近
我必须在每个组件(文件)中编写一个导入语句，在其中我想要使用mixin方法。这是否增加了最终文件大小，因为混合文件将在多个地方导入？我可以在mixin方法中使用this。
插件方法
我可以用Vue.use(MyPlugin)全局安装插件，并在任何组件中使用插件，而无需在每个组件中导入插件。
缺点:我无法在插件方法中使用this[field]。我必须传递调用组件vm的实例才能使用这些方法。
编辑1-包括扩展方法
扩展方法
我可以在多个其他组件中使
浏览 3提问于2016-07-04得票数 9
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
