Vue introduces bootstrap error report module cannot be found

Reference document: https://segmentfault.com/a/1190000015765805

There are two steps to use bootstrap,

The first step: introduce jQuery

Step 2: Introduce bootstrap again

1. Create a vue project.

2. Use the command npm install jquery --save-dev to import jquery.

3. Add the following content in webpack.base.conf.js:

var webpack = require('webpack')

with

 // 增加一个plugins
plugins: [
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery"
  })
],

4. Add content in main.js

 import $ from 'jquery'

5. After the addition is complete, you can try whether jquery is easy to use in home.vue.

6. Install bootstrap, use the command

npm install bootstrap --save-dev

7. After the installation is successful, you can see the bootstrap module in the package.json folder. At this time, you need to add the following content to main.js: After the addition is complete, restart the program and npm run dev. You can see that the buttons in the interface are already bootstrap button groups.

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

I was at step 7, the path was wrong, and I can’t write it like the following.

import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; 
import '../node_modules/bootstrap/dist/js/bootstrap.min.js';