Curso gratuito Vue.js 3 INTRO #2 - Instalando

Introdução e formas de instalação

Visão geral da seção: Nesta seção, o palestrante introduz duas formas de instalação do VDS (Video Data Service) e destaca a importância de consultar a documentação oficial.

Instalação via CDN

• A primeira forma abordada é a utilização do VDS via CDN.

• Essa abordagem é recomendada quando se deseja injetar componentes web em um projeto existente, sem precisar refazê-lo.

• É necessário injetar o código no HTML do projeto para que os componentes funcionem corretamente.

Instalação utilizando o Build Tools

• A segunda forma apresentada é a criação de um projeto robusto utilizando as técnicas e tecnologias modernas disponíveis.

• Para isso, utiliza-se o Build Tools, que permite criar projetos leves diretamente pela linha de comando.

• Essa opção é mais adequada quando se está desenvolvendo um projeto do zero e busca-se maior flexibilidade e controle.

Utilizando Web Components

Visão geral da seção: Nesta seção, o palestrante explora como utilizar Web Components para criar funcionalidades específicas em projetos existentes ou novos.

• Ao utilizar Web Components, é possível injetar funcionalidades específicas em um projeto legado sem precisar refazê-lo por completo.

• O vídeo demonstra como adicionar um componente ao HTML existente e observar sua interação com outros elementos.

• É importante entender como os componentes atuam dentro do contexto do projeto para obter os resultados desejados.

Instalação do VDS via CDN vs. Build Tools

Visão geral da seção: Nesta seção, o palestrante compara as duas formas de instalação do VDS e destaca suas diferenças.

• A instalação via CDN é recomendada quando se tem um projeto em execução e deseja-se utilizar as funcionalidades do VDS.

• Já a utilização dos Build Tools é mais adequada para desenvolver projetos robustos desde o início, utilizando técnicas e tecnologias modernas.

• O uso dos Build Tools permite maior flexibilidade e controle sobre o projeto, enquanto a instalação via CDN é mais simples e rápida.

Conclusão

O vídeo aborda duas formas de instalação do VDS: via CDN e utilizando os Build Tools. A escolha entre essas opções depende das necessidades específicas do projeto, sendo a instalação via CDN mais indicada para projetos existentes e a utilização dos Build Tools mais adequada para desenvolvimento de projetos robustos desde o início. É importante consultar a documentação oficial para obter informações detalhadas sobre cada forma de instalação.

Instalação do Cliente

Visão Geral da Seção: Nesta seção, o instrutor explica como instalar o cliente e verificar se está instalado corretamente.

Configurando o Cliente

• Para instalar o cliente, utilize o comando npm install -g vue-cli.

• Verifique se a instalação foi concluída com sucesso executando o comando vue --version.

Criando um Novo Projeto

Visão Geral da Seção: Nesta seção, é mostrado como criar um novo projeto utilizando o Vue CLI.

Criando a Estrutura do Projeto

• Crie uma nova pasta para o projeto.

• Dentro da pasta, execute o comando vue create nome-do-projeto para criar a estrutura básica do projeto.

Configurando as Opções do Projeto

Visão Geral da Seção: Nesta seção, são configuradas as opções iniciais do projeto.

Escolhendo as Opções Padrão

• Ao criar um novo projeto, será solicitado escolher algumas opções. Pressione Enter para selecionar as opções padrão.

• Informe um nome para seu projeto quando solicitado.

Finalizando a Instalação e Verificando os Arquivos Gerados

Visão Geral da Seção: Nesta seção, é finalizada a instalação do projeto e verificados os arquivos gerados.

Aguardando a Instalação Concluir

• Aguarde até que todos os pacotes necessários tenham sido baixados e instalados.

Explorando os Arquivos Gerados

Visão Geral da Seção: Nesta seção, é feita uma exploração dos arquivos gerados pelo Vue CLI.

Verificando a Estrutura do Projeto

• Dentro da pasta do projeto, você encontrará diversos arquivos e pastas.

• Não modifique os arquivos dentro da pasta node_modules.

• O arquivo package.json contém as dependências e configurações do projeto.

Acessando os Arquivos Públicos

Visão Geral da Seção: Nesta seção, é explicado como acessar e utilizar os arquivos públicos do projeto.

Pasta Pública

• Os arquivos públicos devem ser colocados na pasta public.

• O arquivo index.html é o template base do projeto.

Acessando os Arquivos de Código Fonte

Visão Geral da Seção: Nesta seção, é mostrado onde estão localizados os arquivos de código fonte do projeto.

Pasta Src

• Os arquivos de código fonte devem ser colocados na pasta src.

• O arquivo main.js é o ponto de entrada para o aplicativo Vue.

• É possível importar outros módulos e componentes no arquivo main.js.

Entendendo as Dependências do Projeto

Visão Geral da Seção: Nesta seção, são explicadas as dependências presentes no projeto.

Pacotes e Configurações

• O arquivo package.json contém informações sobre as dependências e configurações do projeto.

• As configurações podem ser encontradas em diferentes seções desse arquivo.

Utilizando Scripts para Desenvolvimento

Visão Geral da Seção: Nesta seção, é explicado como utilizar os scripts para desenvolvimento do projeto.

Scripts Disponíveis

• O arquivo package.json contém uma lista de scripts que podem ser executados.

• Alguns exemplos de scripts são serve, build e lint.

Arquivos Estáticos e Organização de Código

Visão Geral da Seção: Nesta seção, é mostrado como lidar com arquivos estáticos e organizar o código do projeto.

Pasta Public vs. Pasta Src

• A pasta public é utilizada para armazenar arquivos estáticos que não serão modificados pelo processo de build.

• A pasta src é onde todo o código fonte e lógica do projeto devem ser colocados.

Entendendo a Estrutura do Projeto Vue CLI

Visão Geral da Seção: Nesta seção, é feita uma análise mais detalhada da estrutura do projeto gerado pelo Vue CLI.

Arquivo Main.js

• O arquivo main.js é responsável por importar os módulos necessários e iniciar o aplicativo Vue.

• É possível adicionar ou modificar as importações nesse arquivo.

Explorando a Pasta Pública

Visão Geral da Seção: Nesta seção, são explorados os arquivos presentes na pasta pública do projeto.

Arquivo Index.html

• O arquivo index.html serve como template base para o aplicativo Vue.

• É possível adicionar conteúdo HTML dentro desse arquivo.

Explorando a Pasta Src

Visão Geral da Seção: Nesta seção, são explorados os arquivos presentes na pasta src do projeto.

Arquivo Main.js

• O arquivo main.js é o ponto de entrada para o aplicativo Vue.

• É possível importar outros módulos e componentes nesse arquivo.

Utilizando Arquivos Estáticos

Visão Geral da Seção: Nesta seção, é explicado como utilizar arquivos estáticos no projeto.

Pasta Public

• A pasta public é utilizada para armazenar arquivos estáticos que não serão modificados pelo processo de build.

• É possível adicionar imagens, vídeos ou qualquer outro tipo de arquivo estático nessa pasta.

Organizando o Código Fonte

Visão Geral da Seção: Nesta seção, é mostrado como organizar o código fonte do projeto.

Pasta Src

• A pasta src contém todos os arquivos de código fonte do projeto.

• É onde a lógica e os componentes do aplicativo devem ser colocados.

Estrutura de Arquivos e Componentes

Visão Geral da Seção: Nesta seção, o instrutor explica a estrutura de arquivos e componentes no desenvolvimento web com Vue.js.

Arquivos e Componentes

• Os arquivos de acesso e componentes são os ativos do projeto, como imagens, vídeos e CSS globais.

• Os componentes são declarados no arquivo principal e podem ser importados em outros componentes.

• O diretório "src" contém as configurações especiais do projeto, mas não é necessário mexer nele inicialmente.

Ambiente de Desenvolvimento

Visão Geral da Seção: Nesta seção, o instrutor explica como configurar o ambiente de desenvolvimento com Vue.js.

Comando Serve

• O comando "serve" inicia um servidor de desenvolvimento que realiza compilações automáticas e permite visualizar a aplicação em tempo real.

• A aplicação estará disponível no endereço "localhost:8080" durante o desenvolvimento.

• O hot-reload permite que as alterações feitas nos arquivos sejam automaticamente atualizadas na tela do navegador.

Recompilação Automática

Visão Geral da Seção: Nesta seção, o instrutor explica como funciona a recompilação automática dos arquivos durante o desenvolvimento com Vue.js.

• O hot-reload observa todos os arquivos do projeto e recarrega automaticamente a página quando ocorrem alterações.

• Essa funcionalidade é importante para manter o projeto robusto e facilitar a criação de projetos Vue.js.

Formas de Instalação do Vue.js

Visão Geral da Seção: Nesta seção, o instrutor explica as duas formas de instalar o Vue.js.

• A primeira forma é utilizando o CDN (Content Delivery Network).

• A segunda forma é utilizando o Vue CLI (Command Line Interface).

Essas foram as principais informações abordadas no vídeo.