vue.js 设置bootstap以及vue-cli3设置

设置bootstrap

vue init webpack “项目名称”

生成项目是要是npm .

? Project name vuestrap

? Project description A Vue.js project

? Author 省略

? Vue build standalone

? Install vue-router? Yes

? Use ESLint to lint your code? No

? Setup unit tests with Karma + Mocha? No

? Setup e2e tests with Nightwatch? No

安装

bootstrap是依赖jquery的，所以就先装上jquery，这里用的版本是1.11.3。

::@版本号规定安装版本,如果不添加这个则安装最新版本

稍后在配置的时候，是以webpack插件的方式进行打包，所以这里直接用npm进行安装，因为插件方式打包的组件都是require进 来的。

执行命令，并保存到package.json中

npm install jquery@1.11.3 --save-dev

注：如果想查看npm上jquery有哪些版本，可以执行命令：

npm view jquery versions

npm install bootstrap@3.3.0 --save-dev

配置Jquery

将jquery以插件打包，需要为webpack的plugins进行插件设置。

在build/webpack.base.conf.js文件中，在整个配置对象的末尾增加plugins配置。

在webpack.base.conf.js中的配置项，可以在dev和build出来的pro版本中都有效。

下面的配置其实就是变量名的真正指向设置，这样，在页面中对jquery的各种名字的调用就会有效，否则bootstrap跑不起来。

plugins: [

   var webpack = require('webpack')

    new webpack.ProvidePlugin({

      $: "jquery",

      jQuery: "jquery",

      "windows.jQuery": "jquery"

    })

  ]

引用bootstrap

在src/main.js文件的顶部加入如下对bootstrap主要文件的引用，注意这里的路径，不在是从src/assets加载，而是换成了从node_modules加载。

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

因为bootstrap除了js和css文件外，还有字体文件需要一并打包，默认生成的webpack.base.conf.js中的moudle->rules设定中都已经包含对字体文件的打包设置，所以无需修改
npm run dev

Vue CLI3.0 中使用jQuery 和 Bootstrap

第一步：安装 jQuery、 Bootstrap、popper.js依赖。

npm install jquery bootstrap@3 popper.js --save

第二步：配置 main.js

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

第三步：配置 vue.config.js 文件

Vue CLI3.0 中的所有配置都在 vue.config.js 文件，你在这里配置好，脚手架自动使用你的配置覆盖掉默认的配置。
如果项目中没有 vue.config.js文件，请在 package.json 文件的同级目录新建一个 vue.config.js 文件。文件内具体的配置如下：

const webpack = require("webpack");
module.exports = {
//configureWebpack 是Vue CLI3.0 中用于配置 webpack 插件参数的地方，你在这里设置，会新建或者覆盖 webpack 默认配置。
//webpack ProvidePlugin 的含义是创建一个全局的变量，使这个变量在 webpack 各个模块内都可以使用。这里的配置含义是创建 '$'、'jQuery'、'window.jQuery' 三个变量指向 jquery 依赖，创建 'Popper' 变量指向 popper.js 依赖。
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                Popper: ['popper.js', 'default']
              })
        ]
      }
}

如果 eslint 报误，请设置 .eslintrc.js 文件。

env: {
node: true,
jquery: true
}