菜单

11时出现错误_vue,js_脚本之家

2020年3月31日 - www.2138.com

前言

Vue 中动用 jQuery 和 Bootstrap 不是专程符合 Vue
原生的写法,然则偶然又要用,所以放上作者的引进设置,供大家参照他事他说加以考查。

swiper那是一个很有力的轮播显示工具,但屡次也是有局地未知BUG,越发是在手提式有线话机端,由于质量局限,会造功效果和PC测量试验的时候有完全不雷同的成效

www.2138.com,在 Vue CLI2.0 中引进 jQuery 和 Bootstrap
供给设置过多陈设项,英特网有过多方法法,这里不另行写了。直接上 Vue CLI3.0
配置步骤。

11时出现错误_vue,js_脚本之家。在H5项目中,须要用到翻页效果,通过 Swiper 来促成,安装 Swiper

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

npm i swiper -S

里头popper.js 用于在 Bootstrap
中展现弹窗、提醒、下拉菜单,所以供给引进。

然则实际上接受中,发掘低版本 iOS < 11 会现出上边那个荒谬:

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

SyntaxError: Unexpected keyword ‘const’. Const declarations are not
supported in strict mode.

只顾:上边包车型客车 bootstrap@3 指的是安装 Bootstrap 第三版,如若不加 @3
符号,暗许安装第四版。

原因

第二步:配置 main.js

Swiper.js 这一个 npm 包里面还使用了dom7
ssr-window,所以供给对那多个插件实行 Babel 转 ES5

引进 Boostrap 请看安插文件。

缓慢解决方案

//main.jsimport 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;

Vue CLI 2.x 下,在 build/webpack.base.config.js 文件中改过

自家的 APP.vue 的构造,只是引进 bootstrap.css,代码仅供参谋。

// ...modules: { rules: [ // ... { test: /.js$/, loader: 'babel-loader', include: [ resolve, resolve, resolve('node_modules/swiper/dist/js/'), resolve('node_modules/webpack-dev-server/client'), // 新增 resolve('node_modules/swiper'), resolve, resolve('node_modules/ssr-window') ] }, // ... ]}// ...
// 因为我的 bootstrap 文件经过了我自己的调整,所以单独放在 assets 文件夹中做单独引入。//如果你只是想使用原生的 bootstrap,直接在 main.js 中引入 css 文件即可。@import "./assets/css/bootstrap.css";

Vue CLI 3.x 下

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

在 vue.config.js 中增加 transpileDependencies 配置

Vue CLI3.0 中的全数配置都在 vue.config.js
文件,你在那间配置好,脚手架自动使用你的安排覆盖掉暗许的结构。

module.exports = { transpileDependencies: [ "swiper", "dom7", "ssr-window" ]}

如果你的品类中平素不 vue.config.js 文件,请您在 package.json
文件的同级目录新建三个 vue.config.js 文件。文件内实际的布局如下:

参考:

const webpack = require;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  Tooltip on left Tooltip on top Tooltip on bottom Tooltip on right export default { name: "componentsTooltips", mounted: function() { //&#22312;&#39029;&#38754;&#21152;&#36733;&#23436;&#27605;&#21518;&#21021;&#22987;&#21270; tooltip&#65292; &#30456;&#24403;&#20110;${ $('[data-toggle="tooltip"]').tooltip(); } $('[data-toggle="tooltip"]').tooltip(); }};

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

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

Vue CLI3.0:

Bootstrap tooltip :

Stackoverflow:

以上就是本文的全部内容,希望对大家的上学抱有助于,也期待我们多多点拨脚本之家。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图