11、vue 引入自定义全局css和js

vue 引入自定义css 和js

一. 引入自定义js

方法一
首先在main.js中引入：

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>

2.方法二（此方法不需要在main.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>

二. 引入自定义css
在main.js中引入公用css

import '../static/css/common.css'          //引入公用css 

在页面中引入单独css

<style scoped>
    @import '../../static/css/header.css';
</style>