2. Configurar um ambiente de desenvolvimento

Estamos a utilizar o ambiente de desenvolvimento descrito no documento [2]:

• Visual Studio Code (VSCode) para escrever código JavaScript;
• [node.js] para o executar;
• [npm] para descarregar e instalar as bibliotecas JavaScript de que vamos precisar;

Criamos um ambiente de trabalho no [VSCode]:

• Nos passos [1-5], abrimos uma pasta [vuejs] vazia no [VSCode];

• Em [8-10], instalamos a dependência [@vue/cli], que nos permitirá inicializar um projeto [Vue.js]. Esta dependência inclui um grande número de pacotes (várias centenas);

No mesmo terminal, digitamos então o comando [vue create .], que cria um projeto [Vue.js] no diretório atual (.):

• Em [13], inicia-se uma série de perguntas para configurar o projeto;

• Depois de responder a todas as perguntas, são descarregados novos pacotes e é gerado um projeto no diretório atual [14].

Vamos dar uma olhada no que foi gerado. O ficheiro [package.json] é o seguinte:

{
  "name": "vuejs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve vuejs-20/main.js",
    "build": "vue-cli-service build vuejs-20/main.js",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "bootstrap-vue": "^2.0.2",
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

Comentários

• linhas 14–22: Entre as dependências necessárias para o desenvolvimento, vemos referências às duas ferramentas [eslint, babel] já utilizadas nos dois capítulos anteriores. A estas juntam-se plugins para estas duas ferramentas destinados a serem utilizados no [vue.js];
• linha 34: o pacote [babel-eslint] irá tratar da transpilagem de ES6 para ES5 do código JavaScript;
• linhas 5–9: foram criadas três tarefas [npm]:
  • [build]: utilizada para compilar a versão do projeto pronta para produção;
  • [serve]: executa o projeto num servidor web. Esta ferramenta é utilizada para realizar testes durante o desenvolvimento. Tal como acontece com o [webpack-dev-server], a modificação do código-fonte do projeto desencadeia automaticamente a recompilação do projeto e o seu recarregamento pelo servidor web;
  • [lint]: utilizada para analisar código JavaScript e gerar relatórios. Não iremos utilizar esta ferramenta aqui;

Foi gerado um ficheiro [README.md] com o seguinte conteúdo:

# vuejs
 
## Project setup
```
npm install
```
 
### Compiles and hot-reloads for development
```
npm run serve
```
 
### Compiles and minifies for production
```
npm run build
```
 
### Run your tests
```
npm run test
```
 
### Lints and fixes files
```
npm run lint
```
 
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

Este ficheiro resume os comandos a utilizar para gerir o projeto.

Sabemos que no [VSCode] estão disponíveis tarefas [npm] para execução:

• em [1-3], executamos o comando [serve], que irá compilar e, em seguida, executar o projeto [4-5];

No URL [http://localhost:8080], obtemos a seguinte página:

Explicaremos um pouco mais adiante o que levou a esta página.

Vamos continuar a configurar o nosso ambiente de trabalho:

• em [2] acima, vemos indicadores [git]. [git] é um sistema de controlo de versões de código-fonte que permite gerir versões sucessivas do código e partilhá-las entre programadores. Vamos desativar esta ferramenta para o projeto;
• Em [3-5], acedemos às propriedades do projeto;

• em [9-10], desativamos a utilização do [git] no projeto;

Iremos escrever vários testes para demonstrar como o [vue.js] funciona. No entanto, não queremos criar um novo projeto de cada vez, pois isso exigiria a geração de uma pasta [node_modules] sempre, e esta pasta tem vários megabytes de tamanho. Vamos rever as tarefas [npm] no ficheiro [package.json]:

  "scripts": {
    "serve": "vue-cli-service serve vuejs-00/main.js",
    "build": "vue-cli-service build vuejs-00/main.js",
    "lint": "vue-cli-service lint"
  },

• linha 2: o comando [serve] utiliza por predefinição:
  • o ficheiro [public/index.html];
  • associado ao ficheiro [src/main.js];

Na linha 2, pode especificar o ponto de entrada do projeto para o comando [serve], por exemplo:

"serve": "vue-cli-service serve vuejs-00/main.js",

Vamos experimentar:

• em [1], a pasta [src] foi renomeada para [vuejs-00];
• Em [2-3], o comando [serve] foi modificado;
• Em [4-6], executamos o projeto;

Obtemos o mesmo resultado que antes:

Para os nossos testes, procederemos da seguinte forma:

• escrevendo código numa pasta [vuejs-xx] dentro do projeto;
• testar este projeto utilizando o comando [vue-cli-service serve vuejs-xx/main.js] no ficheiro [package.json];

Quando o servidor de desenvolvimento está em execução, qualquer alteração num dos ficheiros do projeto desencadeia uma recompilação. Por esse motivo, desativamos o modo [Auto Save] no [VSCode]. Com efeito, não queremos que ocorra uma recompilação sempre que digitamos caracteres num dos ficheiros do projeto. Só queremos que a recompilação ocorra em determinados momentos:

• em [2], a opção [Auto Save] não deve estar marcada;