1、创建uni-app项目
2、index.vue代码
<template>
<view class="content">
<image class="logo" src="../../static/logo.png"></image>
<view>
<div class="teslist">
<button @click="methods1">显示console</button>
</div>
</view>
</view>
</template>
<script>
import { realconsole,realconsole2 } from '../../static/video.js'
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
//var tt = realconsole()
console.log('1111')
//自动弹出
realconsole2();
},
methods: {
//点击弹出
methods1:function(){
realconsole2();
}
}
}
</script>
<style>
.content {
text-align: center;
height: 400upx;
}
.logo{
height: 200upx;
width: 200upx;
margin-top: 200upx;
}
.title {
font-size: 36upx;
color: #8f8f94;
}
</style>
3、外部第三方JSvideo.js
function realconsole(){
alert("hello.thanks use me");
}
function realconsole2(){
alert("22");
}
//这里要对应上面相应的函数名称 这里要相应写上,没有是引用不了的
export {
realconsole,//对应
realconsole2
}
有两点要注意:
1.引用js文件底部,要把所有函数名称列出来
export {
realconsole,//对应
realconsole2
}
2.引用那个函数时也要标出来
import { realconsole,realconsole2 } from '../../static/video.js'
参考下面:
我们要改造我们要映入的外部js文件,改成下面这个格式。主要是红色方块内部代码,我们需要将我们的模块“抛出”,让人能获取到
function realconsole(){
alert("hello.thanks use me");
}
export {
realconsole
}
其次,到我们的寄主那里,我们需要导入,仿造其他的文件,写法是这样的:
<template>
<div class="teslist">
<button @click="methods1">显示console</button>
</div>
</template>
<script src="../../lib/myconsole.js"></script>
<script>
import { realconsole } from '../../lib/myconsole.js'
export default {
methods:{
methods1:function(){
realconsole();
}
}}
</script>
<style>
.teslist {
}
</style>
注意红色叉的部分,那是我们es5的写法,绿色才是正确的
接着是效果图
二.直接引入的 不能用npm下载的
在view.vue中引入swiper.css和swiper.js文件
<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格式的导出需要注释掉
引用:https://www.cnblogs.com/moxiaowohuwei/p/8462371.html
案例二
Vue.js 引入外部js方法
1、外部文件config.js
第一种写法
//常量的定义
const config = {
baseurl:'http://172.16.114.5:8088/MGT2'
}
//函数的定义
function formatXml(text) {
return text
}
//导出 {常量名、函数名}
export {config,formatXml}
第二种写法
//常量的定义
export const config = {
baseurl:'http://172.16.114.5:8088/MGT2'
}
//函数的定义
export function formatXml(text) {
return text
}
2、引入config.js里面的常量和方法
import {config,formatXml} from '../config'//记得带上{}花括号
引用:https://www.cnblogs.com/qiu-Ann/p/7463484.html