# 一、引入 jquery
步骤：
- 安装 jquery
$ npm install jquery --save-dev |
2. 在 webpack.config.js 添加内容
+ const webpack = require("webpack"); | |
module.exports = { | |
entry: './index.js', | |
output: { | |
path: path.join(__dirname, './dist'), | |
publicPath: '/dist/', | |
filename: 'index.js' | |
}, | |
+ plugins: [ | |
new webpack.ProvidePlugin({ | |
jQuery: 'jquery', | |
$: 'jquery' | |
}) | |
] | |
} |
3. 在入口文件 index.js 李曼添加内容
import $ from 'jquery' ; |
4. 测试一下是否安装成功，看看能否弹出 '123'
<template> | |
<div> | |
Hello world！ | |
</div> | |
</template> | |
<script> | |
$(function () { | |
alert(123); | |
}); | |
export default { | |
}; | |
</script> | |
<style> | |
</style> |
# 二、引入 Bootstrap
1. 安装 Bootstrap
$ npm install --save-dev bootstrap |
2. 在入口文件 index.js 里引入相关
import './node_modules/bootstrap/dist/css/bootstrap.min.css'; | |
import './node_modules/bootstrap/dist/js/bootstrap.min.js'; |
3. 添加一段 Bootstrap 代码
<div class="btn-group" role="group" aria-label="..."> | |
<button type="button" class="btn btn-default">Left</button> | |
<button type="button" class="btn btn-default">Middle</button> | |
<button type="button" class="btn btn-default">Right</button> | |
</div> |
4. 运行，查看效果 这些按钮已经变成 Bootstrap 按钮组了
