在vue项目中 如何定义全局变量 全局函数 单个的css文件

定义全局变量

第一种方式：
全局变量模块文件：global.vue
Global.vue文件：

接下来在text1.vue组件中使用：

第二种方式：vuex
在src下面写一个store，store里写一个index.js,在里面用state定义全局的变量
调用的时候，可以写store.state.data

定义全局函数

方法一：在main.js里面直接写函数
简单的函数可以直接在main.js里面直接写

Vue.prototype.changeData = function (){//changeData是函数名
  alert('执行成功');
}

组件中调用：

this.changeData();//直接通过this运行函数

方法二：用vuex设置全局函数
在mutations下面定义方法名（一般是大写的）,里面可以有两个参数，第一个为固定的，写state就行，第二个为.vue组件中传过来的参数，代码如下：

mutations:{
    Login(state,data){
        window.localStorage.setItem('token',data.token);
        window.localStorage.setItem('userId',data.userId);
        state.token=data.token;
        state.userId=data.userId;
    },
    Logout(state){
        window.localStorage.removeItem('token');
        state.token=null;
        // window.localStorage.removeItem('userId');
    }
  }

在其他页面需要调用这个函数时，直接用store.commit('方法名',{参数})就可以

方法三：export和import

1. 一个动画需要的JS库（Velocity.js）

var Velocity = function (string) {     
    // 这里是Velocity的具体实现算法 
}

2.因为我们想在Vue组件中想要引入Velocity函数，那么要在Velocity加密算法的js脚本的最后，使用如下代码，将Velocity函数导出：

export {  
 Velocity
 }

注：外部脚本js不要放在components文件夹下，否则会一直报错。可以在src文件夹下新建一个js文件夹，然后将外部js脚本放在这个文件夹下，然后就可以在其他Vue组件中引入该js脚本。

3.在组件中使用import { 函数名 } from 外部脚本名来从外部js脚本中导入我们需要使用的函数。

import { Velocity } from '../config/velocity.js'

4. 在Vue组件中正常调用Velocity函数

enter: function (el, done) {      
    Velocity()      
},

方法四：import
自定义 rem.js 文件

//px=>rem
(function (doc, win) {
   var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
        var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
         if (clientWidth >= 840) {
                docEl.style.fontSize = '150px';
            } else if (clientWidth >= 640) {
                docEl.style.fontSize = '100px';
            } else {
                docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
            }
         };
         if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

index.js（或者main,js）中引入

import '../common-vue/rem';

单个的css文件

方法1.直接在style里这么写就ok啦

@import  "../static/font/iconfont.css";

方法2.@import改成引入外部样式