Vue-cli中详述jQuery、Bootstrap及Sass/Less CSS集成教程

本文主要讲解如何在Vue CLI项目中集成jQuery和Bootstrap，并使用Sass和Less进行CSS编写。首先，作者强调了由于一些教程缺乏清晰步骤，他们在引入这些库时遇到了困难，因此本文将提供详尽的指导。 一、引入Bootstrap 1. 下载Bootstrap文件：从Bootstrap官方网站下载所需版本（例如v3.3.7），将其解压后，将`bootstrap-3.3.7-dist`文件夹中的CSS和JS文件移动到Vue项目的`src/assets`目录下，以便后续引用。 2. 在`main.js`中引入：在项目的入口文件`src/main.js`中，导入Bootstrap的CSS和JS资源： - CSS部分：`import './assets/bootstrap-3.3.7-dist/css/bootstrap.min.css'` - JS部分：`import './assets/bootstrap-3.3.7-dist/js/bootstrap.min.js'` 通过这种方式，你可以在Vue组件中直接使用Bootstrap的类名和组件，例如设置按钮样式。 二、引入jQuery 1. 安装jQuery：使用npm命令行工具安装jQuery依赖，使用`npm install jquery --save`。初始尝试可能会收到一个警告，提示弃用某些旧版本，这时需要将安装名称改为全小写`jquery`。 2. 修改Webpack配置：在`build/webpack.base.conf.js`文件中进行以下调整： - 导入`webpack`模块：`var webpack = require('webpack')` - 在`plugins`数组中添加`ProvidePlugin`，用于全局加载jQuery： ```javascript plugins: [ // ... new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', jquery: 'jquery', 'window.jQuery': 'jquery' }) ] ``` - 这样在Vue组件中无需额外引用就能使用jQuery方法。 三、使用Sass和Less编写CSS 尽管本文重点在于jQuery和Bootstrap的集成，但提到的Sass和Less也是现代前端开发中常用的CSS预处理器，它们允许开发者更高效地组织和编写样式代码。你可以根据需要在项目中引入相应的loader（如`sass-loader`和`less-loader`），并在`.vue`文件或单独的CSS文件中使用Sass或Less语法，然后通过Webpack构建工具编译成CSS文件。 总结来说，这篇文章详细介绍了如何在Vue CLI项目中整合jQuery和Bootstrap，并优化CSS编译过程。通过遵循提供的步骤，开发者可以避免常见的配置问题，轻松实现这些库的无缝集成。同时，也提到了使用Sass和Less的选项，为CSS开发提供了更多的灵活性。