使用vue-cli开发web的基础(四)-集成使用bootstr

建议不要使用bootstrap, 首先集成比较麻烦,还需要使用jquery,

开发pc端web,可以使用element-ui, iview-ui等

开发移动端web,可以使用 VUX, Cube-UI

参考  https://docschina.org

集成bootstrap

1.安装jquery

    npm install jquery --S

    然后修改 /build/webpack.base.conf.js 里两个地方

    ①在文件内容最外层定义一个常量 const webpack = require('webpack')

    ②在module.exports里加入

        plugins:[

           new webpack.optimize.CommonsChunkPlugin('common.js'),

           new webpack.ProvidePlugin({

                jQuery: "jquery",

                $: "jquery"

           })

        ]

    ③最后在mian.js中引入import $ from 'jquery 并 Vue.use($)

2 下载配置bootstrap

    下载bootstrap   https://v3.bootcss.com/

    下载自定义bootstrap  https://getbootstrap.com/docs/3.3/customize/

    把下载下来的文件解压 放到static里面

    在webpack.base.conf.js里面搜索 alias,在里面添加bootstrap路径

    alias: {

　　'vue$': 'vue/dist/vue.esm.js',

　　'@': resolve('src'),

　　'bootstrap':resolve('static/bootstrap'),  //添加bootstrap的路径定位

　}

    最后在main.js中引入 就可以使用bootstrap功能, 

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

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

    引入之后在网页console窗口出现两个错误不影响使用,忽略就是