博客
关于我
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/

    你可能感兴趣的文章
    MySQL 聚簇索引&&二级索引&&辅助索引
    查看>>
    Mysql 脏页 脏读 脏数据
    查看>>
    mysql 自增id和UUID做主键性能分析,及最优方案
    查看>>
    Mysql 自定义函数
    查看>>
    mysql 行转列 列转行
    查看>>
    Mysql 表分区
    查看>>
    mysql 表的操作
    查看>>
    mysql 视图,视图更新删除
    查看>>
    MySQL 触发器
    查看>>
    mysql 让所有IP访问数据库
    查看>>
    mysql 记录的增删改查
    查看>>
    MySQL 设置数据库的隔离级别
    查看>>
    MySQL 证明为什么用limit时,offset很大会影响性能
    查看>>
    Mysql 语句操作索引SQL语句
    查看>>
    MySQL 误操作后数据恢复(update,delete忘加where条件)
    查看>>
    MySQL 调优/优化的 101 个建议!
    查看>>
    mysql 转义字符用法_MySql 转义字符的使用说明
    查看>>
    mysql 输入密码秒退
    查看>>
    mysql 递归查找父节点_MySQL递归查询树状表的子节点、父节点具体实现
    查看>>
    mysql 里对root及普通用户赋权及更改密码的一些命令
    查看>>