vue cli 引入安装bootstrap插件

Posted 2021-06-08 syf976561581

安装cli详细步骤请看之前文章呦

  

安装bootstrap必装插件

1. 安装bootstrap必须要先安装jQuery

2. 安装jQuery的方法在npm窗口中输入指令: npm install jquery --save-dev

3. 安装完成以后开始安装bootstrap 指令:npm install bootstrap -D

可选插件

4. bootstarp依赖插件(看需求是否安装)指令:popper.js:npm install popper.js -D

5. 可以安装zico这个插件与bootstrap搭配使用(看个人需求是否安装)指令:npm install zico -D

. 安装完成以后配置插件

在vue.config中修改

const webpack = require("webpack");
 
      module.exports={
 
      configureWebpack: {
 
      plugins: [
 
          new webpack.ProvidePlugin({
 
              $: "jquery",
 
              jQuery: "jquery",
 
              "window.jQuery": "jquery",
 
              Popper: ["popper.js", "default"]  如果安装popper就进行配置
 
          })
 
      ]
 
  }
 
 }

在src下面的main.js里面配置

#第二步，在main.js中引用相关方法
  import Vue from 'vue'
  import App from './App.vue'
  import router from './router'
  
  // 自定义引用bootstrap和zico
  import "bootstrap/dist/css/bootstrap.min.css";
  import "bootstrap/dist/js/bootstrap.min.js";
  import "zico/css/zico.min.css";安装zico就进行配置,没有安装的话就不用配置
  
Vue.config.productionTip = false
  
new Vue({
    router,
    render: h => h(App)
  }).$mount('#app')

作者创作不易,如果文章有用,记得留下你的关注和点赞呦