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>

--------------------- 
作者：桃夭蓁蓁 
來源：CSDN 
原文：https://blog.csdn.net/liuxing393724034/article/details/80775065 
版權宣告：本文為博主原創文章，轉載請附上博文連結！