vue 引入jquery和bootstrap具体步骤

最新推荐文章于 2023-08-29 23:10:40 发布

小小程序员.

最新推荐文章于 2023-08-29 23:10:40 发布

阅读量2.1k

点赞数 3

分类专栏： vue bootstrap 文章标签： vue bootstrap

本文链接：https://blog.csdn.net/qq_34200964/article/details/81436449

版权

vue 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

bootstrap

1 篇文章 0 订阅

订阅专栏

前言

其实用了vue以后，并不建议再去用jquery. vue是视图与数据双向绑定，可以通过操作数据来控制dom，好处多多，但是有的时候还是不得不引入jq的，比如我们要用bootstrap。

作为前端，切图也是很必要的技能，写适配的css代码量是一个很恐怖的事情，而且要考虑的东西比较多，难免有遗漏，造成BUG。而引入bootstrap后，优秀的的栅格系统以及适配能力，会省很多事情。所以引入bootstrap不可避免，而bootstrap完全依赖于jq。。。。

步骤

1、用命令行进入vue-cli搭建好的project目录（这里注意搭建项目时关闭ESLint检查，不然引入bootstrap文件时会报一大推的格式错误），输入 npm install jQuery --save-dev //用npm下载jq依赖

2、找到build文件夹下的webpack.base.conf.js 在开头加入var webpack=require('webpack');如图：（第7行）

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

var webpack = require('webpack')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',

3、在module.exports最后面加入（即webpack.base.conf.js文件末尾加入）plugins块；（如图末尾）

node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  },
  plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "windows.jQuery": "jquery"
    })
 ]

}

4、在webpack.base.conf.js文件中修改resolve块，如图

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'assets': path.resolve(__dirname, '../src/assets'), 
      'jquery': "jquery/src/jquery"
    }
  },

5、在main.js中引入

import 'jquery'

6、将HelloWorld.vue的代码替换为如下代码测试jquery是否引入成功（页面出现警示框即成功）


<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
    <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-info">Left</button>
      <button type="button" class="btn btn-primary">Middle</button>
      <button type="button" class="btn btn-success">Right</button>
    </div>
    <div id="cc">cc</div>
  </div>
</template>
<script>
  $(function () {
    alert(123);
    $(".btn:eq(1)").click(function(){
      alert("abc");
    })
  });
  export default {
    name: 'hello',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }
 
  ul {
    list-style-type: none;
    padding: 0;
  }
 
  li {
    display: inline-block;
    margin: 0 10px;
  }
 
  a {
    color: #42b983;
  }
</style>

接着，继续引入bootstrap。

这里分两种情况，都可以试一下。（我个人第一种情况引入bootstrap失败，第二种成功）

（第一种情况）在main.js中插入（将下载好的bootstrap文件放在assets文件夹下）

import './assets/js/bootstrap.min.js'
import './assets/css/bootstrap.min.css'

接着运行cnpm run dev即可。

（第二种情况）在main.js中插入（将下载好的bootstrap文件放在static文件夹下）

import '../static/css/bootstrap.min.css'
import '../static/js/bootstrap.min.js'

接着运行cnpm run dev即可。

最后测试bootstrap的完整代码如下：（将HelloWorld.vue文件替换）

 <template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
    <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-info">Left</button>
      <button type="button" class="btn btn-primary">Middle</button>
      <button type="button" class="btn btn-success">Right</button>
    </div>
    <div id="cc">cc</div>
    <h4>提示工具（Tooltip）插件 - 锚</h4>
这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip"
        title="默认的 Tooltip">
    默认的 Tooltip
</a>.
这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip"
        data-placement="left" title="左侧的 Tooltip">
    左侧的 Tooltip
</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="top"
        title="顶部的 Tooltip">
    顶部的 Tooltip
</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="bottom"
        title="底部的 Tooltip">
    底部的 Tooltip
</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="right"
        title="右侧的 Tooltip">
    右侧的 Tooltip
</a>
 
<br>
 
<h4>提示工具（Tooltip）插件 - 按钮</h4>
<button type="button" class="btn btn-default" data-toggle="tooltip"
        title="默认的 Tooltip">
    默认的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
        data-placement="left" title="左侧的 Tooltip">
    左侧的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
        data-placement="top" title="顶部的 Tooltip">
    顶部的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
        data-placement="bottom" title="底部的 Tooltip">
    底部的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
        data-placement="right" title="右侧的 Tooltip">
    右侧的 Tooltip
</button>
  </div>
</template>
<script>
  $(function () {
    alert(123);
    $(".btn:eq(1)").click(function(){
      alert("abc");
    })
  });
  $(function () { $("[data-toggle='tooltip']").tooltip(); });
  export default {
    name: 'hello',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }
 
  ul {
    list-style-type: none;
    padding: 0;
  }
 
  li {
    display: inline-block;
    margin: 0 10px;
  }
 
  a {
    color: #42b983;
  }
</style>

效果截图：

小小程序员.

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
6
评论
vue 引入jquery和bootstrap具体步骤

前言其实用了vue以后，并不建议再去用jquery. vue是视图与数据双向绑定，可以通过操作数据来控制dom，好处多多，但是有的时候还是不得不引入jq的，比如我们要用bootstrap。作为前端，切图也是很必要的技能，写适配的css代码量是一个很恐怖的事情，而且要考虑的东西比较多，难免有遗漏，造成BUG。而引入bootstrap后，优秀的的栅格系统以及适配能力，会省很多事情。所以引入...
复制链接

扫一扫