一.可以用npm下载的

现在以jquery为例子:

1 先在package.json中的dependencies中写入“jquery”:“^3.2.1”(jquery版本)

2 在npm中搜索jquery下载

3 在webpack.base.config.js加入,var webpack=require('webpack');在module.exports中加入

plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]

4 重新npm run dev

然后就已经加入jquery了

-------------------------------------进一步--------------------------------------------------------------

直接上个例子:https://github.com/GainLoss/MyVue/tree/master/vue-demo

二.直接引入的 不能用npm下载的

在view.vue中引入swiper.css和swiper.js文件

在view.vue中的代码这样写:

<template>
...
</template>
<script>
import swiper from './swiper.js'
import common from '../common.vue'
export default {
data(){
return{
}
},
mounted:function(){
this.swippertab();
},
methods:{
swippertab(){
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 3,
paginationClickable: true,
spaceBetween: 30
});
},
}
}
</script>
<style scoped>
@import './swiper.css';
</style>

注意一下的就是在swiper.js中需要改一下代码,在最后面改成用export导出Swiper,并且代码原有的amd格式的导出需要注释掉

在vue-cli中引入外部插件的更多相关文章

  1. vue文件中引入外部js

    1.在项目的入口文件中(app.js)定义remoteScript标签 Vue.component('remote-script', { render: function (createElement ...

  2. Vue项目中引入外部文件(css、js、less)

    例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步 ...

  3. 在Vue文件中引入外部URL链接

    前言:最近做一个vueNuxt的项,没有index.html 也没有main.js项目需要引入一些外部的包,没什么技术含量只是一种思路 在vue生命钩子函数中动态创建JavaScript标签追加到HT ...

  4. angular4.0如何引入外部插件2:declare方案

    前面有个<angular4.0如何引入外部插件1:import方案>,但是有局限,因为方案1需要用到@types这个东西. 但是并不是每一个插件都有@types,所以现在写个方案2. 拿引 ...

  5. angular4.0如何引入外部插件1:import方案

    引入外部插件是项目中非常重要的环节.因为部分插件以js语法写的,而ng4用的是ts语法,所以在引入时需要配置. Step1:引入swiper插件的js文件[css在下面会讲到,先别急] 很重要的意见: ...

  6. vue-cli项目中引入第三方插件

    前言 最近有小伙伴问道如何在vue-cli项目中引入第三方插件或者库,例如如果想在项目中使用jQuery中的Ajax请求数据呢?或者我想使用Bootstrap框架呢?等等这些问题,本篇博客将带你学习如 ...

  7. 如何在Android应用中引入外部网页

    在某些情况下,我们需要在Android应用中引入外部网页,这里记录一下如何操作(其实很简单^.^). 先介绍一下开发环境: 开发工具:Android Studio 1.5 SDK API版本:17 操 ...

  8. 在vue项目中引入jquery

    在vue项目中引入jquerycnpm install jquery --save在main.js中引入,加入下面这行代码:import 'jquery'注:有些项目是按需加载的,在main.js里面 ...

  9. 在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示

    在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示) 1.使用npm安装依赖 npm install --save codemirror; 2.在页面中放入如下代码 ...

随机推荐

  1. 【mysql远程连库】

    mysql连接远程库: 服务器端: 1.登陆服务器端,进入命令行,windows cmd; 2.设置用户.密码让指定的IP访问:MySQL -u root -p 或安装的快捷方式进入:MySQL Co ...

  2. 浅谈.net的后台校验

    1.场景描述 在开发中,前端的相关模型校验往往不能满足当前开发的需求,也就是并不是十分的安全.于是,很多情况下需要后端进行模型的校验.在.net mvc中,有很多校验的方式(比如:值(1)可以使用内置 ...

  3. ProtoBuf练习(三)

    任意类型 protobuf语言的任意字段类型相当于Boost库的boost::any类型数据,google.protobuf.Any是对protobuf语言的message进行封装,所以需要使用mes ...

  4. [poj 1837] Balance dp

    Description Gigel has a strange "balance" and he wants to poise it. Actually, the device i ...

  5. “Enterprise Architect”和数据库的不解之缘

    前言 在这个大数据盛行的时代,和数据打交道变的必不可少了,所有如果有工具来规范我们的数据库会更加方便我们的生活.这次机房,我们利用EA(Enterprise Architect)自动生成SQL语句来达 ...

  6. uva 1614奇怪的股市(归纳法证明,贪心)

    uva 1614奇怪的股市(归纳法证明,贪心) 输入一个长度为n的序列a,满足\(1\le a_i\le i\),要求确定每个数的正负号,使得所有数的总和为0.例如a={1, 2, 3, 4},则4个 ...

  7. ajax跨域问题解决方案(jsonp,cors)

    跨域 跨域有三个条件,满足任何一个条件就是跨域 1:服务器端口不一致 2:协议不一致 3:域名不一致 解决方案: 1.jsonp 在远程服务器上设法动态的把数据装进js格式的文本代码段中,供客户端调用 ...

  8. 不建议使用Restsharp

    Restsharp确实是个优秀的插件,它最大的特点是内置了JsonConverter, 在一定程度上简化了HttpWebRequest的使用,在nuget上面有19.3M的下载量,是个很好的证明. 但 ...

  9. Linux服务之 Nginx安装

    安装包下载: 链接:https://pan.baidu.com/s/1yna9nvT_9iYw4_0uVQRgFw 提取码:nurm yum -y install gcc automake autoc ...

  10. POJ2945 Find the Clones trie树

    建一颗$trie$树(当然你哈希也资瓷),边插边更新,看看搜到最底时有多少个字符串,然后更新. #include<cstdio> #include<iostream> #inc ...