vin ui

Library de componentes leves do estilo JD, suportando o desenvolvimento de H5 e Mini Programa Mobile H5 e

---

Vinui refere-se ao design e implementação de Nutui (biblioteca de componentes móveis leves no estilo JD) e a versão da UNIAPP implementada com base na versão da biblioteca de componentes do Applet Taro Nutui-Vue

Modificações e ajustes foram feitos para alguns recursos da Uniapp, e alguns novos componentes foram adicionados, o que também aumentou as funções de alguns componentes.

Comece rapidamente

Você pode consultar a documentação do projeto: Iniciar rápido

Instalar

O Vinui fornece o pacote NPM e o pacote Uni_modules para instalar componentes.

Método 1: Instalação e operação do NPM

 # Using npm
npm install @vingogo/uni-ui

# Using yarn
yarn add @vingogo/uni-ui

# Using pnpm
pnpm add @vingogo/uni-ui

Método 2: Download do mercado de plug-in da Uniapp

Endereço do plug -in do mercado da Uniapp: https://ext.dcloud.net.cn/plugin?id=11187

Método 3: Faça o download do código

Faça o download do código Vinui através do Github e copie o código embalado para o seu próprio projeto:

1. Clonando o código do repositório:

git clone https://github.com/vingogo/vin-ui.git

2. Dependências de instalação:

pnpm i

3. No diretório packages/uni-ui , faça ajustes personalizados ao código Vinui que se adapta ao negócio
4. O código de construção gerará o arquivo JS compilado do arquivo TS original e o converterá para ES2015

pnpm run build:uni

Gerar arquivos para copiar em packages/uni-ui/uni_modules

Como usar

1. Adicione a configuração Easycom em pages.json :

{
  "easycom" : {
    // 此处根据实际文件位置进行修改，如下为通过 npm 包安装的方式配置
    "^vin-(.*)" : " @vingogo/uni-ui/lib/components/$1/index.vue "
  },
  // 此为本身已有的内容
  "pages" : [
    // ......
  ]
}

2. Apresente estilos

Adicione o seguinte código ao arquivo de entrada do projeto Main.ts ou Main.js Arquivo:

 import '@vingogo/uni-ui/lib/style.css' ;

3. Use no projeto:

< vin-button type="primary">button</ vin-button >

Operação do projeto

Recomenda -se o projeto usar o PNPM para instalar e executar e iniciar o projeto:

1. Dependências de instalação

pnpm i

2. Execute H5 ou Applet

pnpm run dev

3. Selecione o ambiente a ser executado com base nas opções interativas da linha de comando
4. Execute o código no navegador ou applet especificado para executar a pasta Exemplo/Dist/Dev

Construção de componentes Vinui

• Construa o código da versão npm:

pnpm run build:lib

Depois de executar o comando acima, o código para publicar o NPM será gerado em packages/uni-ui/lib

• Construa o código da versão uni_modules:

pnpm run build:uni

Após executar o comando acima, o código para publicar o mercado da UNIAPP será gerado em packages/uni-ui/uni_modules

Recursos de Vinui

• Mais de 50 componentes de alta qualidade, cobrindo cenários móveis mainstream
• ? Suporte a temas personalizados dinâmicos e temas personalizados no nível dos componentes
• Com base nas especificações da visão JD
• ? Apoie o modo escuro
• ? Suporta um conjunto de código para desenvolver applets H5+ multi-END ao mesmo tempo
• Suporta o destaque das propriedades do componente VSCODE
• ? Apoie citações sob demanda
• Documentação e exemplos detalhados
• ? Suporte TypeScript
• ? Apoie a internacionalização

Link

• Documentação de uso de componentes
• Github
• Gitee
• Plugin de mercado da Uniapp

conectar

Em relação aos problemas de Vinui, adicione o WeChat à troca. Observe: Vinui