个人Vue项目需要使用bootstrap,实践过程记录下来留作参考:

背景:

1,有一个Vue项目模板,如果没有可以参考我上一篇博文:《新建一个vue空白项目并上传到github上》;

网址:https://blog.csdn.net/tom_wong666/article/details/82709997

2,如果懒得重新配置可以直接去git上clone我的项目代码参考,项目地址如下:

方法一项目git地址:https://github.com/tom-wong666/model.git

方法二项目git地址:https://github.com/tom-wong666/xiaoa.git

git项目clone方法,见此文背景第1步的文章中,第二部分第5步至第8步。

方法一,简单粗暴直接index.html引用

见下图序号,并参考如下文字说明操作:

直接引用boot图示
boot引用方式图示

1,static文件中新建bootstrap文件夹,放入图中的三个文件:boot两个,jquery一个(boot依赖jquery);

备注1:boot官网文件下载地址https://v3.bootcss.com/getting-started/#download

备注2:jQuer官网文件下载地址https://jquery.com/download/

2,打开index.html;

3,引入boot的css文件;

4,引入jquery的js文件;

5,引入boot的js文件;

6,以上配置完成,直接在vue组件中使用boot。

注意:js文件引入顺序不能错,先引入jquery再引入boot;

方法一项目git地址:https://github.com/tom-wong666/model.git

方法二,npm安装jQuery和boot

由于boot依赖jQuery,所以第一步安装jQuery:

1、在package.json的dependencies中添加一行代码:“jquery”: “^2.2.3”:

  "dependencies": {
    "bootstrap": "^3.3.0",
    "jquery": "^2.2.3",//这是需要加的内容
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },

2、在build文件webpack.base.conf.js中添加两行代码:

//......表示省略已有的

module.exports = {
.....................
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'jquery': 'jquery' //这里是增加的
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "windows.jQuery": "jquery"//这里是增加的
    })
  ],
.....................
}

3、在main.js中加入如下代码:

import $ from ‘jquery’ ;


4、在命令行工具中运行如下命令完成jQuery安装;:

npm install jquery@2.2.3 –save-dev

 

5,jQuery安装完成后下一步,在命令行工具中运行如下命令安装boot:

npm install bootstrap@3.3.0 –save-dev 

6,在需要的vue组件中引入如下代码,就可以使用了:

<script>

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

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

</script>

方法二项目git地址:https://github.com/tom-wong666/xiaoa.git

博文通览提示:

点击此超链接跳转到Tom哥的博文分类和索引页面 

Tom哥的博客博文分类和索引页面地址:https://blog.csdn.net/tom_wong666/article/details/84137820

Logo

前往低代码交流专区

更多推荐