在vue-cli中引入外部插件
一.可以用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中引入外部插件的更多相关文章
- vue文件中引入外部js
1.在项目的入口文件中(app.js)定义remoteScript标签 Vue.component('remote-script', { render: function (createElement ...
- Vue项目中引入外部文件(css、js、less)
例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步 ...
- 在Vue文件中引入外部URL链接
前言:最近做一个vueNuxt的项,没有index.html 也没有main.js项目需要引入一些外部的包,没什么技术含量只是一种思路 在vue生命钩子函数中动态创建JavaScript标签追加到HT ...
- angular4.0如何引入外部插件2:declare方案
前面有个<angular4.0如何引入外部插件1:import方案>,但是有局限,因为方案1需要用到@types这个东西. 但是并不是每一个插件都有@types,所以现在写个方案2. 拿引 ...
- angular4.0如何引入外部插件1:import方案
引入外部插件是项目中非常重要的环节.因为部分插件以js语法写的,而ng4用的是ts语法,所以在引入时需要配置. Step1:引入swiper插件的js文件[css在下面会讲到,先别急] 很重要的意见: ...
- vue-cli项目中引入第三方插件
前言 最近有小伙伴问道如何在vue-cli项目中引入第三方插件或者库,例如如果想在项目中使用jQuery中的Ajax请求数据呢?或者我想使用Bootstrap框架呢?等等这些问题,本篇博客将带你学习如 ...
- 如何在Android应用中引入外部网页
在某些情况下,我们需要在Android应用中引入外部网页,这里记录一下如何操作(其实很简单^.^). 先介绍一下开发环境: 开发工具:Android Studio 1.5 SDK API版本:17 操 ...
- 在vue项目中引入jquery
在vue项目中引入jquerycnpm install jquery --save在main.js中引入,加入下面这行代码:import 'jquery'注:有些项目是按需加载的,在main.js里面 ...
- 在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示
在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示) 1.使用npm安装依赖 npm install --save codemirror; 2.在页面中放入如下代码 ...
随机推荐
- 【mysql远程连库】
mysql连接远程库: 服务器端: 1.登陆服务器端,进入命令行,windows cmd; 2.设置用户.密码让指定的IP访问:MySQL -u root -p 或安装的快捷方式进入:MySQL Co ...
- 浅谈.net的后台校验
1.场景描述 在开发中,前端的相关模型校验往往不能满足当前开发的需求,也就是并不是十分的安全.于是,很多情况下需要后端进行模型的校验.在.net mvc中,有很多校验的方式(比如:值(1)可以使用内置 ...
- ProtoBuf练习(三)
任意类型 protobuf语言的任意字段类型相当于Boost库的boost::any类型数据,google.protobuf.Any是对protobuf语言的message进行封装,所以需要使用mes ...
- [poj 1837] Balance dp
Description Gigel has a strange "balance" and he wants to poise it. Actually, the device i ...
- “Enterprise Architect”和数据库的不解之缘
前言 在这个大数据盛行的时代,和数据打交道变的必不可少了,所有如果有工具来规范我们的数据库会更加方便我们的生活.这次机房,我们利用EA(Enterprise Architect)自动生成SQL语句来达 ...
- uva 1614奇怪的股市(归纳法证明,贪心)
uva 1614奇怪的股市(归纳法证明,贪心) 输入一个长度为n的序列a,满足\(1\le a_i\le i\),要求确定每个数的正负号,使得所有数的总和为0.例如a={1, 2, 3, 4},则4个 ...
- ajax跨域问题解决方案(jsonp,cors)
跨域 跨域有三个条件,满足任何一个条件就是跨域 1:服务器端口不一致 2:协议不一致 3:域名不一致 解决方案: 1.jsonp 在远程服务器上设法动态的把数据装进js格式的文本代码段中,供客户端调用 ...
- 不建议使用Restsharp
Restsharp确实是个优秀的插件,它最大的特点是内置了JsonConverter, 在一定程度上简化了HttpWebRequest的使用,在nuget上面有19.3M的下载量,是个很好的证明. 但 ...
- Linux服务之 Nginx安装
安装包下载: 链接:https://pan.baidu.com/s/1yna9nvT_9iYw4_0uVQRgFw 提取码:nurm yum -y install gcc automake autoc ...
- POJ2945 Find the Clones trie树
建一颗$trie$树(当然你哈希也资瓷),边插边更新,看看搜到最底时有多少个字符串,然后更新. #include<cstdio> #include<iostream> #inc ...