vue可扩展的前端应用构建_轻松构建可扩展且可访问的Vue.js应用程序

vue可扩展的前端应用构建

Chakra-ui-vue (chakra-ui-vue)

chakra-ui-vue gives you a set of accessible and composable Vue components that you can use to build your favourite applications and sites.

chakra-ui-vue为您提供了一组可访问且可组合的Vue组件，可用于构建自己喜欢的应用程序和站点。

View Demo 查看演示 View Github 查看Github

安装 (Installation)

yarn add @chakra-ui/vue emotion

or

要么

npm install @chakra-ui/vue emotion

Note: If you're using Nuxt, you need to install @nuxtjs/emotion package as well to server-side render your styles.

注意：如果您使用的是Nuxt，则还需要安装@nuxtjs/emotion包，以在服务器端呈现样式。

yarn add @chakra-ui/vue emotion @nuxtjs/emotion

用法 (Usage)

1. Import the Chakra UI plugin in your main.js file.

1.在您的main.js文件中导入Chakra UI插件。

import Vue from 'vue'
import Chakra from '@chakra-ui/vue'
import App from './App.vue'

Vue.use(Chakra)

new Vue({
  el: '#app',
  render: (h) => h(App)
}).$mount()

2. Wrap your application inside the Chakra ThemeProvider. We also recommend that you include the CSSReset component to normalize all browser styling.

2.将应用程序包装在Chakra ThemeProvider 。 我们还建议您包括CSSReset组件以规范所有浏览器样式。

In your App.vue file.

在您的App.vue文件中。

If you'd like to toggle your app between dark and light mode, you can also wrap your application inside the ColorModeProvider component.

如果您想在黑暗和明亮模式之间切换应用程序，还可以将应用程序包装在ColorModeProvider组件内。

3. Hurray! Now the fun can begin. You can start using components like so:

3.万岁！现在可以开始乐趣了 。 您可以像这样开始使用组件：

Codesandbox启动器 (Codesandbox starters)

• Vue Starter

  Vue启动器

• Nuxt Starter

  Nuxt启动器

故事书组件 (Storybook Components)

You can also view all developed components in Storybook!

您还可以在Storybook中查看所有开发的组件！

发展贡献： (Development for Contributing:)

Interested in contributing? See our open issues! Remember to take a look at our CONTRIBUTORS guide.

有兴趣贡献吗？ 查看我们的未解决问题 ！ 记住要看一下我们的《 贡献者》指南。

yarn install
yarn bootstrap
yarn dev

项目待办事项： (Project TODOs:)

• [ ] Documentation site (Ongoing)

  []文档站点(正在进行)

• [ ] Set up type system for plugin & components export with Typescript

  []使用Typescript设置用于插件和组件导出的类型系统

翻译自: https://vuejsexamples.com/build-scalable-and-accessible-vue-js-applications-with-ease/

vue可扩展的前端应用构建