Vue.js+jquery+bootstrap
-
vue项目导入jquery
-
安装jq
npm install jquery --save-dev
-
配置
在build/webpack.base.conf.js中添加如下内容
var webpack = require('webpack') ... node:{...}, // 增加一个plugins plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ],
-
在main.js中导入
在main.js中添加内容 import $ from 'jquery'
-
测试
在vue组件中加入以下代码
<script> /* eslint-disable */ jQuery(function () { alert(123); }); export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App!!!' } } } </script>
注意
在加入以上代码后,会导致eslint格式验证错误,我们可以直接关闭这个测试,方法,在webpack.base.conf.js文件中注释掉:
// ...(config.dev.useEslint ? [createLintingRule()] : []),
-
-
导入bootstrap
-
安装bootstrap,
npm install bootstrap --save-dev
-
在main.js导入
import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min'
-