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

九转功成 九转功成     2022-09-08     760

关键词:

说明:vue-cli是vue快速构建项目的命令行式开发模式。

vue主要针对数据层,更多的操作在数据上,很少在DOM上,偶尔也会需要操作DOM,偶尔也会用到JQ插件,下面简单说下如何在使用vue-cli开发时候把JQ设置为全局的公用方法。

步骤:

1、npm install jquery -S

此时package.json内会自动添加一个最新版本的jquery,如果需要指定版本,安装的时候自己指定。

如下图

2、打开build/webpack.base.conf.js文件,最上面先添加一行:var webpack = require("webpack")

再在下面添加上webpack的插件如下图的位置

3、此时已经成功吧JQ设置为全局了,使用的时候可以像使用script那样正常使用了!

vue-cli的跨域设置(代码片段)

概述今天打算快速使用vue-cli建立一个小应用用于测试,使用axios发送http请求,但是遇到了跨域问题,总结了一下,供以后开发时参考,相信对其他人也有用。vue-cli的跨域设置在vue.config.js里面的devServer的proxy加入如下设置。//vue.c... 查看详情

使用 vue-cli 设置时如何从 babel-loader 中排除特定文件?

】使用vue-cli设置时如何从babel-loader中排除特定文件?【英文标题】:Howtoexcludespecificfilefrombabel-loaderwhenusingvue-clisetup?【发布时间】:2019-05-0618:31:39【问题描述】:vue.config.js中有一个选项transpileDependencies可以配置到node_modules中的... 查看详情

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

...的问题,但到目前为止我没有运气。就上下文而言,我在使用“旧”命令创建的Vue项目上构建了一个SPA网站。我不记得是哪一个,但它看起来像下面这样:vueinitwebpack&l 查看详情

如何配置生产构建和开发构建 vue-cli

】如何配置生产构建和开发构建vue-cli【英文标题】:HowtoconfigureProductionbuildandDevelopmentBuildvue-cli【发布时间】:2019-11-0309:06:24【问题描述】:我想设置一个用于生产构建的npm脚本和一个用于开发构建的脚本。比如用于生产的npmrunb... 查看详情

vue-cli开发模式如何与服务端api结合?

...:02【问题描述】:我是vue新手,在这里有点困惑。我正在使用vue-cli构建一个vue应用程序,我知道我可以使用npmrunserve运行开发服务器,它在我的package.json中作为脚本引用为vue-cli-servi 查看详情

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‘ 查看详情

Spring Boot - 如何在开发过程中禁用@Cacheable?

...:19【问题描述】:我正在寻找两件事:如何在开发过程中使用Spring引导“dev”配置文件禁用所有缓存。在application.properties中没有通用设置将其全部关闭。最简单的方法是什么?如何禁用特定方 查看详情

vue-cli3或者4中如何正确的使用public中的图片

标题说的很清楚了,就是要使用public中的图片那么为什么要把图片放到public中呢,其实官网上面也说了,要么是需要动态引入非常多的图片,特别是小图标,如果放在assert中的话,会被webpack处理,很可能被打成base64混合到app.js... 查看详情

vue-cli2.x如何配置多项目集成环境

...,可以互相依赖,也可以独立打包部署。所有操作只需要使用不同操作命令即可,如npmrundev:proj1或者npmrundev:proj2。对于以上场景可以使用一个项目管理多个子模块也是一个不错的选择多页面:指一个项目有多个入口,打包是会生... 查看详情

前端开发过程中遇到过啥困难?

...,因为单页面应用对seo很不友好,解决的方法就是:我们使用nuxt技术,在保证使用vue语法开发的同时,也使用了服务端渲染技术保证了seo效果,这个过程突出了自己的学习nuxt等新技术的能力3、另外也是有很多实际的开发问题不... 查看详情

在开发过程中我应该如何使用 identifierForVendor?

】在开发过程中我应该如何使用identifierForVendor?【英文标题】:HowshouldIuseidentifierForVendorduringdevelopment?【发布时间】:2013-09-2503:39:32【问题描述】:Apple建议使用[UIDevicecurrentDevice].identifierForVendor。每次在iOS模拟器中运行他们的应... 查看详情

如何在开发过程中同时使用 Android 和 IOS 模拟器来测试我的 Flutter 应用程序?

】如何在开发过程中同时使用Android和IOS模拟器来测试我的Flutter应用程序?【英文标题】:HowtousebothAndroidandIOSsimulatorsimultaneouslytotestmyflutterappduringdevelopment?【发布时间】:2019-09-1300:08:21【问题描述】:我想知道在开发Flutter应用程... 查看详情

vue-cli之路由独立成js文件之后,如何在路由中获取vuex属性或者设置国际化i18n的当前使用语言

国际化vue-i18n的使用:importVuefrom‘vue‘;importVueI18nfrom‘vue-i18n‘;//引入语言包importzhfrom‘@/common/i18n/zh‘;importenfrom‘@/common/i18n/en‘;//多语Vue.use(VueI18n);//实例化语言包consti18n=newVueI18n({locale:‘english‘,/ 查看详情

vue-cli如何添加多种环境变量(代码片段)

...如此,网友1官方默认两种类型develpomentproduction,而我们实际开发过程中,会有本地开发,测试环境,正式环境等等,因而这两种环境变量是不够的,因而需要第三种乃至多种变量环境基于vue-cli3.0进行配置Youcanspecifyenvvariablesbyplacingt... 查看详情

vue.js使用vue-cli搭建一个spa项目(代码片段)

...的力量贡献出来,随后我会持续更新vue如何与ui框架结合使用;在低版本ie如何运用vwjs将其打包为桌面应用以及我在实际开发的过程中踩过的各种坑。欢迎大家观看与互相交流哦 查看详情

如何在 vue-cli 应用程序中为 WebSocket 代理正确设置 devServer

】如何在vue-cli应用程序中为WebSocket代理正确设置devServer【英文标题】:HowtocorrectlysetupdevServerforWebSocketproxyinginavue-cliapp【发布时间】:2020-12-3112:40:21【问题描述】:我有一个Node.JS服务器在http://localhost:8080运行,有2条路由:"/&... 查看详情

如何将 vue-cli 添加到现有项目中?

...ct?【发布时间】:2019-09-0203:55:28【问题描述】:我有一个使用Webpack的Vue.js项目。我想向它添加vue-cli功能,这样我就可以像使用vue-cli生成项目一样使用它。但我不知道如何将vue-cli与现有项目集成。对于新项目,我可以做vuecreate&a... 查看详情

如何将 vue-cli 与同一个项目中现有的不相关 webpack 设置集成?

】如何将vue-cli与同一个项目中现有的不相关webpack设置集成?【英文标题】:Howtointegratevue-cliwithexistingunrelatedwebpacksetupinthesameproject?【发布时间】:2020-04-1600:41:09【问题描述】:我有一个带有现有webpack设置的项目,它与Vue无关。... 查看详情