vue中导入外链css或js

Question

如题所述

Answer 1

在vue中导入自定义的css文件或js文件

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>