Neste tutorial do Pug.js, mostraremos como integrar Vue.js em um aplicativo de back-end usando Pug como um mecanismo de modelos.
Para obter uma introdução ao Pug.js, consulte “ Getting começou com Pug . ”
O que é Pug.js?
Pug.js , anteriormente conhecido como Jade, é um mecanismo de modelagem projetado para renderizar HTML em tecnologias do lado do servidor, como Node.js. Como qualquer mecanismo de modelagem JavaScript, o Pug.js oferece suporte à escrita de código HTML reutilizável e à renderização de dados dinâmicos.
Vue.js é uma estrutura progressiva para JavaScript que é usada para construir interfaces da web e aplicativos de página. Não apenas para interfaces da web, Vue.js também é usado para desenvolvimento de aplicativos para desktop e dispositivos móveis com o Estrutura do elétron .
Por que usar o Pug com Vue.js?
A maioria dos desenvolvedores de back-end opta por usar Pug com Vue.js porque é muito mais fácil de implementar e ler e não requer muita configuração. Qualquer HTML válido também é um modelo Vue.js válido. Usar Pug.js como um pré-processador para seus modelos Vue.js torna muito mais fácil migrar projetos existentes para aproveitar os recursos de reatividade do Vue.
Pug.js é frequentemente usado com tecnologias de back-end, como Express . js para modelagem, uma vez que compila em HTML. Ao contrário dos desenvolvedores de back-end, a maioria dos desenvolvedores de front-end acha o Pug frustrante de escrever e manter porque ele é sensível a espaços em branco, o que significa que ele usa recuo para determinar quais tags estão aninhadas umas dentro das outras.
Para acompanhar este tutorial, você deve ter conhecimento de JavaScript e Vue.js e experiência no uso de um editor de texto, como Código VS .
Configuração de um projeto Node.js
Ao configurar um projeto nodejs, precisamos inicializar um arquivo package.json para rastrear as dependências de nosso aplicativo usando o comando npm init-y .
A seguir, criaremos um arquivo index.js , que será nosso arquivo Node.js raiz. Usaremos Express.js para nosso servidor, por isso precisamos instalar o Express, importá-lo para nosso arquivo raiz index.js e criar uma instância dele. Usaremos a instância para ouvir uma porta em execução em 3000 .
Instalação de Express.js em um aplicativo Node.js
Para instalar Express.js, abra seu terminal e digite npm i express --``save .
let express=require ('express');
deixe app=express (); app.get ('/', (req, res)=> res.json ({msg:"Hello World"})) app.listen (3000, ()=> console.log ('Teste em execução'))
Para executar o aplicativo, abra seu terminal e digite node index.js . Este comando exibirá Test running no terminal, o que significa que o servidor está em execução. Agora podemos acessar nosso aplicativo em http://localhost: 3000/ em nosso navegador:
Configurando Pug.js
Para configurar o Pug como seu mecanismo de modelagem, primeiro instale-o executando npm install pug .
Após instalar o Pug, precisamos defini-lo como o mecanismo de modelagem Express padrão e também apontar para um diretório onde todos os nossos modelos serão definidos. Podemos modificar nosso arquivo index.js para este:
let express=require ('express');
deixe pug=exigir ("pug")
let path=require ('path')
deixe app=express (); app.set (path.join (__ dirname,'./views'))
app.set ('ver motor','pug') app.get ('/', (req, res)=> res.render ('home')) app.listen (3000, ()=> console.log ('Teste em execução'))
Observe que exigimos o módulo Node.js path , que fornece utilitários para trabalhar com caminhos de arquivo e diretório.
Vamos criar um diretório views onde definiremos todos os nossos modelos de Pug. Usaremos o módulo path para direcionar o diretório views e defini-lo como o diretório raiz para todos os nossos modelos.
A seguir, crie um arquivo home.pug dentro do diretório views e adicione este:
.container h1 Hello World
Nosso aplicativo agora renderizará Hello World no navegador porque alteramos a rota para renderizar o modelo home.pug . Observe como Pug usa recuo para descobrir quais tags estão aninhadas umas dentro das outras.
Usando Pug com Vue.js
Para configurar o Vue.js em nosso modelo Pug, precisamos instalar e configurar o webpack .
webpack é basicamente um empacotador de módulos. Seu objetivo principal é agrupar arquivos JavaScript para uso em um navegador.
Para instalar o webpack e seu CLI, abra o terminal e digite o seguinte:
npm i-D webpack webpack-cli
Depois de instalar o webpack, precisamos instalar alguns outros pacotes para ajudar a inicializar o Vue.js:
-
vue-loader, um carregador para webpack que permite a você configurar componentes Vue.js como um componente de arquivo único -
vue-loader-plugin, que ajuda a resolver problemas de compatibilidade com configurações do Webpack5. -
vue-template-compiler, que é usado para pré-compilar modelos Vue.js 2.0 em funções de renderização para evitar sobrecarga de compilação em tempo de execução e restrições de CSP. -
css-loader, que interpreta e resolve@importeurl ()comoimport/require ()
Para instalar esses pacotes, abra seu terminal e digite o seguinte:
npm i-D vue-loader vue-loader-plugin vue-template-compiler css-loader
O sinalizador -D instalará esses pacotes como uma dependência de desenvolvimento.
Em seguida, temos que instalar babel , um conjunto de ferramentas usado principalmente para converter o código ECMAScript 2015+ em uma versão compatível com versões anteriores do JavaScript em navegadores e ambientes atuais e mais antigos. Com isso instalado, podemos usar coisas como importar e export em nosso arquivo JavaScript.
Começaremos instalando o babel-watch usando npm, executando npm i babel-watch em nosso terminal e, em seguida, instalando o babel-core e babel-loader como uma dependência de desenvolvimento:
npm i-D babel-core babel-loader
Vamos criar um diretório client onde escreveremos nossos códigos Vuejs. Dentro do diretório, crie um arquivo home.js e adicione o seguinte:
importar Vue de"vue";
let app=new Vue ({ el:'#home', dados: { nomes: ['Sabedoria',"Ekpot","Ubongabasi"] }, métodos: { logSomeThing () { retornar'Hello Wisdom Ekpot' } }, montado () { console.log (this.logSomeThing ()); }
})
Se você está familiarizado com o Vue.js, deve reconhecê-lo como uma configuração simples do Vuejs. Aqui, o elemento raiz tem como alvo um div com um id de home . Assim que o modelo é montado, o método logSomething é chamado, o qual é definido no objeto métodos .
Para incluir isso em nosso arquivo Pug, teremos que adicionar algumas configurações do webpack. Vamos criar um arquivo webpack.config.js , importar webpack e escrever algumas configurações para Vue.js.
Começaremos importando webpack, path e VueLoaderPlugin :
const webpack=require ('webpack');
const path=require ('path');
const VueLoaderPlugin=require ('vue-loader/lib/plugin');
Nossa configuração do webpack será envolvida em um objeto config . Começaremos definindo o modo como desenvolvimento e também definiremos nosso arquivo de entrada.
Depois de definir um arquivo de entrada, precisamos definir uma saída onde todo o código transcompilado será armazenado. A propriedade output informa ao webpack onde emitir os pacotes que ele cria e como nomear esses arquivos. Basicamente, o webpack pega nosso código Vue.js e o transcompila para o JavaScript vanilla.
const config={ modo:'desenvolvimento', entrada: { 'home':'./client/home.js', }, resultado: { caminho: path.resolve (__ dirname,'public/js'), nome do arquivo:'[nome].bundle.js' },
}
Criaremos um diretório public para armazenar nosso código compilado. Também precisamos criar algumas regras do webpack a serem usadas quando a regra corresponder. Essas regras são avaliadas apenas quando a condição da regra pai corresponde. Cada regra aninhada pode conter suas próprias condições.
módulo
: { regras: [ { teste:/\.vue$/, loader:'vue-loader' }, { teste:/\.js$/, use:'babel-loader', excluir:/node_modules/ }, { teste:/\.css$/, usar: [ 'vue-style-loader', 'css-loader' ] } ] },
Basicamente, o webpack verifica se há alguma extensão de arquivo .vue e usa o plug-in vue-loader para agrupá-lo ao JavaScript.
Também precisamos definir um objeto resolver para configurar como os módulos são resolvidos:
resolver: { alias: { 'vue $':'vue/dist/vue.esm.js' }, extensões: [ '.js', '.vue' ] },
Em seguida, precisamos definir uma nova instância de VueLoaderPlugin para ajudar a lidar com algumas configurações de Webpack 5 :
plug-ins: [ new VueLoaderPlugin (), ],
Depois de fazer isso, temos que exportar nosso objeto config :
module.exports=config;
Para inicializar esta configuração do webpack, precisamos adicionar alguns scripts em nosso arquivo package.json para inicializá-lo:
"watch":"babel-watch--watch-index", "dev":"npm run watch & npm run client: build-dev", "client: build-dev":"webpack--watch"
O comando client: build-dev iniciará o Bootstrap e observará nossos arquivos para quaisquer alterações. Para iniciar o aplicativo, execute npm run dev em seu terminal.
Agora podemos modificar nosso arquivo home.pug para este:
.container # home h1 Hello World script (src="/js/home.bundle.js")
Se executarmos npm run dev em nosso terminal, ele criará um arquivo home.bundle.js dentro de nosso diretório público, que é nosso código transcompilado.
Se olharmos para o console do nosso navegador, veremos o método logSomeThing () impresso:
O acima indica que Vue.js está sendo usado em nosso modelo Pug.
A última coisa que precisamos fazer é criar um arquivo .gitignore e adicionar o seguinte:
public/js node_modules
Isso impedirá que o diretório node_modules e o diretório public sejam confirmados no git.
Conclusão
Ao trabalhar com tarefas de front-end grandes e complexas em seu back-end, usar o Pug com Vue.js é uma ótima maneira de simplificar e escalar o processo de desenvolvimento.
O código-fonte do exemplo usado neste artigo está disponível em GitHub .
A postagem Usando Pug.js com Vue.js apareceu primeiro no LogRocket Blog .
