[vue] Vue uses jquery and bootstrap

Before reading this article, we should master the construction of vue project. To execute the command, switch to the project directory first.

Introducing jquery

  1. Install jquery (see package.json for installation, if installed, ignore this step)
$ npm install jquery --save-dev
  1. Add the following in build/webpack.base.conf.js:
const webpack = require('webpack')

Add the following to the module.exports = {code segment:

plugins: [
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        "windows.jQuery": "jquery"
  1. Add content to main.js
import $ from 'jquery'
  1. Then you can re-execute npm run dev to test its availability

Introduction of bootstrap (Mode 1)

  1. Install bootstrap
npm install bootstrap --save-dev
  1. After successful installation, you can see the bootstrap module in the package.json folder.
    At this point, you need to add the following in main.js:
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'
  1. Rerun if an error is reported:
Module not found: Error: Can't resolve 'popper.js' ....

This is because when you package bootstrap 4 with web pack, you need to manually install popper.js

npm install popper.js -D
  1. Then run it again.

Introduction of bootstrap (Mode 2)

Bootstrap can be downloaded and placed in a static folder, or bootstrap can be introduced directly into index.html using the free CDN acceleration service provided by BootCDN.

<!DOCTYPE html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <!-- The latest version Bootstrap core CSS file -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Optional Bootstrap Theme files (generally not introduced) -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <!-- Abreast of the times Bootstrap core JavaScript file -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Tags: JQuery npm Webpack JSON

Posted on Sat, 12 Oct 2019 11:45:02 -0700 by jeicrash