如何在vue.js项目的main.js文件中导入一个js类，并在所有组件中使用它，而不是在每个组件中导入？
在Vue.js项目的main.js文件中导入一个js类，并在所有组件中使用它，可以通过以下步骤实现：
- 首先，在项目的src目录下创建一个名为utils（或其他你喜欢的名称）的文件夹，用于存放工具类文件。
- 在utils文件夹中创建一个名为YourClass.js的文件，用于定义你的js类。在该文件中，可以按照你的需求编写类的代码。
- 在main.js文件中，使用import语句导入YourClass.js文件，并将该类挂载到Vue的原型上，以便在所有组件中使用。代码示例如下：
import YourClass from './utils/YourClass.js';
Vue.prototype.$yourClass = YourClass;- 现在，你可以在任何组件中通过this.$yourClass来访问和使用YourClass类的方法和属性了。
注意事项：
- 确保YourClass.js文件的路径和文件名正确。
- 在使用该类之前，确保已经安装了Vue.js和相关依赖。
- 如果你的类需要依赖其他库或模块，确保在导入YourClass.js文件之前先导入这些依赖。
这样，你就可以在Vue.js项目的所有组件中使用该js类，而不需要在每个组件中单独导入。
相关·内容
我是JavaScript和Vue.js的完全初学者。昨天，我用vue-cli启动了一个Vue.js项目，因为我的工作需要它，我遇到了一些问题。我想安装“漂亮-复选框-vue”，它目前在我的'node_module‘文件夹。
在这个包的README.md of 中，它说：
浏览器
包含脚本文件，然后用Vue.use(PrettyCheckbox)安装组件；例如：
<script type="text/javascript" src="node_modules/pretty-checkbox-vue/dist/pretty-checkbox-vue.min.j
浏览 0提问于2020-09-30得票数 0
亲爱的堆栈溢出/ Vue.js /汇总社区
对于使用Vue和Rollup的主插件开发人员来说，这可能是一个菜鸟问题。我会非常明确地写这个问题，希望它能帮助像我这样的其他国家在未来。
我有一个简单的插件，可以帮助表单验证。这个插件中的一个组件导入Vue，以便以编程方式创建组件并在挂载上附加到DOM，如下所示：
import Vue from 'vue'
import Notification from './Notification.vue' /* a very simple Vue component */
...
mounted() {
const Not
浏览 1提问于2020-03-06得票数 1
回答已采纳
我花了很多时间研究这件事，但没有结果。我知道在Webpack中，代码分割和动态绑定是如何使用import承诺API的。
但是，我的用例是，我有两个完全独立的包，分别使用不同的webpack构建来生成。为了给您提供透视图，我正在构建React组件，并且需要将react组件动态加载到已在不同过程中编译的页面中。这有可能有反应吗？我确实控制了webpack的两个构建，所以我可以排除依赖，等等。
更新：--我刚刚介绍了Vue.js，以及它如何允许开发人员注册Vue.js组件，然后在代码中引用它们。我可能会在页面脚本之前加载我的Vue.js组件脚本。我想看看我能不能做出类似的反应。
浏览 1提问于2017-02-24得票数 11
回答已采纳
我有一个Vue.js项目，我想在其中使用一个实用程序类来实现我想在所有模块中使用的功能。
模块/Utils.js
export default class Utils {
array_count (arr) {
return Array.isArray(arr) ? arr.length : 0;
}
}
main.js
import Vue from 'vue';
import Utils from 'modules/Utils';
export default new Vue({
el: '#app',
浏览 3提问于2018-07-30得票数 0
我在我的应用程序中添加了一个主要的vue应用程序。我想在应用程序中添加一个组件。 正在尝试将TopMenu.vue添加到App.vue： App.vue中的<top-menu></top-menu>。 已在main.js中为应用程序注册。我是否正确地使用了单个文件组件？ main.js import Vue from 'vue'
import App from './components/App'
import TopMenu from './components/TopMenu'
Vue({
el: '#
浏览 27提问于2019-02-08得票数 0
回答已采纳
这是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
回答已采纳
我正在用Vue.js 2构建我的第一个应用程序，但是找不到错误。
我使用的是完整构建(webpack.config.js)：
resolve: {
alias: {
'vue$': 'vue/dist/vue.js',
"vueRouter$": "vue-router/dist/vue-router.js"
},
extensions: ['*', '.js', '.vue',
浏览 2提问于2018-01-15得票数 2
回答已采纳
1回答
我在全局app.js中声明了一个事件总线，如下所示：
window.Event = new Vue();
组件看起来就像
export default {
data() {
return {
hasError: false,
zip: '',
};
},
methods: {
setZip: function() {
this.hasError = false;
this.$emit('setZip&#
浏览 4提问于2017-05-10得票数 7
回答已采纳
我已经编写了一些JS类，我希望将它们导入到我的vue.js项目的app.js/main.js文件中，以便我可以在组件中实例化它们。现在，我必须在我需要单独类的所有组件中导入相同的JS类。 我在main.js文件中尝试了导入，但组件无法识别它。 在main.js文件中，我按如下方式导入 import Permissions from './Permissions' 但是，当我想在组件中实例化Permissions类时，比如 data() { permissions: new Permission({ some object properties... }) } 该组件不知道
浏览 58提问于2019-04-20得票数 1
回答已采纳
4回答
火基未定义Vue.js
、、、
我是vue.js的新手，我正在从网上的文档和教程中学习vue.js，现在我正在尝试用Firebase和vue.js制作应用程序，但是当我运行它时，一个错误写道：
-firebase未定义
不过，我很肯定是我进口的。这里我的代码：
main.js:
import Vue from 'vue'
import App from './App'
import router from './router'
import * as firebase from "firebase"
var config = {
apiKey: "#
浏览 4提问于2018-04-09得票数 3
回答已采纳
我有一个js脚本，它的语法与没有vue.js的脚本几乎相同，尽管我没有包含分号(我不确定这会有什么帮助，但不管怎样，还是把它放进去了)。
我很好奇是否应该将此脚本转换为一个对象的格式，并将多个方法和数据/变量作为该对象的属性，类似于它在vue.js页面底部的编写方式。
我对vue是全新的，但对JavaScript来说不是。
如果我有一个名为myscript.js的脚本，并且我想将这个文件、它的函数和变量包含在一个.vue文件中(不是在main.js文件中，因为我不希望它加载到每个页面上，只加载到我正在使用的页面上)，那么我到底应该如何将它包含在文件中呢？
我非常清楚这是多么模糊，我非常乐意详细
浏览 37提问于2019-07-11得票数 2
2回答
我有一个Vue.JS应用程序。我是用webpack创建的。在构建应用程序后，我得到了较大的main.js大小。(9 Mb)。
我有任何包裹。但在创建空应用程序后，我也获得了很大的main.js大小。我该如何解决这个问题？
浏览 2提问于2019-08-12得票数 2
我正在学习Vue.js 2.6。下面是我的基本目录：
我需要我的主页和博客共享相同的页眉和页脚，所以我在home.vue和blogs.vue中分别导入了页眉和页脚组件，但当我单击导航栏中的链接时，它无法顺利切换页面。我能做些什么来让它变得顺畅？
为了制作这个项目，我求助于互联网上的一些案例，在那之后，当我看到它的路由器文件结构时，我感到困惑：
看起来我把它写成了一个MPA，但是为什么路由器目录中需要index.js呢？
我的home.js如下：
import Vue from 'vue'
import Home from './home.vue
浏览 2提问于2021-01-25得票数 0
我用vue.js做了一个简单的博客来练习vue.js。我已经安装了一个路由器，现在它不想在本地主机上显示任何东西。我使用目录视图来显示文件，组件现在是空的。路由器是一个带有文件index.js的自己的目录，我在其中连接路由器。(我没有把样式包括在这条消息中)
这里是控制台中的错误：
app.js:378 Uncaught TypeError: Cannot read properties of undefined (reading 'use')
at eval (index.js?5aa4:6:1)
at ./src/router/ind
浏览 10提问于2022-11-04得票数 0
回答已采纳
2回答
我尝试使用jspm与vue.js一起构建简单的应用程序。
这是我的html文件：
<html>
<head>
<script src="bundle.js"></script>
<!--script src="jspm_packages/npm/vue@2.1.10/dist/vue.min.js"></script-->
</head>
<body>
<div id="app"
浏览 1提问于2017-02-08得票数 8
回答已采纳
我刚刚开始使用Vue.js + Webpack +vue-加载程序+引导-sass+sass-加载程序，我有点迷路了。
我想做的是在我的SPA Vue.js代码中使用SASS版本的引导程序。我想这样做，所以我的引导自定义可以使用SASS完成。以下是我所做的：
用vue-cli创建了一个新的Vue.js + webpack项目。
安装了引导程序-sass和sass-加载程序。
在build/webPack.base.conjs中添加了以下内容：
{ test: /..scss$/，加载程序：'style'，'css'，'sass‘}，{ tes
浏览 4提问于2016-02-10得票数 14
我是Vue.js新手，我想用它制作一个的SDK。我可以制作一个这样的web组件：
main.js:
import Vue from 'vue';
import App from './App.vue';
import wrap from '@vue/web-component-wrapper';
const customElement = wrap(Vue, App);
window.customElements.define('sky-chat', customElement);
Cli命令：
vue build --tar
浏览 5提问于2020-04-05得票数 4
1回答
我开始在vue.js中创建一个基于这个项目的项目：
当试图集成TableList.vue组件时，我会得到一个错误：
Unknown custom element: <material-card> - did you register the component correctly?
Vue.js项目是使用webstorm创建的。我复制了styles文件夹并使观察者能够将scss文件编译成css。我使用npm serve命令在WebStorm中运行项目。
我的App.vue看起来有点不同：
<template>
<v-app>
<TheBar
浏览 0提问于2019-11-08得票数 0
回答已采纳
1回答
我的问题与webpack有关。假设我使用webpack和vue.js项目。webpack是如何建设这个项目的，当我运行npm运行建设的时候。我知道这里有一个构建文件夹，其中必须添加配置文件，还有输出文件夹dist，这将保存我的最终项目。
问题1) WHat webpack做什么？它是否在配置文件中搜索入口点，以便知道从哪里开始构建进程？对于vue.js，它是src/main.js。我说的对吗？
QUestion 2)当它找到main.js时，它会做什么？它是否从main.js到顶部，以便找到所有的依赖项？
QUestion 3)假设IT找到了一个.vue文件。是干什么的呢？它是否分离js代码-
浏览 1提问于2018-09-03得票数 1
回答已采纳
1回答
我有一个Vue.js应用程序，在/callback路径上，我试图让它做一些事情。到目前为止，我没有任何运气，因为我看到事情运行异步。我知道这通常是Vue/Javascript的工作方式，但是我试图强迫它不是异步的。
我遇到的主要问题是，有时在设置项目之前，this.$store...正在运行。这是一个问题，因为事情如何运行的其他Vuex行动。主要是，getCompany 1要求loadToken 1完成，因为它正在从上面设置的本地存储中提取值。
我不想改变这一点和它的工作方式，因为Vue路由器是如何设置来从每个页面重新加载的本地存储中提取令牌的。此令牌用于连接到后端，因此需要从本地存储中提取，
浏览 7提问于2022-03-16得票数 0
2回答
Vue.js组件不会呈现
、、、
我有一个组件，它使用axios将一些数据带入我的页面。对数据的请求从未提出过。这是我的代码：
在App.vue中：
<template>
<div id="app">
<Prices/>
</div>
</template>
<script>
import Prices from './components/Prices.vue'
export default {
name: 'app',
components: {
Prices
}
浏览 2提问于2018-12-14得票数 1
回答已采纳
我想在Vue.js应用程序中使用几个全局过滤器。我知道我需要在我的主Vue实例之前定义它们，但是从代码组织的角度来看，把它们都放在'main.js‘文件中似乎不合适。我怎么能把定义放在一个单独的文件中，导入到'main.js'？我对这件进出口的事不太感兴趣。
浏览 6提问于2017-10-29得票数 42
回答已采纳
1回答
我使用的是laravel-elixir-vueify npm包。每当我在“脚本”或“样式”函数中更改文件时，Gulp都能很好地工作。但是，每当我更改"browserify“函数中的1文件时，gulp watch就不会运行。下面是我的代码：
var elixir = require('laravel-elixir');
require('laravel-elixir-vueify');
elixir(function(mix) {
mix.sass('app.scss')
.browserify(['mai
浏览 3提问于2016-04-01得票数 2
在Vue.js 1.0中，我可以通过以下代码设置全局分隔符
Vue.config.delimiters = ['${', '}'];
但是它被从Vue.js 2.0中删除了。每次必须使用下列代码设置分隔符吗？
new Vue({
delimiters: ['${', '}']
})
浏览 0提问于2016-12-10得票数 3
回答已采纳
我在将FireBase3.4.0连接到我的Vue.js应用程序时遇到了一些问题。我对Vue.js还比较陌生，而且很少有文档可以连接到FireBase3.0。这是我的main.js文件，任何洞察力都将不胜感激。
import Vue from 'vue'
import App from './App'
import Firebase from 'firebase'
// Initialize Firebase
var config = {
apiKey: 'AIzaSyBew0KrZus-fa1mtQ8KOCk-i7FFMvR0qHM
浏览 1提问于2016-09-15得票数 1
回答已采纳
我有一个非常小的应用程序，我想把它作为一个web组件集成到一个网站中。因此，我使用vue-cli-service build --target wc --inline-vue --name name-of-component构建应用程序
但是，不包括SCSS样式吗？它在开发期间的实时重新加载中工作得很好。在main.js文件中导入SCSS文件，如下所示：
import Vue from 'vue';
import App from './App.vue';
import store from './store';
import './as
浏览 28提问于2021-03-10得票数 0
回答已采纳
项目结构看起来像
- src
- business
- sales
- views
- components
- filter.js
- router.js
- ...
- marketing
- views
- components
- filter.js
- router.js
- ...
- App.vue
-
浏览 3提问于2021-05-06得票数 1
3回答
我是Vue.js的新手。我对Vue组件之间的通信做了一些简单的练习。但我仍然有一个问题，谁是孩子，谁是家长。例如，我有以下代码：
HTML:
<body>
<div id="root" class="component">
<coupon @applied="onCouponApplied"></coupon>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js
浏览 7提问于2019-08-14得票数 1
回答已采纳
我想将Instagram为一篇文章提供的公开嵌入代码插入到我的vue.js应用程序中。Instagram为任何Instagram帖子右上角的3个点中的任何帖子提供了嵌入片段。
如果我将其粘贴到Vue模板中，就会得到以下错误：
“模板应该只负责将状态映射到UI。避免在模板中放置带有副作用的标记，例如，因为它们不会被解析。”
这意味着什么，我怎样才能绕过它在Vue？
我看过几个npm包，用于在Vue中嵌入Instagram帖子，但它们似乎都停止了使用Instagram的新的噩梦身份验证过程。如果我把它粘贴到一个普通的html页面(没有Vue)，它就能正常工作。
我在用Gridsome和Vueti
浏览 31提问于2021-07-30得票数 0
回答已采纳
1回答
我是Vue的新手，我有一个问题：
这是我的index.html，我使用了2个自定义标记aas、和index.html：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="root">
<aas></aas>
<task></task>
</div>
<script
浏览 43提问于2018-05-29得票数 0
回答已采纳
3回答
我刚开始和Vue.JS合作，有一个小问题困扰着我。我的文件结构类似于以下内容：
+ js
|--+ components
| |-- parent.vue
| |-- child.vue
|-- main.js
然后，在我的main.js中，我有以下内容：
window.Vue = require('vue');
require('vue-resource');
Vue.component('parent', require('./Components/parent'));
Vue.component('child&#
浏览 4提问于2016-12-16得票数 7
回答已采纳
我正在使用vue.js，同时呈现下面的vue页面
错误“无法获取/KForm”
下面是我在main.js中的代码
import * as componentBase from "@app/app_start"
import Form from "@views/Form/Form.vue"
import KForm from "@views/KForm/KForm"
const NotFound = { template: '<p>Page not found</p>' }
const routes
浏览 2提问于2018-11-30得票数 0
我正在试图加密一个id，以便我可以使用密码-js在vue.js中作为params使用，但是我一直收到这个错误。无法读取未定义的的属性'HmacSHA256‘，当我尝试使用ASE和MD5时，我有相同的错误，我做错了什么？这是我的密码
//in main.js
import CryptoJS from 'crypto-js'
Vue.use(CryptoJS)
//im my component
goToEvent (singleEvent) {
const id = this.CryptoJS.HmacSHA256(singleEvent.id, 'mySe
浏览 6提问于2020-09-24得票数 0
回答已采纳
我正在用Vue.js + Firebase做我的第一个项目。所以我有个错误Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)
当我将Firestore应用到一个组件中时。
在main.js中
import firebase from 'firebase/app'
Vue.config.productionTip = false
const firebase
浏览 6提问于2021-02-28得票数 1
我的Vue.js应用程序结构是这样的：
/app
--assets
--components
--dashboard.vue
--filters
--views
--dashboard-view.vue
app.vue
main.js
在我的main.js文件中，我有下面的代码片段来设置vue-resource来发出HTTP请求：
Vue.use(require('vue-resource'))
Vue.http.options.root = 'http://localhost:3000/
浏览 1提问于2015-09-13得票数 2
我无法将第三方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
3回答
我正在用VueJS测试、发射和监听方法，以学习如何使用它。我得到了一些奇怪的结果，我不明白。我希望调用我的函数initMap()，并且控制台正在进行日志记录，但错误出现在顶部。
Uncaught TypeError: Cannot read property 'apply' of undefined
at Vue$3.Vue.$emit (vue.js:2186)
at Vue$3.emit (main.js:131)
at Vue$3.boundFn [as emit] (vue.js:167)
at Vue$3.fire (main.js:1
浏览 10提问于2017-05-10得票数 2
1回答
在Vue 3中安装组件库
、、、、
我是Vue.js新手，试图将Vue.js 2迁移到Vue.js 3。我已经仔细阅读了关于如何迁移的Vue.js说明；然而，我需要迁移的应用程序包含了一个组件库，我也需要在迁移的应用程序中挂载它。
这是Vue.js 2 main.js文件：
import './styles/imports.scss';
import * as components from './components';
import * as layoutComponents from './layouts';
import
const ComponentLibrary =
浏览 0提问于2022-07-22得票数 0
回答已采纳
1回答
我想结合使用Select2和Vue.js来显示一些可选选项，但是无论我如何实现它，总是会出现错误： Uncaught ReferenceError: select2 is not defined
at Object.select2 (external "select2":1)
at __webpack_require__ (bootstrap:766)
at fn (bootstrap:129)
at Module../src/jquery.js (jquery.js:3)
at __webpack_require__ (bootstrap:766)
at fn (boot
浏览 10提问于2019-02-01得票数 0
我已经从我的Laravel项目url中删除了public。但是现在我的Vue.js坏了。
如果我从src文件中删除public，它不会识别出项目有Vue.js，但如果我添加public，它就会识别出这个项目有Vue.js。但是它没有在我的Blade页面上显示该组件，而是给出了这个错误：
[Vue warn]: Unknown custom element: <app-some> - did you register the component correctly? For recursive components, make sure to provide the "nam
浏览 20提问于2019-08-04得票数 0
为了学习vuejs，我遇到了一个问题:如何使用$emit将任何数据从一个组件传递给所有组件，但不使用任何@click。这是可能的一些数据是如何才能只是获得和抓取它的任何时间，而不使用点击？
假设我们使用了普通@click和$emit的示例。
main.js
export const eventBus = new Vue()
Hello.vue
<template>
<div>
<h2>This is Hello component</h2>
<button
@click="emitGlobalCli
浏览 1提问于2017-08-01得票数 1
回答已采纳
下面是我使用值myName在main.js中创建的vue对象 import Vue from "vue";
const vm = Vue.createApp({
data () {
return {
myName: 'su'
}
}
});
vm.mount('#app'); 我想在index.html中显示“su” 下面是html代码 <!DOCTYPE html>
<html lang="">
<head>
浏览 19提问于2021-04-11得票数 0
1回答
我试图在应用程序中使用vue-cli，但我想知道我可以不使用App.vue而使用组件吗？这里的组件以html显示，但当我单击按钮时，并不调用组件中的testFunction，而是在html中显示“单击此处”按钮。
index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge&
浏览 1提问于2021-08-29得票数 0
我有很多Vue组件。我想从main.js文件中为它们设置路由。但是我无法在这里导入我的组件，因为它是一个javascript文件。如何在这里导入我的Vue组件(.vue)？ import Vue from 'vue'
import App from './App.vue'
// Components importing
import LandingPage './components/LandingPage.vue'; // error occurs here
const routes = [
{ path: '/',
浏览 89提问于2021-03-23得票数 0
我想将Firebase集成到我的Vue.JS应用程序中。
我想知道如何将引用放到Firebase。
浏览 2提问于2017-06-04得票数 15
2回答
我刚从Vue.js开始在学校，在我的第一个任务，我要打印一个h2从一个vue组件，但我无法使它工作。我已经创建了vue组件，如下所示。
var app = new Vue({
el: '#app'
})
Vue.component('titleMsg', {
template: '<h1>{{ title }}</h1>',
data: {
title: 'Vue startsida'
}
})
这里还
浏览 4提问于2019-11-20得票数 1
回答已采纳
1回答
这是一个反应初学者的练习，所以请耐心，不要压倒对最新的最佳实践。
在这个练习中，我需要3个类组件：
Main.js:，它基本上只包含一个数组
List.js:，它通过该数组进行映射，每次迭代时将数组的元素传递给Item.js
Item.js:在这里呈现映射数组的
我对前两个组件很有信心，但无法从2跳到3。，谁既能发答案，又能评论关键的想法？Thx!
到目前为止我对Main.js和List.js的看法
Main.js
import React from "react";
export const avengers = ["Ironman",
浏览 3提问于2019-09-24得票数 3
回答已采纳
我正在审查Vue和它的路由器组件，尽管我在让路由器组件工作时遇到了一些问题。控制台出现以下错误：
未定义的ReferenceError:路由器未定义
大家好，
我正在将Vue和VueRouter导入到index.html中，并尽力阅读文档以使路由器初始化，但似乎无法工作。
在index.html中
<script type="module" src="/assets/js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue
浏览 1提问于2019-08-09得票数 2
我正在尝试在我的SignalR应用程序中导入Vue.JS。我用webpack来捆绑模块。
在我的package.json：
"dependencies": {
"@aspnet/signalr": "^1.1.0"
}
在脚本部分中的组件中：
<script>
import signalR from '@aspnet/signalr';**
...
</script>
我可以在signalR main.js(由webpack生成)中看到它，但是当我尝试访问挂起的救生钩时，我在控制台中得到了错
浏览 0提问于2018-12-09得票数 5
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
