Vue 项目中引入外部插件和样式的配置指南
快速配置 Vue 项目中的外部资源
一、引入全局 CSS 和 JS 文件
- 将准备好的 CSS 和 JS 文件放入项目
src/assets目录下。 - 在
main.js文件中添加以下代码 (参考图片中红色框部分):javascript // ... import './assets/your-css-file.css'; import './assets/your-js-file.js';
二、引入 jQuery 和 Bootstrap
- 安装插件:
bash cnpm install jquery --save cnpm install bootstrap --save - 配置 jQuery:
在
vue.config.js文件中添加以下配置 (如果没有该文件，请在项目根目录下手动创建): ```javascript const webpack = require('webpack');
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
]
}
};
3. **引入 Bootstrap 样式:**
在 `main.js` 文件中添加以下代码:javascript
import 'bootstrap/dist/css/bootstrap.min.css'
```
文件大小：350.43KB
评论区