vmc

Vmc

Componentes móveis para [email protected]+.

Se você precisar usar o VMC no vue1.x, consulte a ramificação @1x.

Ver demos

Introdução ao recurso

VMC é uma biblioteca de componentes desenvolvida para terminais móveis, adequada para [email protected]+ .

• Globalize componentes com alta frequência de uso e registre -os diretamente em objetos de instanciação de vue;
• Todos os estilos são baseados em menos e permitem a inicialização rápida dos estilos de componentes, substituindo menos variáveis;
• Ao mesmo tempo, você também pode optar por usar o SASS e também fornecemos uma folha de estilo com base no SCSS;
• O estilo de cada componente pode ser definido individualmente por meio de atributos (escreva em estilo para que o estilo global definido em menos possa ser substituído).

Como citar

Modo de spa baseado em Webpack

Instalação e referência

$ npm install vmc --save

Registrar componentes globais

Adicione o seguinte ao arquivo de entrada:

 import VMC from 'vmc/install' ;

Vue . use ( VMC ) ; 

Apresentando estilos de componentes

Com menos sobreposição variável, alguns estilos iniciais de componentes podem ser personalizados; portanto, menos arquivos precisam ser introduzidos manualmente.

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

Ou use a substituição da variável SASS para personalizar alguns estilos iniciais de componentes e você também precisa introduzir manualmente arquivos SCSS.

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

Componentes de referência

 import { Navbar } from 'vmc' ;

Referência regular de tags

Instalação e referência

Faça o download diretamente vmc.css e vmc.js no diretório 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 > 

Registrar componentes globais

Este método registra automaticamente componentes globais e registra automaticamente todos os componentes sem operações adicionais.

Lista de componentes

Componentes CSS

• Icono Icon (ícone)

• Borda de 1 px (borda 1px)

• Logotipo (crachá)

• Alinhamento de ambas as extremidades (justificar)

• Omissão de texto (Nowrap)

• DOT vermelho

Componentes js

• ACTIONSHEET

• Caixa de aviso (alerta)

• Caixa de espaço reservado (caixa)

• Botão

• Cartão

• Coluna única (célula)

• Caixa de seleção

• Confirmar

• Caixa de diálogo

• Refresh de paginação (DropLoad)

• Grade

• Caixa de entrada forçada (Minput)

• Caixa de entrada imediata (vinput)

• Alinhamento de ambas as extremidades (justificar)

• Rolling anúncio (marquise)

• Navi

• Entrada digital (número)

• Sobreposição

• Picker

• Camada pop -up (pop -up)

• Seletor pop -up

• Phop -up Date Picker

• ProgressBar

• Caixa de entrada imediata (prompt)

• Caixa de rádio

• Classificação (avaliador)

• Linha do título

• Imagem do carrossel (controle deslizante)

• Indicador Dinâmico (Spinner)

• Enviar o botão (envie)

• Barra de navegação (Tabbar)

• TabControl

• Textarea

• Interruptor (alternar)

• Prompt de carregamento

• Prompt de sucesso (sucesso)

• Prompt de erro (erro)

• Prompt de informação (informações)

• Prompt de texto (brinde)

• Componente de upload (upload)

Desenvolvimento e compilação

Desenvolvimento

 $ npm run dev

Após a execução do comando, os arquivos no diretório examples serão executados automaticamente para desenvolvimento e depuração.

liberar

 $ npm run release

Depois que o comando for executado, vmc será publicado no diretório dist .

Compilação

 $ npm run build

Depois que o comando for executado, os arquivos no diretório examples serão automaticamente empacotados no diretório docs .

Visualização

 $ npm run docs

Depois que o comando for executado, o diretório docs será usado como um recurso de servidor de documentos estáticos e pode ser acessado diretamente do navegador.

Licença

Mit