node+vue-cli项目中完美解决添加bootstrap和jquery

vue-cli项目中完美解决添加bootstrap和jquery

步骤一：安装jquery

在项目中，使用node输入

npm install jquery -s

步骤二： 安装bootstrap

安装方式一：

在npm上直接下载

npm install bootstrap@3.3.7 -s

方式二：

直接下载bootstrap整个项目，然后把整个解压完之后的目录粘贴复制到项目的node_modules目录下

步骤三：修改配置文件

在build/webpack.base.conf.js文件中添加如下设置

var webpack = require("webpack")	//new add row
module.exports = {

  //上面一堆默认设置
  
  ，plugins: [						//new add row
    new webpack.ProvidePlugin({		//new add row
      $: "jquery",					//new add row
      jQuery: "jquery"				//new add row
    })								//new add row
  ],								//new add row
}

步骤四：引入文件

引入方式一：在总界面引入，一次引入即可

在index.html中进行如下引入

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

引入方式二：在具体的component中引入

<script>
  import 'bootstrap/css/bootstrap.css'
  import 'bootstrap/js/bootstrap.min.js'
  export default {
  
  }
  <style scoped></style>
</script>

$如$ $果$ $感$ $觉$$写$ $的$ $还$ $不$ $错$ $，$$不$ $要$ $忘$ $记$ $点赞$ $评论$ $收藏$ $关注$