如何在脚手架中导入第三方插件

可以通过npm安装bootstrap，然后用import直接导入bootstrap的方式进行整合，因为vue-loader能自动从node_modules下加载库。

脚手架生成项目

执行命令用webpack模板生成一个名为project的项目

vue init webpack project

项目生成之后，就要安装项目依赖的组件。

npm install

安装jQuery

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

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

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

npm install [email protected] --save-dev

安装bootstrap

这里用的版本是3.3.0。

执行下面命令，即可安装完成。

npm install [email protected] --save-dev

配置jquery

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

image.png

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

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

在文件的最上边引入 webpack 模块

 const webpack=require('webpack')

引用ElementUi

install 的缩写可以写成i
--save-dev 可以缩写为-S

需要用的命令是 
npm i element-ui -S
需要在main.js里配置
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

引用bootstrap

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

import $ from 'jquery'


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

配置bootstrap

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

写完后，执行命令，运行效果。

npm run dev