qui下载 - qui源代码下载

vue.js neumorthism web设计系统

响应迅速，用户友好且轻巧的库，可帮助我们为客户建造出色的产品。这个库2.x的库

‼️目前，我们正在为Vue 3.x使用Qui Max，它更复杂，更现代的版本 - 我们建议使用它而不是此软件包。 Qui仍然是Vue 2.X的，但我们不能声称它将得到很好的支持。

故事书（现场演示）

这是什么？

？ 30多个VUE组件
？图标包
？？颜色和网格
？新态风格
故事书沙箱

下面的一些示例：

datepicker

安装

CDN：

 <!-- import CSS -->
< link rel =" stylesheet " href =" https://unpkg.com/@qvant/qui/dist/qui.css " />
<!-- import JavaScript -->
< script src =" https://unpkg.com/@qvant/qui/dist/qui.umd.min.js " > </ script >

npm |纱：

npm install @qvant/qui -S
yarn add @qvant/qui

您可以完全导入qui，也可以导入所需的内容。让我们从完全导入开始。

快速设置

在main.js中：

 import Vue from 'vue' ;
import Qui from '@qvant/qui' ;
import '@qvant/qui/dist/qui.css' ;

// Setup all components
Vue . use ( Qui ) ;
// that's it! All components will be imported with styles

在yourcomponent.vue ：（示例）

< template >
  < q-input v-model = " value " />
</ template >
< script >
export default {
  data () {
    return {
      value : ' '
    };
  },
  mounted () {
    // the modals have shortcuts in your components:
    this . $notify ({ ... }) // calls QNotification
    this . $message ({ ... }) // calls QMessageBox
    this . $dialog ({ ... }) // calls QDialog
  }
};
</ script >

...或配置快速设置

在main.js中：

 import Vue from 'vue' ;
import Qui from '@qvant/qui' ;
import '@qvant/qui/dist/qui.css' ;

Vue . use ( Qui , {
  localization : {
    locale : 'en' , // Russian language by default, you can set `en` for English
    customI18nMessages : {
      // rewrite default texts, see the source: src/qComponents/constants/locales
      en : {
        QDatepicker : {
          placeholder : 'Pick your birthday!'
        }
      }
    } ,
    zIndexCounter : 3000 , // zIndexCounter is being used by some components, (e.g QPopover, QSelect, QDialog ...etc), 2000 by default
    prefix : 'yo' // you can change component's prefix, e.g. must be used <yo-input /> instead of <q-input />
  }
} ) ;

在yourcomponent.vue ：（示例）

< template >
  <!-- placeholder is changed on 'Pick your birthday!' -->
  < yo-datepicker v-model = " value " type = " date " />
</ template >
< script >
export default {
  data () {
    return {
      value : null
    };
  }
};
</ script >

现在，您已经对项目实施了VUE和Qui，现在该编写代码了。请参考每个组件的故事，以了解如何使用它们。

不快速设置

如果您有一个模块Bundler（例如WebPack），则可以单独导入组件并注意捆绑包大小

在main.js中：

 // import the main plugin from another place (it ensures Qui will be installed without any components, but instance will set required properties and directives)
import Qui from '@qvant/qui/src/onDemand' ;

// import the component you want
import QButton from '@qvant/qui/src/qComponents/QButton' ;
// ...or in async way
Vue . component ( 'q-button' , ( ) =>
  import ( /* webpackChunkName: "qui" */ '@qvant/qui/src/qComponents/QButton' )
) ;

// init
Vue . use ( Qui ) ;
Vue . use ( QButton ) ;

在main.scss中：

 // need to set the path for files with statics
$--base-path : ' ~@qvant/qui/src ' ;
// set main styles
@import ' ~@qvant/qui/src/main.scss ' ;
// notice that you must use `fonts` and `icons` styles for some of components:
@import ' ~@qvant/qui/src/fonts/index.scss ' ;
@import ' ~@qvant/qui/src/icons/index.scss ' ;

导入所有样式：

 @import ' ~@qvant/qui/src/components.scss ' ;

...或单独组件：

 @import ' ~@qvant/qui/src/qComponents/QBreadcrumbs/src/q-breadcrumbs.scss ' ;
@import ' ~@qvant/qui/src/qComponents/QButton/src/q-button.scss ' ;
// ...etc

选修的

如果您想在组件中使用模式作为“此”的属性：

 import { QMessageBox , QDialog , QNotification } from '@qvant/qui' ;
// or import separately
import QMessageBox from '@qvant/qui/src/qComponents/QMessageBox' ;
import QDialog from '@qvant/qui/src/qComponents/QDialog' ;
import QNotification from '@qvant/qui/src/qComponents/QNotification' ;

Vue . prototype . $message = QMessageBox ;
Vue . prototype . $dialog = QDialog ;
Vue . prototype . $notify = options =>
  QNotification ( {
    duration : 3000 , // - ms
    ... options
  } ) ;

如果使用VUEI18N，则需要合并消息：

 import VueI18n from 'vue-i18n' ;
import { en , ru } from '@qvant/qui/src/qComponents/constants/locales' ;

Vue . use ( VueI18n ) ;

const messages = {
  en : {
    message : {
      hello : 'hello world'
    } ,
    ... en
  } ,
  ru : {
    message : {
      hello : 'привет, мир'
    } ,
    ... ru
  }
} ;

const i18n = new VueI18n ( {
  locale : 'en' ,
  messages
} ) ;

new Vue ( {
  i18n
} ) . $mount ( '#your-app' ) ;