vue中如何全局使用Modernizr

在Vue.js项目中，现代izr是一个用于检测浏览器兼容性的JavaScript库，虽然它本身不是 Vue 的一部分，但可以很容易地全局引入并使用。以下是全局安装和使用的步骤：

1. **安装Modernizr**:
使用npm（Node Package Manager）安装Modernizr，打开终端或命令提示符，在项目的根目录下运行：

   npm install modernizr --save

如果你想使用ES6模块导入，可以添加`--save-dev`，并将 Modernizr 引入到 `src/main.js` 或 `main.ts`（对于TypeScript项目）。

2. **引入Modernizr**:
在`main.js`或`main.ts`中，通常放在脚本标签内加载Modernizr，并将其暴露给Vue的原型上以便全局访问：

   // main.js (for ES6 modules)
   import * as Modernizr from 'modernizr';
   Vue.prototype.$modernizr = Modernizr;

   // 或者 for CommonJS
   // const Modernizr = require('modernizr');
   // Vue.prototype.$modernizr = Modernizr;

3. **在Vue组件中使用**:
现在你可以在任何一个Vue组件的data选项或者计算属性里直接通过`this.$modernizr`来访问Modernizr提供的API了，例如检测某个CSS特性是否支持：

   export default {
     data() {
       return {
         supportsCSSFlexbox: this.$modernizr.flexbox,
       };
     },
     computed: {
       needsFallback() {
         return !this.supportsCSSFlexbox;
       }
     }
   };