Olá Vuejs

Nos últimos tempos foram lançados vários frameworks Javascript e o mais novo queridinho é Vuejs,este é o meu primeiro post sobre o Vuejs onde serão abordados os seguintes assuntos neste post:

O que é o Vuejs?
Instalando o Vue CLI
Iniciando um projeto

O que é o Vuejs?

O Vuejs é um framework Javascript para criação de componentes reutilizáveis, algumas vantagens dele são:

Core muito pequeno os incríveis 17kb
DOM virtual(como o React do Facebook)
Componentes visuais reativos e combináveis

Instalando o Vue CLI

Com o Node(a partir da versão 6.0) instalado vamos instalar o Vue CLI que irá nos auxiliar com a criação e manutenção de nossos projetos, para instalar o Vue CLI execute o seguinte comando no terminal:

npm install -g vue-cli

Lembrando que -g significa global ou seja se seu usuário não tenha permissão de administrador podem ocorrer alguns erros… então execute o comando com permissão de administrador.

Podemos confirmar a instalação do vue digitando o seguinte comando:

vue --version
2.7.0

No meu caso tenho o Vue 2.7.0 instalado, mas é bem provável que já existe uma versão mais recente.

Iniciando um projeto

Agora vamos criar um novo projeto usando o terminal execute o seguinte comando:

vue init <template-name> <project-name>

O que significa cada um desses comandos?

vue init: iniciando o projeto com vue
template-name: template do projeto, a lista de todos os templates
project-name: nome do projeto

Então para continuarmos o exemplo criei um projeto chamado olavue com o template webpack-simple:

vue init webpack-simple olavue

Ao executar o comando serão feitos algumas perguntas, como o nome do projeto, descrição, autor etc.

A newer version of vue-cli is available.

This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack-simple#1.0 olavue

? Project name olavue
? Project description A Vue.js project
? Author Willian Teophilo <wteophilo@gmail.com>
? License MIT
? Use sass? No

   vue-cli · Generated "olavue".

   To get started:

     cd olavue
     npm install
     npm run dev

Com o projeto criado precisamos instalar as dependências, para isso acesse a pasta do projeto e execute o seguinte comando:

npm install

e por fim levantar o servidor:

npm run dev

cross-env NODE_ENV=development webpack-dev-server --open --hot

Project is running at http://localhost:8080/
webpack output is served from /dist/
404s will fallback to /index.html

Se tudo deu certo o projeto é disponibilizado em http://localhost:8080/ e a seguinte página é exibida:

olavue

Por enquanto é só isso, nos vemos na próxima.