04-02 vue-cli项目中使用bootstrap

一. 新建项目，安装插件

前提: vue-cil3.0以下的脚手架

vue init webpack 项目目录
cd 项目目录    # 要在项目目录下

# 这里还是使用国内的吧(提示: 这个没有必要在项目目录下)
'''
淘宝团队做的国内镜像，因为npm的服务器位于国外可能会影响安装。淘宝镜像与官方同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
'''
npm install cnpm -g --registry=https://registry.npm.taobao.org
cnpm -v    # 安装完成以后, 来测试是否成功安装. 以后使用cnpm下载, 网速慢也不怕啦~

# 直接cv以下命令
cnpm i
cnpm i jquery --save
cnpm i bootstrap --save
cnpm i popper.js --save

二. 配置jquery

在build目录下的webpack.base.conf.js中在module.exports中进行配置

# 在顶部添加
const webpack = require('webpack')

# 在整个配置对象的末尾增加(其实只要添加位置对就ok)plugins配置
plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "windows.jQuery": "jquery"
    })
  ]

三. 引入: 在src目录main.js中配置

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

四. 使用

好了, 现在就可以用了~