css文件
在main.js中导入公共的css
import '../static/css/common.css' //引入公用css
在页面中引入单独css
<style scoped>
@import '../../static/css/header.css'
</style>
Js文件
自定义js 中写：
function title(t){
alert(t)
}
export {
title //多个方法在此处json中export出去
}
页面中使用：
<template>
<div>
<button class="btn" @click="clickme">click me</button>
</div>
</template>
<script>
import {title} from './js/common.js' //可以选择需要的方法引入
export default {
data(){
return{
}
},
methods:{
clickme(){
title('你点我了')
}
}
}
</script>
或者
import Comjs from './js/common.js' //引入公用js
Vue.prototype.$comjs = Comjs//添加到vue属性中
自定义js 中写：
const comjs = {
}
comjs.title = function (title) {
alert(title)
}
export default comjs
页面中使用：
<template>
<div>
<button class="btn" @click="clickme">click me</button>
</div>
</template>
<script>
export default {
data(){
return{
}
},
methods:{
clickme(){
this.$comjs.title('你点我了')
}
}
}
</script>
mounted() {
const s = document.createElement('script')
s.type = 'text/javascript'
s.src = '你的需要的js文件地址'
document.body.appendChild(s)
}
export default {
components: {
'remote-js': {
render(createElement) {
return createElement(
'script',
{
attrs: {
type: 'text/javascript',
src: '你的需要的js文件地址',
},
},
)
},
},
},
}
1. 首先我们要改变我们要映入的外部js文件，改成以下这个格式。
代码：<pre class="html">function realconsole(){ alert("hello.thanks use me")} export { realconsole } </pre>
2. 到我们的寄主那里，我们需要导入仿造的文件，方法是这样的：
代码：<pre class="html"><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></pre>
注意红色叉的部分，那是我们es5的写法，绿色才是正确的，下面是效果图
