vue中导入外链css或js

JavaScript035

vue中导入外链css或js,第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>

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html,编写问题基础代码。

2、新建index.js文件,将内嵌js内容添加到index.js文件中。

3、在index.html的head标签中新增引用代码:<script src="index.js"></script>。

4、浏览器运行index.html页面,此时成功引入index.js并调用其内容。

<!--js引入外接文件-->

<script type="text/javascript" src="外部js的路径(xxxx.js)"></script>

<!--css引入外接文件-->

<link href="外部css文件路径(xxxx.css)" type="text/css" rel="stylesheet" />

<!--例子-->

<script type="text/javascript" src="/js/action.js"></script>

<link href="/css/style.js" type="text/css" rel="stylesheet" />