正文

如何在 Vue-CLI 3 项目中全局声明 jQuery？

 2023-02-22  61

关键词：

【中文标题】如何在 Vue-CLI 3 项目中全局声明 jQuery？【英文标题】：How do I globally declare jQuery inside a Vue-CLI 3 project? 【发布时间】：2019-05-20 22:47:58 【问题描述】：

我在 SO 和其他地方看到了很多关于此的问题，但到目前为止我没有运气。

就上下文而言，我在使用“旧”命令创建的 Vue 项目上构建了一个 SPA 网站。我不记得是哪一个，但它看起来像下面这样：

vue init webpack <my project>

我最近意识到 Vue-CLI 3 对我来说更容易维护、保持更新和改进，因此我安装了@vue/cli，创建了一个新项目并开始从我的旧项目中复制/粘贴文件项目到新的。

旧项目有一个 build 目录，其中包含各种 webpack 配置文件，我需要为我想要使用的包全局设置 jQuery，因此我将以下内容添加到 Webpack 的“基础”配置中。

new webpack.ProvidePlugin(
  $: 'jquery',
  jQuery: 'jquery'
),

但是，对于新项目，我现在拥有的所有配置文件是项目根目录下的babel.config.js 和vue.config.js，没有build 或config 目录。

我尝试在我的main.js 文件中使用以下行全局设置 jQuery：

import jQuery from 'jquery'

window.$ = window.jQuery = jQuery
global.$ = global.jQuery = jQuery

但每次我重新加载页面时，都会收到以下消息：

jQuery 没有定义

所以，到目前为止，我使用的是 jQuery 的 CDN 版本，但我对这个解决方案并不放心。

我应该如何进行 Vue-CLI 3 项目？

提前谢谢你

【问题讨论】：

不要！像 Vue 这样的现代模板引擎的重点是不要使用像 jQuery 这样的遗留库。只是不要！问题是，我无法在 Vue 上下文中找到或使 vanilla js 包工作.. 你应该在每个你需要的 .js/.vue 的开头使用import jquery from jquery，然后是 jquery("#id").whatever)` 您也许可以将其添加到Vue() 并通过.vue 文件中的this.$jquery 访问它，您还没有尝试过。 【参考方案1】：

如果您使用的是 Jquery 插件，您应该在 main.js 中执行此操作：

/*
* If using Jquery plugins they will expect to be available in the global namespace, 
* which isn’t the case when you import/require it. So manually assign jquery to 
* window. Use require instead of import because the imports are hoisted to the
* top of a file by the compiler, which would break VueJS code.
*/
const $ = require('jquery')
window.jQuery = window.$ = $;

【讨论】：

【参考方案2】：

您可以使用 Vue 插件。这允许您向每个组件添加新属性。

在main.js

import Vue from 'vue';
import jQuery from 'jquery';

Vue.use(
  install (V) 
    V.$jQuery = V.prototype.$jQuery = jQuery
  
)

那么你就可以在组件的任何地方使用jQuery了。

在MyComponent.vue

import Vue from 'vue'

export default 
  mounted () 
    this.$jQuery('h1').text('Hello World')
    Vue.$jQuery('h1').text('Hello World')

甚至是另一个 js 文件。

在util.js

import Vue from 'vue'

Vue.$jQuery('h1').text('Hello World')

【讨论】：

【参考方案3】：

您可以继续 public/index.html 并将脚本标记添加到正文中，并带有指向您的 jquery 文件或 cdn 的路由。如果你把它放在公共的 jquery 文件夹中，它看起来像：

<body>
    <div id="app"></div>
    <script type="text/javascript" src="/jquery/jquery-3.4.1.min.js"></script>
</body>

我不确定这是否正是您想要的，但它会使其在您的项目中全球可用。

【讨论】：

使用vue-cli开发过程中如何把jquery设置为全局

说明：vue-cli是vue快速构建项目的命令行式开发模式。vue主要针对数据层，更多的操作在数据上，很少在DOM上，偶尔也会需要操作DOM，偶尔也会用到JQ插件，下面简单说下如何在使用vue-cli开发时候把JQ设置为全局的公用方法。步骤... 查看详情

如何在另一个 Vue 项目中使用 Vue Web 组件（由 Vue-CLI 3 生成）？

】如何在另一个Vue项目中使用VueWeb组件（由Vue-CLI3生成）？【英文标题】：HowtouseVuewebcomponents(generatedbyVue-CLI3)insideanotherVueproject?【发布时间】：2019-02-1004:49:47【问题描述】：我可以将Vue-CLI3构建命令(vue-cli-servicebuild--targetwc--namefoo.... 查看详情

vue-cli3使用sass全局变量（less同理）(代码片段)

vue-cli2与vue-cli3vue-cli2构建的项目有build文件夹来重头配置webpack（需要配置loader等）vue-cli3构建的项目没有build文件夹，webpack基本配置好了，只需要添加vue.config.js根据需要更改配置文件vue-cli3使用sass全局变量在vue.con... 查看详情

vue-cli3使用sass全局变量（less同理）(代码片段)

如何在打字稿中声明全局变量[重复]

】如何在打字稿中声明全局变量[重复]【英文标题】：HowtodeclareaGlobalVariableintypescript[duplicate]【发布时间】：2021-02-1710:27:33【问题描述】：我继承了一个Typescript项目（有.ts），但我呢？似乎无法锻炼如何在Typescript文件中创建全局... 查看详情

vue-cli项目中引入全局scss

加载一个全局设置文件在每个组件里加载一个设置文件，而无需每次都将其显式导入，是一个常见的需求。比如为所有组件全局使用scss变量。为了达成此目的：npminstallsass-resources-loader--save-dev然后增加下面的webpack规则：{loader:‘... 查看详情

vue学习vue-cli3开发单文件组件(代码片段)

一单文件组件介绍二如何安装Vue-Cli3脚手架三快速原型开发四vue-cli3生成项目五购物车项目搭建六购物车项目操作七Mock模拟数据八如何做数据持久化九Vue中使用第三方组件（element-ui）十Element的表单组件分析十一表单组件设... 查看详情

vue-cli项目创建及项目结构说明

一、vue-cli简要安装步骤1.window下打开运行，输入cmd打开终端。2.检查node和npm的安装情况在终端中分别输入：node--versionnpm--version如果没有安装node和npm，需要安装一下。3.全局安装vue-cli在终端中输入：npminstall--globalvue-cli二、项目创... 查看详情

如何将带有 Jest 的 Vue Test Utils 添加到现有的 Vue-CLI 3 项目中？

】如何将带有Jest的VueTestUtils添加到现有的Vue-CLI3项目中？【英文标题】：HowtoaddVueTestUtilswithJesttoalreadyexistingVue-CLI3project?【发布时间】：2019-09-1817:19:09【问题描述】：我想测试一个已经存在的Vue-CLI3项目。创建项目时，我还没有初... 查看详情

vue-cli3搭建的vue项目中使用jquery

装包：npminstalljquery--save方式一全局使用1）main.js中引入//jqueryimport$from‘jquery‘Vue.prototype.$=$;2）更改vue.config.jsconstwebpack=require(‘webpack‘)configureWebpack:plugins:[newwebpack.ProvidePlugin($:‘jquery‘ 查看详情

vue-cli项目创建及项目结构说明

vue-cli3.x与vue-cli2.x构建项目的区别

参考技术Avue-cli3.0正式版于8月10号发布，但是3.0与2.0版本在搭建项目时到底有何不同呢？下面做一下简单的介绍，希望可以帮到有需要的朋友1、全局安装vu-cli3.0npminstall-g@vue/cli(如果之前安装了2.0版本，先卸载npmuninstall-gvue-cli);安... 查看详情

如何在android应用程序中声明全局变量？ [复制]

】如何在android应用程序中声明全局变量？[复制]【英文标题】：Howtodeclareglobalvariablesinandroidapplication?[duplicate]【发布时间】：2011-07-1007:16:30【问题描述】：可能重复：Android:Howtodeclareglobalvariables?如何在android应用中声明全局变量？... 查看详情

如何在打字稿中声明全局变量

】如何在打字稿中声明全局变量【英文标题】：howcanIdeclareaglobalvariableintypescript【发布时间】：2017-10-2220:25:38【问题描述】：我在打字稿中声明了一个全局变量，例如：global.test="某事"我尝试这样做，我得到错误属性“测试”在... 查看详情

我的 PostCSS 插件在 Vue-cli 3 项目中不起作用

】我的PostCSS插件在Vue-cli3项目中不起作用【英文标题】：MyPostCSSplugindoesnotworkinaVue-cli3project【发布时间】：2021-10-1700:21:52【问题描述】：所以我写了这个我想要使用的postcss插件。我根据postcss指南对其进行了测试，在我尝试在实... 查看详情

如何在 vue-cli 3 上禁用 eslint？

】如何在vue-cli3上禁用eslint？【英文标题】：Howtodisableeslintonvue-cli3?【发布时间】：2018-08-1317:41:09【问题描述】：我最近更新了最新版本vue-cli3创建项目并运行后，它会显示消息您可以使用特殊的cmets来禁用某些警告。使用//eslint-d... 查看详情

如何在 vue-cli 项目中配置 webpack css loader

】如何在vue-cli项目中配置webpackcssloader【英文标题】：Howtoconfigurewebpackcssloaderinavue-cliproject【发布时间】：2018-05-1702:55:35【问题描述】：我有一个新生成的vue-cli项目。我已经使用npminstallpurecss--save安装了Pure.CSS框架。但我不知道如... 查看详情

在vue-cli项目中使用echarts

这个示例使用 vue-cli 脚手架搭建安装echarts依赖npminstallecharts-S或者使用国内的淘宝镜像：安装npminstall-gcnpm--registry=https://registry.npm.taobao.org使用cnpminstallecharts-S创建图表全局引入main.js//引入echartsimportechartsfrom‘ec 查看详情