Se você não leu a Parte 1, pode corrigir este mal-entendido aqui .
Reutilizando configurações
A nova biblioteca vue-cli-3 elimina a necessidade de oferecer suporte a padrões e configurações de construção complexos. Em vez disso, permite que o desenvolvedor se concentre na criação de seu aplicativo. Ele também possui funcionalidades pouco conhecidas que podem aumentar significativamente sua eficiência. Se você não tiver o vue-cli-3 instalado, poderá instalá-lo fazendo:
instalação @ vue / cli
yarn global add @vue/cli
Um dos benefícios não detectados são as predefinições remotas . Eles permitem que você defina um conjunto explícito de plug-ins e suas opções ao criar um novo projeto no Vue. Você pode instalar explicitamente versões desses plugins para definir melhor a funcionalidade. Se você usou o vue-cli-3, provavelmente encontrou esse problema ao criar um novo aplicativo:
criar vue-cli-3
Na opção "Seleção manual", você recebe uma lista de pacotes que podem ser pré-instalados com seu novo aplicativo. Neste artigo, selecionarei algumas opções de configuração padrão, como vue-router e vuex, e depois passarei para as seguintes consultas.
Configurações manuais
Após concluir as consultas, o vue-cli perguntará se você deseja salvar essa predefinição para projetos futuros. Isso é muito útil quando você está criando vários aplicativos e sabe quais parâmetros deseja para cada instalação.
Predefinições locais
Quando você salvar a configuração como predefinida, ela estará disponível na próxima vez que a criação do vue for executada.
A partir deste momento, nosso aplicativo instala as dependências e ainda temos o aplicativo Vue finalizado. Mas e as predefinições? Vamos dar uma olhada no arquivo .rc que o cli criou. Ele será localizado no diretório inicial e chamado .vuerc .
arquivo ~ / .vuerc
Hoje vamos usar essa configuração para criar nossa própria predefinição, que pode personalizar remotamente qualquer novo projeto em que estamos trabalhando.
Criar predefinição
Vamos criar uma nova pasta my-preset e copiar a configuração padrão no arquivo preset.json . Você deve ter notado acima que os parâmetros de configuração foram passados para o cli-plugin-eslint. Como todos os plugins vue-cli-3 usam inquirir para obter respostas do usuário, podemos fornecer opções e ignorá-los.
Se você for ao repositório vue-cli-3 e acessar os pacotes disponíveis, encontrará todos os plug-ins acima no diretório @vue.
Vue-cl monorepo
Cada pacote possui uma lista de opções para as quais podemos conectar as configurações padrão. Primeiro, vamos conectar o plugin vuetify-cli-plugin . A abertura do arquivo prompts.js revelará todas as opções disponíveis que podemos pré-configurar nos plugins. Vamos adicionar estas opções à predefinição:
Opções de plug-in do Vuetify
Nesse estágio, qualquer plug-in cli que você deseja adicionar pode ser feito adicionando uma nova propriedade ao plug - in e explorando os parâmetros disponíveis que precisam ser configurados.
Criação de plugins
Esta será uma implementação muito simples do plugin vue-cli-3. Para uma caminhada mais avançada, visite a documentação oficial .
Dependendo das suas configurações, você pode ter funções existentes no aplicativo que gostaria de automatizar usando o vue-cli. Você pode fazer isso sem criar um pacote explícito, mas digamos que deseja que ele seja descoberto pelo @ vue / cli-service e tornado público por outros desenvolvedores.
Crie um novo projeto chamado vue-cli-plugin- <nome do seu plugin> .
Crie um novo pacote
Para este plugin, queremos alterar a configuração eslint de nosso aplicativo adicionando
eslint-config-vuetify .
Para fazer isso, criaremos um arquivo gerador que diz ao vue-cli para adicionar um novo pacote e atualizar a configuração do eslint.
Para todos os meus projetos, eu uso eslint-config-vuetify e gostaria de carregar isso nos meus projetos.
Arquivo gerador Vue-cli
Aqui estou configurando uma extensão básica de pacote. Os arquivos do gerador devem exportar a função e fornecer acesso para modificar os arquivos do projeto. Essa função informa ao cliente para adicionar a configuração eslint como uma dependência e atualizar a configuração do projeto.
Depois de postar no npm, o vue-cli agora pode pegar o pacote para ser usado por outras pessoas!
Vamos voltar e atualizar nossa predefinição com um novo plugin.
Adicionando um novo plugin a uma predefinição
Agora é hora de aceitar nosso aplicativo de rotação. Podemos criar um novo projeto dizendo ao vue para usar a predefinição.
| vue create my-app --preset vuetifyjs/vue-cli-preset-vuetify |
E pronto! Uma linha e temos um ponto de partida reutilizável para novos projetos pré-configurados como desejamos. Se você quiser discutir este artigo, não hesite em entrar em contato comigo na comunidade Discord .
Repositórios
vue-cli-preset-vuetify
vue-cli-preset-vuetify