zoukankan      html  css  js  c++  java
  • vue中如何引入bootstrap

    第一步先安装jquery

    ① 在终端输入   

    npm install jquery --save-dev

    ②  build文件夹中的webpack.config.js 添加以下内容

    const webpack = require("webpack");

    如图:

    然后在module.exports里添加

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

    如图:

    ③  在入口文件main.js 里面添加

    import $ from 'jquery' ;

    如图:

     

    ④  然后在components文件夹中里新建一个vue,添加代码测试jq引入是否成功

    <template>
      <div>
        <p>Hello World</p>
      </div>
    </template>
    
    <script>
    export default {
      name: "HelloWorld",
    };
    $(function() { 
      $("p").click(function() {
        alert("Welcome to zhengzhou");
      });
    });
    </script>
    <style scoped>
    
    </style>

    点击HelloWorld弹出Welcome to zhengzhou即为引入成功

    如图:

    第二步:安装Bootstrap

    ①   在终端输入   

    npm install --save-dev bootstrap

    ②  在入口文件main.js里添加以下代码,引入bootstrap的css和js

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

    如图:

    ③  刚刚创建的vue组件中添加一段Bootstrap代码

    <div class="btn-group" role="group" aria-label="...">  
          <button type="button" class="btn btn-default">Left</button>  
          <button type="button" class="btn btn-default">Middle</button>  
          <button type="button" class="btn btn-default">Right</button>  
    </div> 

    运行,查看效果  这些按钮已经变成Bootstrap按钮组了

    如图:

     完成!

    bootstrap官方中文文档

  • 相关阅读:
    (Go)03.go类型
    (Go)02.go 安装delve调试工具测试
    (Go)01.Windows 安装 Go语言开发环境以及使用
    etcd创建集群并增加节点
    libhiredis.so.0.13 => not found 缺少
    Linux查找并杀死僵尸进程
    k8s istio 配置请求的路由规则
    k8s 安装并试用Istio service mesh
    k8s Job、Cronjob 的使用
    k8s Gitlab CI/CD 之自动编译Docker镜像并推送到指定的Registry
  • 原文地址:https://www.cnblogs.com/wulicute-TS/p/11864395.html
Copyright © 2011-2022 走看看