vue-cli4.1.1配置jquery和bootstrap环境

一、先打开vue ui

指令

vue ui

二、安装jQuery依赖

三、检测环境

四、配置文件

在.eslintrc.js文件中的env属性中添加

jquery:true,

六、在根目录创建vue.config.js文件

把下面的内容写放进去

const webpack = require('webpack')

module.exports = {

    configureWebpack: {

       plugins: [

          new webpack.ProvidePlugin({

            $:"jquery",

            jQuery:"jquery",

            "windows.jQuery":"jquery"

          })

        ]

    }

}

然后在组件中直接使用了不用再main.js中引入

bootstrap

将下面的代码放到 main.js文件中
注： bootstrap.min.js 要写出 bootstrap.min 因为存在eslint语法检测
js必须用一个变量接收
vue在识别js的时候可以不写后缀

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

以下是测试代码

<template>
  <div class="hello">
      <button type="button" class="btn btn-primary" data-toggle="modal"
      data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
 aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  mounted() {
    console.log($('.aa'));
    $('.aa').css('color', 'red');
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>

效果

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
    jquery:true,
  },
  extends: [
    'plugin:vue/essential',
  ],
  parserOptions: {
    parser: 'babel-eslint',
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'linebreak-style': ['off', 'windows'],
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)',
      ],
      env: {
        mocha: true,
      },
    },
  ],
};