vue - (引入jq)

以前很拒绝vue+jq一起使用。但是vue写动画特效实在是难受，所以就试着去尝试了下，vue+jq的开发。

嗯，挺爽的，哈哈。

这里讲下，如何在vue-cli中引入jquery。

1.找到package.json文件，打开

 "dependencies": {"vue": "^2.5.2","vue-router": "^3.0.1","jquery": "^3.1.1"   // 加入此行，版本号可自己定义},

2.找到webpack.base.conf.js文件，打开

const path = require('path')
const utils = require('./utils')
const config = require('../config')
const webpack = require("webpack")  //加入此行
const vueLoaderConfig = require('./vue-loader.conf')

3.在webpack.base.conf.js 文件中，加入

module.exports = {context: path.resolve(__dirname, '../'),entry: {app: './src/main.js'},output: {path: config.build.assetsRoot,filename: '[name].js',publicPath: process.env.NODE_ENV === 'production'? config.build.assetsPublicPath: config.dev.assetsPublicPath},resolve: {extensions: ['.js', '.vue', '.json'],alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src'),}},　// 加入以下代码plugins: [new webpack.optimize.CommonsChunkPlugin('common.js'),new webpack.ProvidePlugin({jQuery: "jquery",$: "jquery"})],

4.找到main.js 打开

import Vue from 'vue'
import App from './App'
import router from './router'
import $ from 'jquery'  // 加入此行

好了，大功告成。

npm run dev 走一波！！！

转载于:https://www.cnblogs.com/lafitewu/p/8567106.html

vue - (引入jq)相关推荐

vue引入JQ的方法
在vue中引入jq 用vue-cli脚手架工具构建项目成功后当需要引入JQ,可用以下方法: 1.首先在package.json里的dependencies加入"jquery" : ...
webpack构建Vue项目引入jQ时发生“'$' is defined but never used”的处理
今天公司需要新建个数据后台,就按照查到的方法构建了Vue框架的项目,引入jQ.bootstrap时,按照在线方法配置,发现 main.js 里的引用jQ一直显示红标,没多想,在按照网上配置完后,npm ...
vue 项目在index.html页面直接引入jq库，报错$ is not defined解决方案
近日在vue项目开发中遇到一个问题:vue 项目在index.html页面直接引入jq库,报错$ is not defined解决方案... 首先说一下为什么会出现这个错误,其实项目发布到线上是不会出 ...
vue循环jq渲染网页页面
网页页面的渲染一般放到服务器都是原生的比较舒服,不用打包 ,直接使用用原生开发网页数据的请求用原生开发网页数据的请求渲染不是很方便,循环之类的都不是很好用,我们相到了vue的循环(v-for)那 ...
vue 导入公共css_HTML+CSS入门 vue引入通用CSS
本篇教程介绍了HTML+CSS入门 vue引入通用CSS,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 1.在入口 js 文件 main.js 中引入,一些公共的样式文件 ...
webpack引入iview.css,解决webpack+Vue引入iView找不到字体文件的问题
原因: css-loader后面带了参数modules(打包报错) url-loader后面带了参数name(引入报错) { test: /\.css$/, use: ExtractTextPlugi ...
vue引入全局less实现全局变量的控制
vue引入全局less 1.设置全局样式变量的好处: 2.以less为例(sass等同原理) 1.vue-cli2搭建的项目(1) 2.vue-cli2搭建的项目(2) 3.vue-cli3.vue- ...
Vue2.0 --- vue-cli脚手架中全局引入JQ
第一步:安装jQuery npm/cmpn方式安装(默认安装1.7.X版本的JQ) npm/cnpm install jQuery 如果想安装更高版本的JQ那么可以选择在package.json文件下 ...
html引入百度地图报错,vue引入百度地图BMapGL，或者其他个性化地图
3.jpg vue的百度地图早就有vue-baidu-map这里就不赘述了, 自己去直接对着API写就好了,基本上已经满足绝大多数需求了还简单方便. vue-baidu-map 传送门 https:/ ...

vue - (引入jq)

vue - (引入jq)相关推荐

最新文章

热门文章