- \n
- Descri\u00e7\u00e3o do ambiente utilizado<\/li>\n\n\n\n
- Composer<\/li>\n\n\n\n
- NVM (Node Version Manager)<\/li>\n\n\n\n
- Node<\/li>\n\n\n\n
- Laravel 9<\/li>\n\n\n\n
- VueJS 3<\/li>\n\n\n\n
- Vite<\/li>\n\n\n\n
- Exemplo pr\u00e1tico<\/li>\n\n\n\n
- Refer\u00eancias<\/li>\n<\/ul>\n\n\n\n
\n\n\n\n- \n
- Descri\u00e7\u00e3o do artigo<\/strong>
Nessa configura\u00e7\u00e3o ser\u00e3o utilizados o framework Laravel 9.x, VueJS 3 em conjunto com Vite para a estrutura\u00e7\u00e3o do front-end. E utilizaremos o Composer e o NPM para gerenciar mais facilmente as depend\u00eancias dessa estrutura.
Aqui vamos utilizar um ambiente Windows com WSL2 o que, em tese, deve seguir os mesmos passos, caso o mesmo seja realizado em um ambiente Linux\/Ubuntu.<\/li>\n<\/ul>\n\n\n\n
\n\n\n\n- \n
- Composer\/NVM\/Node<\/strong>
– Para instalar o Composer, basta efetuar o download aqui<\/a>, e seguir as instru\u00e7\u00f5es do site oficial. A instala\u00e7\u00e3o do mesmo \u00e9 bastante simples.
– J\u00e1 o NVM, iremos fazer a instala\u00e7\u00e3o dentro do WSL2. Por seguran\u00e7a, desinstale todas as vers\u00f5es do NODE j\u00e1 instaladas e pelo terminal (j\u00e1 dentro do WSL), basta utilizar o curl ou o wget:
curl -o- https:\/\/raw.githubusercontent.com\/nvm-sh\/nvm\/v0.39.5\/install.sh | bash
ou
wget -qO- https:\/\/raw.githubusercontent.com\/nvm-sh\/nvm\/v0.39.5\/install.sh | bash
Conforme \u00e9 citado na documenta\u00e7\u00e3o oficial<\/a>.
Feito isso, vamos digitar o comando “nvm install v18.17.1”, onde v18.17.1 \u00e9 a vers\u00e3o do node que iremos instalar. Sinta-se a vontade para testar outras vers\u00f5es. Com o NVM \u00e9 poss\u00edvel instalar mais de uma vers\u00e3o e selecionar qual que pretendemos utilizar no momento.
Para verificar as vers\u00f5es do node instaladas, utilize o comando “nvm list”. E caso queira trocar de vers\u00e3o, basta utilizar “nvm use vXX.XX.X”.
Com esses passos, j\u00e1 temos nossa tr\u00edade Composer\/NVM\/NodeJs prontos para iniciar a constru\u00e7\u00e3o da aplica\u00e7\u00e3o.<\/li>\n<\/ul>\n\n\n\n
\n\n\n\n- \n
- Laravel 9<\/strong>
A documenta\u00e7\u00e3o do Laravel <\/a>\u00e9 bastante completa e estarei aqui apenas mencionando os comandos necess\u00e1rios para uma nova instala\u00e7\u00e3o.
Lembrando que estamos utilizando o terminal do WSL, execute:
composer create-project laravel\/laravel:^9.0 nome-pasta-app
Aguarde a instala\u00e7\u00e3o terminar e caso exiba a pergunta “Do you want to remove the existing VCS (.git, .svn..) history?” utilize a op\u00e7\u00e3o “Y”, pois estamos criando um projeto pr\u00f3prio com create-project, por isso n\u00e3o h\u00e1 necessidade de termos o hist\u00f3rico do reposit\u00f3rio original.
Agora j\u00e1 podemos conferir a vers\u00e3o instalada com “php artisan –version” e verificar a mesma rodando com “php artisan serve”.
O comando –version deve apresentar algo do tipo “Laravel Framework 9.52.15”
E o serve deve exibir no terminal o endere\u00e7o:porta para acessar a aplica\u00e7\u00e3o e no navegador ir\u00e1 exibir a tela de boas vindas do Laravel, respectivamente, algo como:
<\/li>\n<\/ul>\n\n\n\n![\"\"](\"https:\/\/tiagofick.com.br\/site\/wp-content\/uploads\/2023\/09\/laravel-serve.png\")
<\/figure>\n<\/div>\n\n\n![\"\"](\"https:\/\/tiagofick.com.br\/site\/wp-content\/uploads\/2023\/09\/laravel-welcome-1024x470.png\")
<\/figure>\n<\/div>\n\n\n- \n
- Instala\u00e7\u00e3o do VueJS 3<\/strong>
Nosso pr\u00f3ximo passo \u00e9 instalar o VueJS 3 e suas depend\u00eancias.
Vamos come\u00e7ar navegando at\u00e9 a pasta do projeto e rodando o comando “npm install”, assim estaremos instalando todas as nossas depend\u00eancias de frontend.
O segundo passo \u00e9 instalar o Vue e o vue-loader (que \u00e9 utilizado para interagir com webpacks e possibilitar a manipula\u00e7\u00e3o de componentes com outros webpacks). Para isso vamos rodar o comando “npm install vue@next vue-loader@next”
<\/li>\n<\/ul>\n\n\n\n
\n\n\n\n- \n
- Instala\u00e7\u00e3o do Vite<\/strong>
E por fim, instalaremos o Vite utilizando “npm i @vitejs\/plugin-vue”.
O Vite nada mais \u00e9 do que um frontend builder. Ele ser\u00e1 o respons\u00e1vel por agrupar o seu c\u00f3digo (css e js) e disponibilizar em localhost:porta um ambiente de desenvolvimento em localhost.
Em seguida, vamos configurar o vite.config.js, designando os caminhos\/arquivos para que sejam criados bundles para a sua aplica\u00e7\u00e3o.
Abra o arquivo vite.config.js que est\u00e1 na raiz do projeto e substitua o conte\u00fado pelo c\u00f3digo abaixo:<\/li>\n<\/ul>\n\n\n\nimport { defineConfig } from 'vite';\nimport laravel from 'laravel-vite-plugin';\nimport vue from '@vitejs\/plugin-vue'\n\nexport default defineConfig({\n plugins: [\n vue(),\n laravel({\n input: ['resources\/css\/app.css', 'resources\/js\/app.js'],\n refresh: true,\n }),\n ],\n});<\/code><\/pre>\n\n\n\n- \n
- Ap\u00f3s essa altera\u00e7\u00e3o vamos iniciar a nossa aplica\u00e7\u00e3o pelo terminal chegando at\u00e9 a pasta raiz da mesma e rodando o comando “npm run dev”. Isso ir\u00e1 inicializar o servidor Vite que ir\u00e1 rodar em background, lendo os seus assets JS e CSS. Na verdade, nada mais \u00e9 do que um watch que ir\u00e1 escutar as altera\u00e7\u00f5es dos seus arquivos resources\/js\/app.js<\/em><\/strong> e resources\/css\/app.css<\/em><\/strong>.<\/li>\n<\/ul>\n\n\n\n
\n\n\n\n- \n
- Exemplo pr\u00e1tico<\/strong>
Ap\u00f3s toda a parte de configura\u00e7\u00e3o do framework, vamos criar alguns exemplos pr\u00e1ticos:\n- \n
- Criando um app Vue<\/strong>
No arquivo “resources\/js\/app.js” adicione o seguinte c\u00f3digo:<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\nimport {createApp} from 'vue';\nimport App from '.\/App.vue';\n\ncreateApp(App).mount(\"#app\");<\/code><\/pre>\n\n\n\n- \n
- Ainda dentro da pasta “resources\/js\/app.js”, crie um arquivo chamado “App.vue” e dentro dele cole o conte\u00fado a seguir:<\/li>\n<\/ul>\n\n\n\n
<template>\n Hello world!!!\n<\/template><\/code><\/pre>\n\n\n\n- \n
- Dentro da pasta “resources\/views”, crie um arquivo chamado app.blade.php e dentro dele vamos colar um c\u00f3digo html simples apenas para rodar o nosso app vue.<\/li>\n<\/ul>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <title>Laravel<\/title>\n\n @vite('resources\/css\/app.css')\n <\/head>\n <body class=\"antialiased\">\n <div id=\"app\"><\/div>\n \n @vite('resources\/js\/app.js')\n <\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n- \n
- Repare que temos uma div com o id=”app”, que \u00e9 onde nossa aplica\u00e7\u00e3o ser\u00e1 carregada, pois l\u00e1 no import utilizamos um “mount”, justamente passando esse atributo como seletor.
Depois, dentro do arquivo de rotas “routes\/web.php”, vamos adicionar uma rota para o nosso app:
<\/li>\n<\/ul>\n\n\n\nRoute::get(‘\/appvue’, function () {<\/p>\n\n\n\n
return view(‘app’);<\/p>\n\n\n\n
});<\/p>\n\n\n\n
- \n
- Feito isso, basta rodar o “php artisan serve”, acessar nossa rota citada acima e pronto, temos o nosso Laravel devidamente configurado com Vue 3 e o Vite para nos auxiliar com os webpacks.
Let’s code!!!!<\/li>\n<\/ul>\n\n\n\n
\n\n\n\n- \n
- Refer\u00eancias
https:\/\/getcomposer.org\/<\/a>
https:\/\/github.com\/nvm-sh\/nvm#installing-and-updating<\/a>
https:\/\/laravel.com\/docs\/9.x\/installation<\/a>
https:\/\/techvblogs.com\/blog\/how-to-install-vue-3-in-laravel-9-with-vite<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"Configurando o ambiente de desenvolvimento com Laravel 9, VueJs 3 e Vite<\/p>\n","protected":false},"author":1,"featured_media":3456,"comment_status":"open","ping_status":"closed","sticky":true,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[23,12,24,22],"class_list":["post-3458","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ambientes-de-desenvolvimento","tag-javascript","tag-php","tag-vitejs","tag-vuejs"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/tiagofick.com.br\/site\/wp-json\/wp\/v2\/posts\/3458","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tiagofick.com.br\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tiagofick.com.br\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tiagofick.com.br\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tiagofick.com.br\/site\/wp-json\/wp\/v2\/comments?post=3458"}],"version-history":[{"count":23,"href":"https:\/\/tiagofick.com.br\/site\/wp-json\/wp\/v2\/posts\/3458\/revisions"}],"predecessor-version":[{"id":3499,"href":"https:\/\/tiagofick.com.br\/site\/wp-json\/wp\/v2\/posts\/3458\/revisions\/3499"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tiagofick.com.br\/site\/wp-json\/wp\/v2\/media\/3456"}],"wp:attachment":[{"href":"https:\/\/tiagofick.com.br\/site\/wp-json\/wp\/v2\/media?parent=3458"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tiagofick.com.br\/site\/wp-json\/wp\/v2\/categories?post=3458"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tiagofick.com.br\/site\/wp-json\/wp\/v2\/tags?post=3458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Refer\u00eancias
- Feito isso, basta rodar o “php artisan serve”, acessar nossa rota citada acima e pronto, temos o nosso Laravel devidamente configurado com Vue 3 e o Vite para nos auxiliar com os webpacks.
- Repare que temos uma div com o id=”app”, que \u00e9 onde nossa aplica\u00e7\u00e3o ser\u00e1 carregada, pois l\u00e1 no import utilizamos um “mount”, justamente passando esse atributo como seletor.
- Dentro da pasta “resources\/views”, crie um arquivo chamado app.blade.php e dentro dele vamos colar um c\u00f3digo html simples apenas para rodar o nosso app vue.<\/li>\n<\/ul>\n\n\n\n
- Ainda dentro da pasta “resources\/js\/app.js”, crie um arquivo chamado “App.vue” e dentro dele cole o conte\u00fado a seguir:<\/li>\n<\/ul>\n\n\n\n
- Criando um app Vue<\/strong>
- Exemplo pr\u00e1tico<\/strong>
- Ap\u00f3s essa altera\u00e7\u00e3o vamos iniciar a nossa aplica\u00e7\u00e3o pelo terminal chegando at\u00e9 a pasta raiz da mesma e rodando o comando “npm run dev”. Isso ir\u00e1 inicializar o servidor Vite que ir\u00e1 rodar em background, lendo os seus assets JS e CSS. Na verdade, nada mais \u00e9 do que um watch que ir\u00e1 escutar as altera\u00e7\u00f5es dos seus arquivos resources\/js\/app.js<\/em><\/strong> e resources\/css\/app.css<\/em><\/strong>.<\/li>\n<\/ul>\n\n\n\n
- Instala\u00e7\u00e3o do Vite<\/strong>
- Instala\u00e7\u00e3o do VueJS 3<\/strong>
- Laravel 9<\/strong>
- Composer\/NVM\/Node<\/strong>
- Descri\u00e7\u00e3o do artigo<\/strong>