vue 引入自定义全局css和js

vue 引入自定义css 和js

一. 引入自定义js

1. 方法一 首先在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>