『壹』 vue中導入外鏈css或js
在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>
『貳』 vue項目中引入外部資源js
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文件地址',
},
},
);
},
},
},
}