vue项目中的jQuery和Bootstrap

vue项目中的jQuery和Bootstrap

• npm安装jQuery
• npm安装Bootstrap
• 关于版本更换

vue项目中经常会用到一些依赖包，这里以jQuery和bootstrap为例

npm安装jQuery

1. cmd进入softcup文件夹，输入cnpm i jquery -S -D开始安装

2. 安装完成后，在项目根目录下的build目录下找到webpack.base.conf.js文件，在开头使用以下代码引入webpackvar webpack = require('webpack')，因为该文件默认没有引用
   

   

3. 然后在module.exports中添加一段代码

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

4. 然后在main.js里导入import 'jquery'就可以了

5. 运行npm run start
   如果编译出错，检查一下eslint，修改根目录下.eslintrc.js文件了，为env添加一个键值对 jquery: true 就可以了

6. 可以在App.vue文件中添加测试代码
   $(function () {alert (123);});
   

   

7. 运行npm run start

8. 打开浏览器，输入localhost:8080回车 ，弹出alert就成功了

npm安装Bootstrap

1. 安装bootstrap前，必须先安装jQuery

2. cmd进入softcup文件夹，输入cnpm i bootstrap -S -D开始安装

3. 完成后，在入口文件main.js里引入

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

4. 添加一段Bootstrap代码测试，运行npm run start

5. 这时可能会报错 ，因为bootstrap4不仅依赖jquery还有popper.js，所以安装popper.js

此时安装的是bootstrap4，因为版本不同，依赖有所变化，如果要改变版本，下面另说

6. cmd进入softcup文件夹，输入cnpm i popper.js -S -D开始安装
   同时在webpack.base.conf.js文件中加入Popper: ['popper.js', 'default']
   

   

7. 可以在App.vue文件的template中添加测试代码

<divclass="btn-group">
  <buttontype="button"class="btn btn-primary">Apple</button>
  <buttontype="button"class="btn btn-primary">Samsung</button>
  <buttontype="button"class="btn btn-primary">Sony</button>
</div>

8. 运行npm run start，出现样式，就成功了

关于版本更换

1. 如果要改变用npm下载的文件版本，要在根目录下的package.json文件下修改

2. 这里以bootstrap为例

   1. 在package.json文件下，Ctrl+F查找bootstrap
      

      

   2. 修改版本号即可

   3. 再进入cmd，输入cnpm i bootstrap -S -D回车，就下载了相应版本的bootstrap了

vue-cli+webpack项目搭建