vue里面的全局变量那些事

一、SCSS 全局变量设置

一般项目需要全局的一个是变量，一个是公共的样式（mixin）。我们在assets新建目录如下：

// index 文件内容
// 这个在main.js 中导入无效， 使用sass-resources-loader在vue.config.js中配置
// 全局sass文件，里面不要包含任何会被编译成css的代码，因为它们会被应用到每一个sass文件中，出现多个相同的样式
@import './mixins';
@import './var';

先安装2个库，这两个东西的版本真是麻烦，先看版本问题记录

npm install node-sass --save --dev
npm install sass-loader --save --dev

在vue.config.js 中配置

 css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/assets/style/scss/index.scss";`
      }
    }
  },

注意sass-loader不同的版本，选项名称也不同：

sass-loader v8- ： 选项名为 data
sass-loader v8 中： 选项名为 prependData
sass-loader v8 中： 选项名为 additionalData

这样就能再任意vue文件中使用变量和函数了

color: $blue;
@include box-default;

版本问题记录：
之前使用过 sass-resources-loader， 发现一个神奇的问题，一旦离开该分支再回来，就开始报错，变量找不到。 后来改用sass-loader， 配置删除了，但是库没uninstall， 还是会出现之前的问题， sass-resources-loader uninstall 之后就好了。

参考博文：解决vue中使用scss时，依赖node-sass和sass-loader的版本问题：

webpack4 使用 sass-loader， 存在版本问题， 不能用过高的版本，历史版本信息查询：
node-sass: https://github.com/sass/node-sass/tags
sass-loader: https://github.com/webpack-contrib/sass-loader/tags

可使用版本：

 //卸载
npm uninstall sass-loader node-sass   

//安装对应的版本
npm install sass-loader@7.3.1 node-sass@4.14.1  --save-dev 
或者
npm install sass-loader@10.2.0 node-sass@6.0.1 --save-dev

二、设置全局函数

在assets的js中创建common.js， 用来设置需全局引入的函数文件

import { zhaohu } from "@/assets/js/ui/zhaohu.js"
import { notExist } from "@/assets/js/ui/notExist.js"

//全局函数
exports.install = function(Vue, options) {
  Vue.prototype.zhaohu = zhaohu
  Vue.prototype.notExist = notExist
}

在main.js中设置，将全局函数当做插件来进行注册

import common  from "@/assets/js/common.js";
Vue.use(common);

二、设置全局混入（mixin）

在src下新建一个mixin文件夹，里面放置各种混入js， 需要全局使用的js文件就在main.中导入

// 比如： 新开页面的混入
import openPage from '@/mixins/open-page.js';
Vue.mixin(openPage)

三、设置全局组件

在components中新建一个global文件夹，里面的index.js 用来注册所有的公共组件。

import Vue from 'vue'

const componentsContext = require.context('./', true, /\.vue$/);

componentsContext.keys().forEach(component => {
  const componentConfig = componentsContext(component);
  // 兼容import export和require module.export两种规范
  const ctrl = componentConfig.default || componentConfig;
  // 加载全局组件
  if (ctrl && ctrl.name) {
    Vue.component(ctrl.name, ctrl);
  }
})

比如有个全局组件CButton.vue，这个里面封装了一些样式，处理了按钮的防抖事件组件。这个组件一定要写name。

<template>
  <el-button>
    <slot></slot>
  </el-button>
</template>

<script>
export default {
  name: 'CButton',
}

最后，在main.js 中导入即可

import '@/components/global';

四、设置全局指令

在src下新建一个directives文件夹， 在main.js 中导入即可

import '@/directives';

五、设置全局样式

// 在main.js 中导入即可
// 这个里面有reset element的全局样式，必须放在elementui样式的后面，不然无法覆盖
import '@/assets/style/index.scss';

// 字体图标文件
import '@/assets/icon/iconfont.css';

// 如果有自己的字体文件
import '@/assets/font/font.css';

::v-deep .el-main {
    //FIXME el-main中设置为auto，使得内部组件的阴影设置不显示
    overflow: visible;
  }

媒体查询和scss
只能 @mixin 不能 @extend