vmc

VMC

Мобильные компоненты для [email protected]+.

Если вам нужно использовать VMC на vue1.x, ознакомьтесь с ветвью @1x.

Посмотреть демо

Введение функции

VMC - это библиотека компонентов, разработанная для мобильных терминалов, подходящая для [email protected]+ .

• Глобализировать компоненты с высокой частотой использования и зарегистрируйте их непосредственно на объектах vue instantiation;
• Все стили основаны на меньше и позволяют быстро инициализацию стилей компонентов путем перезаписи меньше переменных;
• В то же время вы также можете использовать SASS, и мы также предоставляем лист стиля на основе SCSS;
• Стиль каждого компонента может быть определен индивидуально через атрибуты (напишите в стиль, чтобы глобальный стиль, определенный в меньшем количестве, может быть перезаписан).

Как процитировать

Режим спа-салона на основе WebPack

Установка и ссылка

$ npm install vmc --save

Зарегистрировать глобальные компоненты

Добавьте следующее в файл входа:

 import VMC from 'vmc/install' ;

Vue . use ( VMC ) ; 

Представляем стили компонентов

С меньшей переменной наложением можно настроить некоторые начальные стили компонентов, поэтому необходимо ввести меньше файлов вручную.

 @import "vmc/src/styles/vmc.less" ;
@import "assets/less/vmc.custom.less" ;      // 自定义变量覆盖，参考styles/base/variable.less

Или используйте переопределение переменной SASS, чтобы настроить некоторые начальные стили компонентов, и вам также необходимо вручную ввести файлы SCSS.

 @import "assets/scss/vmc.custom.scss" ;      // 自定义变量覆盖，参考scss/base/variable.scss
@import "vmc/src/scss/vmc.scss" ;

Справочные компоненты

 import { Navbar } from 'vmc' ;

Обычная ссылка на тег

Установка и ссылка

Непосредственно загрузите файлы vmc.css и vmc.js в dist каталоге.

 < link rel =" stylesheet " href =" vmc.css " >

< div id =" app " >
    < v-button type =" success " @click =" $Alert('Hello world!') " >按钮</ v-button >
</ div >

< script src =" vue.js " > </ script >
< script src =" vmc.js " > </ script >

< script >
    new Vue ( {
        el : '#app'
    } ) ;
</ script > 

Зарегистрировать глобальные компоненты

Этот метод автоматически регистрирует глобальные компоненты и автоматически регистрирует все компоненты без дополнительных операций.

Список компонентов

Компоненты CSS

• Icono Icon (значок)

• 1px граница (граница 1PX)

• Логотип (значок)

• Выравнивание обоих концов (оправдание)

• Текстовое упущение (NOWRAP)

• Красная точка

JS Компоненты

• ActionSheet

• Предупреждающая коробка (предупреждение)

• Коробка заполнителя (коробка)

• Кнопка

• Карта

• Одиночный столбец (ячейка)

• Флажок

• Подтверждать

• Диалоговый ящик

• Обновление страниц (Dropload)

• Сетка

• Ящик принудительного ввода (minput)

• Приглашение ввода (Vinput)

• Выравнивание обоих концов (оправдание)

• Объявление обмота

• Навие

• Цифровой ввод (номер)

• Наложение

• Сборщик

• Всплывающий слой (всплывающее окно)

• Всплывающий сборщик

• Всплывающая дата выбора

• ProgressBar

• Приглашение ввода (приглашение)

• Радио коробка

• Рейтинг (Rater)

• Титульный ряд

• Изображение карусели (слайдер)

• Динамический индикатор (прядильщик)

• Кнопка отправки (отправить)

• Навигационная панель (Tabbar)

• Табконтроль

• Textarea

• Переключатель (переключатель)

• Загрузка

• Подсказка успеха (успех)

• Запрос ошибки (ошибка)

• Информационная подсказка (информация)

• Текстовое приглашение (тост)

• Загрузить компонент (загрузка)

Разработка и сборник

Разработка

 $ npm run dev

После выполнения команды файлы в каталоге examples будут автоматически запускаться для разработки и отладки.

выпускать

 $ npm run release

После выполнения команды vmc будет опубликована в dist Directory.

Компиляция

 $ npm run build

После выполнения команды файлы в каталоге examples будут автоматически упаковаться в каталог docs .

Предварительный просмотр

 $ npm run docs

После выполнения команды каталог docs будет использоваться в качестве ресурса статического сервера документов и может быть доступен непосредственно из браузера.

Лицензия

Грань