CSS里 @import用法？

html-css033

CSS里 @import用法？,第1张

引入CSS的方法有两种，一种是@import，一种是link \x0d\x0a@import url('地址')\x0d\x0a\x0d\x0a现在绝大部分的网站都采用后一种link方式，原因在于\x0d\x0a@import先加载HTML，后加载CSS\x0d\x0alink先加载CSS，后加载HTML。\x0d\x0a\x0d\x0a所以前者加载网页会出现令浏览者以外的格式，后者则是带格式的加载网页。

在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>