Стандартизированная система проектирования на Vue. Помогает командам быстро создавать и поддерживать качественные современные продукты и обмениваться решениями.
npm install @central-design-system/components
OR
yarn add @central-design-system/componentsTo use CDS in your Vue.js project, add this code:
import Vue from 'vue';
import Cds from '@central-design-system/components';
import '@central-design-system/components/dist/cds.css';
Vue.use(Cds);There are cases that in your project you only need some components of CDS and for this you can add them as follows
import Vue from 'vue'
import { CdsButton, CdsCheckbox, CdsTag } from '@central-design-system/components'
import '@central-design-system/components/dist/cds.css';
new Vue({
el: '#app',
components: {
CdsCheckbox, CdsButton, CdsTag
}
});To use CDS in your Nuxt.js project
Create file plugins/cds.js with code:
import Vue from 'vue';
import Cds from '@central-design-system/components';
Vue.use(Cds);// nuxt.config.js
export default {
css: ['@central-design-system/components/dist/cds.css'],
plugins: ['~plugins/cds']
}You can use CDS by loading it via cdn by adding a <script> tag to your project
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/@central-design-system/components/dist/cds.min.css" rel="stylesheet">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<div id="app">
<cds-button>Hello World</cds-button>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/@central-design-system/components/dist/cds.min.js"></script>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>You need use css-vars-ponyfill in your application