vue.js 全局应用js_Vue.js应用程序的可访问性审核

vue.js 全局应用js

视轴 (vue-axe)

Accessibility auditing for Vue.js applications.

Vue.js应用程序的可访问性审核。

View demo 查看演示 Download Source 下载源

安装套件 (Install package)

NPM (NPM)

npm install -D vue-axe

纱 (Yarn)

yarn add -D vue-axe

---

---

安装插件 (Install plugin)

import Vue from 'vue'

if (process.env.NODE_ENV !== 'production') {
  const VueAxe = require('vue-axe')
  Vue.use(VueAxe, {
    config: {
      // ...
      rules: [
        { id: 'heading-order', enabled: true },
        { id: 'label-title-only', enabled: true },
        // and more
      ]
    }
  })
  Vue.config.productionTip = false
}

Optional: You can also pass settings through the second parameter at the time of installing the plugin, read about the object here: https://github.com/dequelabs/axe-core/blob/master/doc/API.md#api-name-axeconfigure

可选：您也可以在安装插件时通过第二个参数传递设置，请在此处阅读有关对象的信息： https : //github.com/dequelabs/axe-core/blob/master/doc/API.md#api -name-axeconfigure

在Nuxt.js中安装 (Install in Nuxt.js)

Create plugin file plugins/axe.js

创建插件文件plugins/axe.js

import Vue from 'vue'

if (process.env.NODE_ENV !== 'production') {
  const VueAxe = require('vue-axe')
  Vue.use(VueAxe, {
    config: {
      // your configuration data
    }
  })
  Vue.config.productionTip = false
}

In config file nuxt.config.js

在配置文件nuxt.config.js

...
plugins: [
  { src: '~/plugins/axe', ssr: false }
]

与HTML文件一起使用 (Using with HTML files)

CDN (CDN)

<!-- Required Javascript -->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-axe"></script>

Vue.use(VueAxe, {
  config: {
    // your configuration data
  }
})

运行演示 (Run the demo)

git clone https://github.com/vue-a11y/vue-axe.git vue-axe-demo
cd demo
npm install
npm run dev

It is a simple webpack template already installed and configured to run and check the logs in the browser console. After the commands just access the http://localhost:8080/

这是一个简单的webpack模板，已经安装并配置为运行和检查浏览器控制台中的日志。 命令之后，只需访问http：// localhost：8080 /

运行测试 (Run the tests)

git clone https://github.com/vue-a11y/vue-axe.git vue-axe
npm install
npm run test

Or run Cypress on interactive mode

或在交互模式下运行赛普拉斯

npm run test:open

翻译自: https://vuejsexamples.com/accessibility-auditing-for-vue-js-applications/

vue.js 全局应用js