vue project introduced bootstrap correct posture

How vue introduced bootstrap

Recently played the whole stack, natural and ultimately the use of vue. Using the generated project vue-cli want to introduce on Bootstrap, npm need to install the appropriate packet, then display the code introduced.

• 1. Installation dependencies:

    cnpm install bootstrap --save-dev
    cnpm install jquery --save-dev
    cnpm install popper.js --save-dev

• 2. The introduction of the global bootstrap.
  Add the following code in the root directory of the project in West main.js:

import 'bootstrap'

Introducing jquery Similarly, the following may be added in line main.js:

import $ from 'jquery'

• 3. The bootstrap css resources introduced to the relevant page.
  And ordinary html direct link css files of different resources for project-based components of vue, we need to add the following code vue documents related to the need to use:

<script>
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
</script>

If Home.vue is Article.vue parent component, then the css want to act on Article.vue, only we need to add these two lines to import in Home.vue.

Internet-related tutorials or blog a lot, but this introduces css and js file path mostly wrong, right from the start counting after node_module path, such as bootstrap / xxx / xxx / xxx.min.css, rather than ' ./node_modules/bootstrap/xxx/xxx/xx.min.css.