Começar no Vuejs é algo muito simples, o mais incrível é que você não precisa criar seu App com Vuejs para usar o Vuejs, você pode também utilizar o Vuejs para criar seu ambiente de forma muito eficaz e rápida, ou seja, com apenas alguns comandos você já cria um ambiente Node pronto para editar e com Wysiwyg.
Para isso, você só precisa do NPM já funcionando para poder instalar o Vuejs de forma Global, já sabe a diferença entre as formas de instalação do NPM? vamos dar uma rápida olhada:
devDependencie = pacotes que seu app usa apenas para ser criado
dependencie = pacotes fundamentais para o funcionamento do seu app após criado
global - pacotes que gerenciam seu app a nível de maquina
Esta é uma breve e siples explicação do que são cada forma de instalar os pacotes NPM, neste caso, o Vue estará a nível Global, então vamos executar o seguinte:
npm install -g @vue/cli
Pode ser que seu sistema reclame de Access write not allow, para este caso, basta repetir a linha porém com sudo
sudo npm install -g @vue/cli
E estará resolvido, agora que tem o Vue instalado a nível Global, podemos criar um ambiente para trabalhar com ele ou qualquer outra coisa, para isso, vá até uma pasta que seja fácil de achar depois e escreva o seguinte no comando:
vue create meu-app
Troque o meu-app pelo nome do seu app, mas existe uma regra, não pode letra maiuscula e nem caracteres diferentes de letra e número, o espaço precisa ser um traço como no exemplo.
Dica final, instale este complemento a nível Global para não precisar digitar npm run serve toda vez que for desenvolver seu app
npm install -g @vue/cli-service-global
ou
sudo npm install -g @vue/cli-service-global
Com ele você pode digitar apenas vue serve
Agora que temos o Vuejs instalado no modo Global, podemos criar nosso Hello World, então, com o que vimos acima, vamos criar um App de forma fácil e rápida:
Primeiro precisamos lembrar que o nome do app precisa de algumas regras
Não são permitidos caracteres especiais, espaços e letras maiúsculas, apenas traço é permitido.
Então, dentro de uma pasta fácil de achar, vamos começar com este comando
vue create hello-world
Veja no vídeo a seguir o que acontece quando você faz isso
Transcrição do vídeo
# Primeiro começamos digitando o comando
vue create hello-world
# Então o Vue perguntou qual Preset você quer, eu deixei o Default
# e começou a fazer download de tudo o que ele precisa
# para você começar a escrever seu App
# e colocou tudo na pasta node_modules
# e criou os arquivos e pastas que você irá utilizar
# vamos olhar estas pastas
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project hello-world.
👉 Get started with the following commands:
$ cd hello-world
$ npm run serve
WARN Skipped git commit due to missing username and email in git config.
You will need to perform the initial commit yourself.
~/Documents/Workspace/lessons
ls -la
total 12
drwxrwxr-x 3 flourigh flourigh 4096 set 2 09:43 .
drwxrwxr-x 5 flourigh flourigh 4096 set 2 09:35 ..
drwxrwxr-x 6 flourigh flourigh 4096 set 2 09:48 hello-world
~/Documents/Workspace/lessons
~/Documents/Workspace/lessons
cd hello-world/
~/Documents/Workspace/lessons/hello-world
master ✘ ls -la
total 80
drwxrwxr-x 6 flourigh flourigh 4096 set 2 09:48 .
drwxrwxr-x 3 flourigh flourigh 4096 set 2 09:43 ..
-rw-rw-r-- 1 flourigh flourigh 53 set 2 09:47 babel.config.js
-rw-rw-r-- 1 flourigh flourigh 21 set 2 09:47 .browserslistrc
-rw-rw-r-- 1 flourigh flourigh 353 set 2 09:47 .eslintrc.js
drwxrwxr-x 7 flourigh flourigh 4096 set 2 15:10 .git
-rw-rw-r-- 1 flourigh flourigh 214 set 2 09:47 .gitignore
drwxrwxr-x 890 flourigh flourigh 32768 set 2 09:48 node_modules
-rw-rw-r-- 1 flourigh flourigh 908 set 2 09:47 package.json
-rw-rw-r-- 1 flourigh flourigh 59 set 2 09:47 postcss.config.js
drwxrwxr-x 3 flourigh flourigh 4096 set 2 09:47 public
-rw-rw-r-- 1 flourigh flourigh 364 set 2 09:48 README.md
drwxrwxr-x 5 flourigh flourigh 4096 set 2 09:47 src
Se agora, dentro da pasta você digitar
npm run serve
# ou se instalou o services
vue serve
O seu app estará pronto para ser visualizado no navegador Vamos ver:
Transcrição do vídeo
# Primeiro começamos digitando o comando
npm run serve
# Isso fez o Vue criar uma instancia de vizualização do seu App
# que pode ser vista no navegador por meio de um IP local
# ele abre então a priemira Roupa que é do Vue.JS
# que podemos editar por meio dos modulos na pasta SRC
Note que seu App já está rodando de forma magnifica, pronto para receber sua imaginação, uma dica é inserir o Vuetify no seu projeto Vue.Js por causa da facilidade de criação de componentes no formato Material, porém, não só Material, da para inserir Themes no Vuetify que permite ele ter outros formatos como o Vuikit, quer ver?
Como estamos utilizando o Vue instalado de forma Global, podemos fazer uma instalação do Vuetify de forma integrada a ele, na pasta do seu App, digite isso
vue add vuetify
Tranquição do vídeo
# Primeiro começamos digitando o comando
vue add vuetify
# O Vue então perguntou outra vez qual o Preset queremos
# deixei o default mais uma vez e continuei, então ele baixou
# e configurou todas as pastas e arquivos que ele precisa para funcionar
⚓ Running completion hooks...
✔ Successfully invoked generator for plugin: vue-cli-plugin-vuetify
The following files have been updated / added:
src/assets/logo.svg
src/plugins/vuetify.js
package.json
public/index.html
src/App.vue
src/components/HelloWorld.vue
src/main.js
src/views/Home.vue
You should review these changes with git diff and commit them.
Como eu tenho o Git instalado em meu computador, ele já informou ao meu Git que existem arquivos novos para receber um Commit, mas isso é m outro Post.
Agora a parte legal é que seu Hello World mudou, vamos rodar outra vez o npm run serve e você verá uma outra página, olha que legal:
Pronto, você já pode editar a pasta SRC e PUBLIC da forma que desejar para criar seu APP com Vue.Js e Vuetify.
Bonus:
Quando você edita seu App com o servidor Rodando npm run serve toda edição que é feita no código é vista automaticamente no seu Navegador.
Se gostou; Aproveite para participar de um canal em desenvolvimento