Vue CLI3.0里，如何用jQuery和Bootstrap改写长尾词？

本文共计1242个文字，预计阅读时间需要5分钟。

Vue中使用jQuery和Bootstrap的配置并非特别复杂，以下是一个简化的配置步骤：

1. 安装Vue CLI：首先确保你已经安装了Vue CLI。 bash npm install -g @vue/cli

2. 创建Vue项目：使用Vue CLI创建一个新的项目。 bash vue create my-vue-project

3. 安装jQuery和Bootstrap：在项目目录中安装jQuery和Bootstrap。 bash npm install jquery bootstrap

4. 配置入口文件：在项目根目录下，找到`src/main.js`文件，并修改如下： javascript import Vue from 'vue' import App from './App.vue' import $ from 'jquery' import 'bootstrap/dist/css/bootstrap.min.css'

Vue.config.productionTip=false

new Vue({ render: h=> h(App) }).$mount('#app')

5. 使用jQuery和Bootstrap：在你的组件中，你可以直接使用jQuery和Bootstrap的类和方法。例如，在`App.vue`中： Hello, Vue + jQuery + Bootstrap!

/* 可以在这里添加自定义CSS */

6. 启动项目：使用以下命令启动你的Vue项目。 bash npm run serve

这样，你就可以在Vue项目中使用jQuery和Bootstrap了。注意，这里的配置是基础且简化的，实际项目中可能需要更多的配置和优化。

Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法，但是有时候又要用，所以放上我的引入设置，供大家参考。

在 Vue CLI2.0 中引入 jQuery 和 Bootstrap 需要设置很多配置项，网上有很多方法法，这里不重复写了。直接上 Vue CLI3.0 配置步骤。

第一步：安装 jQuery、 Bootstrap、popper.js依赖。

其中popper.js 用于在 Bootstrap 中显示弹窗、提示、下拉菜单，所以需要引入。

npm install jquery bootstrap@3 popper.js --save

注意：上面的 bootstrap@3 指的是安装 Bootstrap 第三版，如果不加 @3 符号，默认安装第四版。

第二步：配置 main.js

引入 Boostrap 请看配置文件。

//main.js import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; //在这里引入 bootstrap。默认只引入 bootstrap 中的 js，css 需要另外引入，我的 bootstrap.ss 在APP.vue中引入的 import "bootstrap"; //也可以在这里引入 bootstrap.css ; //import "bootstrap/dist/css/bootstrap.css"; Vue.config.productionTip = false; new Vue({ router: router, store: store, render: h => h(App) }).$mount("#app");

我的 APP.vue 的配置，只是引入 bootstrap.css，代码仅供参考。

<style> // 因为我的 bootstrap 文件经过了我自己的调整，所以单独放在 assets 文件夹中做单独引入。 //如果你只是想使用原生的 bootstrap，直接在 main.js 中引入 css 文件即可。 @import "./assets/css/bootstrap.css"; </style>

第三步：配置 vue.config.js 文件

Vue CLI3.0 中的所有配置都在 vue.config.js 文件，你在这里配置好，脚手架自动使用你的配置覆盖掉默认的配置。

如果你的项目中没有 vue.config.js 文件，请你在 package.json 文件的同级目录新建一个 vue.config.js 文件。文件内具体的配置如下：

const webpack = require("webpack"); module.exports = { //configureWebpack 是Vue CLI3.0 中用于配置 webpack 插件参数的地方，你在这里设置，会新建或者覆盖 webpack 默认配置。 //webpack ProvidePlugin 的含义是创建一个全局的变量，使这个变量在 webpack 各个模块内都可以使用。这里的配置含义是创建 '$'、'jQuery'、'window.jQuery' 三个变量指向 jquery 依赖，创建 'Popper' 变量指向 popper.js 依赖。 configureWebpack: { plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', Popper: ['popper.js', 'default'] }) ] } }

第四步：具体使用范例

我做了一个 tooltip 的示例，鼠标放上去会出现 tooltip 提示

//template <template> <div class="content-wrap"> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button> <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button> <button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button> <button type="button" class="btn btn-danger" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button> </div> </template> <script> export default { name: "componentsTooltips", mounted: function() { //在页面加载完毕后初始化 tooltip， 相当于$(function(){ $('[data-toggle="tooltip"]').tooltip(); } $('[data-toggle="tooltip"]').tooltip(); } }; </script>

如果 eslint 报误，请设置 .eslintrc.js 文件。

module.exports = { env: { node: true, jquery: true } };

本人测试结果如下：

参考文档：

Vue CLI3.0: cli.vuejs.org/zh/guide/webpack.html

Bootstrap tooltip ：v3.bootcss.com/javascript/#tooltips

Stackoverflow: stackoverflow.com/questions/42684661/adding-bootstrap-to-vue-cli-project

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。