VUE中引入jQuery和bootstrap-白红宇

VUE中引入jQuery和bootstrap

阅读量：499 次

发布时间：2019-03-07

本文共 1034 字，大约阅读时间需要 3 分钟。

引入

在项目开发过程中，为了实现前端依赖管理和资源优化，推荐使用Webpack工具。以下将详细讲解如何在项目中引入jQuery和Bootstrap，以及如何通过Webpack进行配置。

jQuery

第一步，在Webpack的配置文件（webpack.base.conf.js）中，添加jQuery的其它模块依赖关系。通过以下方式实现：

在module.exports顶部添加Webpack_require

在exports中对jQuery进行绑定配置

在主入口文件（main.js）中，依次导入jQuery和Vue相关资源。以下是有效的代码示例：

import $ from 'jquery';import Vue from 'vue';

另外，确保 Tuplipack 运行时，jQuery 已经被正确编译为 ES6 模块格式。特别注意以下路径配置：

{  module: {    rules: [      {        test: /\.js$/,        use: 'source-map',        exclude: [ path.resolve( __dirname, 'node_modules' ) ]      }    ]  }}

全局引入jq

为了方便开发和快速debug，可以选择在项目启动前，全局安装jQuery。此外，推荐创建一个特定目录用于存储第三方库，以利于代码管理和依赖版本控制。

Bootstrap

为了实现 Bootstrap 的功能，一定要对项目的Webpack配置做如下优化：

在 webpack.base.conf.js 中添加编译器版本与主模块绑定

在入口文件 main.js 中添加 Bootstrap 的 CSS 和 JS 资源引入

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

特别注意资源路径配置是否正确，确保独立运行。修改项目的 packaging Strategy 以适应不同环境需求。这一步与 jQuery 的配置具有相似之处，建议参考同一节的配置文档。

通过以上步骤，可以实现对 Bootstrap 与 jQuery 的无缝集成，确保开发流程顺畅。建议在各个版本之间保持同步，以避免依赖冲突。

转载地址：http://iazjz.baihongyu.com/

你可能感兴趣的文章