vue-Cli3.0+ 引用 bootstrap 和 jquery 框架，亲测可用

---

vue-Cli3.0+ 引用 bootstrap 和 jquery 框架

---

前提：Vue-Cli 工具 必须3.0以上版本，亲测非常实用

1.成功案例

• 登录页面 ( 成功引用了 bootstrap 中的 form )
  
• 代码（只是部分）

      //只是部分代码
  	<form v-else action="">
       <div class="form-group">
         <label for="">username</label>
         <input v-model="name" type="text" class="form-control" placeholder="Enter uesrname" required>
       </div>
       <div class="form-group">
         <label for="">Password</label>
         <input v-model="password" type="password" class="form-control" id="" placeholder="Password" required>
       </div>
       <div class="form-group">
         <label for="">Please enter the password once again.</label>
         <input v-model="repeat" type="password" class="form-control" id="" placeholder="Password" required>
       </div>
       <div class="container">
         <div class="row">
           <div class="col-md-5">
             <button type="button" class="btn btn-block btn-primary" @click="addUser()">确定</button>
           </div>
           <div class="col-md-2"></div>
           <div class="col-md-5">
             <button type="button" class="btn btn-block btn-danger" @click="cancel()">取消</button>
           </div>
         </div>
       </div>
     </form>
  

2、安装 jQuery、 Bootstrap、popper.js依赖。

• 其中popper.js 用于在 Bootstrap 中显示弹窗、提示、下拉菜单，所以需要引入( bootstrap@3 指的是安装 Bootstrap 第三版，如果不加 @3 符号，默认安装第四版。)

    npm install jquery bootstrap@3 popper.js --save
  

3、配置 main.js文件

• 打开main.js文件，加入以下内容：

    import "bootstrap"
    import "bootstrap/dist/css/bootstrap.css"
  

• 如果bootstrap安装成功，引入bootstrap.css文件时会有自动提示
  

4.配置 vue.config.js 文件

• Vue CLI3.0 中的所有配置都在 vue.config.js 文件，如果你的项目中没有 vue.config.js 文件，请你在 package.json 文件的同级目录新建一个 vue.config.js 文件。文件内具体的配置如下：

     const webpack = require('webpack');
     module.exports = {
         publicPath: '/', //根路径
         outputDir: 'dist',  //构建输出目录
         assetsDir: 'assets',    //静态资源目录(js,css,img,fonts)
         lintOnSave: false, //是否开启eslint保存检测，有效值：true || false || 'error'
         //configureWebpack是vueCLI3.0中用于配置webpack插件参数的地方，你在这里设置，会新建或覆盖webpack默认配置
         //webpack ProvidePlugin的含义是创建一个全局的变量，使这个变量在webpack各个模块内都可以使用。这里的配置含义是创建'$'、'jQuery'、'window.jQuery'三个变量指向jQuery依赖，创建'Popper'变量指向popper.js依赖。
         configureWebpack: {
             plugins: [
                 new webpack.ProvidePlugin({
                     $: 'jquery',
                     jQuery: 'jquery',
                     'window.jQuery': 'jquery',
                     Popper: ['popper.js', 'default']
                 })
             ]
         },
         devServer: {
             open: false, //是否在启动项目完成后自动弹出浏览器窗口
             host: 'localhost', //'0.0.0.0'真机测试  域名
             port: 8081,  //端口号的配置
             https: false, //是否使用https协议
             hotOnly: false, //热更新修改的模块，窗口不会刷新
             proxy: {
                 "/api": {
                     target: "http://www.thenewstep.cn/", //接口域名
                     changeOrigin: true, //是否跨域
                     pathRewrite: {
                         '^/api': ''
                     }
                 }
             }
         }
     }
  

希望以上内容，能够帮助大家。