vue引入Bootstrap

step1 初始化项目

使用vue-cli脚手架，初始化一个vue项目，如果不清楚怎么初始化的，可以参我的文章Vue入门之使用vue-cli初始化项目

step2 安装jquery

安装bootstarp之前，要先安装jquery

npm install jquery --save

image.png

step3 修改配置文件

在webpack.base.conf.js（如果是是开发[dev]环境则在webpack.dev.conf.js；两个文件都在bulid目录下；请一定注意，我在操作的时候就是找错了文件，半天都没有弄对；）中添加如下内容：

,
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "windows.jQuery": "jquery"
    })
  ]

在main.js文件中添加如下内容

import $ from 'jquery'

image.png

step4 安装Bootstrap

npm install bootstrap --save

image

会有提示run npm audit fix to fix them, or npm audit for details，可选择修复，也可以不修复

在main.js添加如下内容

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

step5 添加完成后，npm run dev

会报如下错误，按提示安装即可

image

npm i --save popper.js

image.png

再npm run dev即可

测试是否安装成功

• 1 .在componets文件夹下新建文件Product.vue
  
  image.png
• 2.在Product.vue中添加如下代码

• 3. 配置路由信息

     
     
     image.png

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'         
import Product from '@/components/Product'   // add

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {                                              
      path: '/product',                    
      name: 'Product',                   
      component: Product           
    }
  ]
})

4. npm run dev,访问(http://localhost:8080/#/productocal)，看到如下页面代表引入成功
   
   image