vue 项目下 jquery 和bootstrap 引入配置

     1.安装脚手架工具

    npm install -g vue-cli

    2.查看版本号,查看是否安装成功

    vue --version

    3.创建框架项目(注意路径)

    vue init webpack my-project(my-project是项目名称)

    4.查看项目文件

    cd my-project(项目名)

    5.启动项目

    npm run dev

 

npm install jquery@3.3.1

npm install bootstrap@3.3.7 -d

main.js下引入

import jQuery from 'jquery
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'

配置jQuery 
由于 Bootstrap 依赖于 jQuery,所以在代码中 import jQuery from ‘jquery’ 是不够的,这只是解决了自己代码对 jQuery 的依赖,在此处使用了webpack.ProvidePlugin

解决方案: 
在 webpack.base.conf.js 头部添加

var webpack = require('webpack')
1
在 entry {}后边添加

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

vue 项目下 jquery 和bootstrap 引入配置_第1张图片

你可能感兴趣的:(前端)