2. Setting up a development environment

We are using the development environment detailed in document [2]:

Visual Studio Code (VSCode) for writing JavaScript code;
[node.js] to run it;
[npm] to download and install the JavaScript libraries we’ll need;

We create a working environment in [VSCode]:

In [1-5], we open an empty [vuejs] folder in [VSCode];

In [8-10], we install the [@vue/cli] dependency, which will allow us to initialize a [Vue.js] project. This dependency includes a large number of packages (several hundred);

In the same terminal, we then type the command [vue create .], which creates a [Vue.js] project in the current directory (.):

In [13], a series of questions begins to configure the project;

Once all questions have been answered, new packages are downloaded and a project is generated in the current directory [14].

Let’s take a look at what was generated. The [package.json] file is as follows:


{
  "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"
  ]
}

Comments

lines 14–22: Among the dependencies required for development, we see references to the two tools [eslint, babel] already used in the previous two chapters. Added to these are plugins for these two tools intended for use within [vue.js];
line 34: the [babel-eslint] package will handle the ES6-to-ES5 transpilation of the JavaScript code;
lines 5–9: three [npm] tasks have been created:
- [build]: used to build the compiled version of the project ready for production;
- [serve]: runs the project on a web server. This tool is used to perform tests during development. As with [webpack-dev-server], modifying the project’s source code automatically triggers the project’s recompilation and reloading by the web server;
- [lint]: used to analyze JavaScript code and generate reports. We will not be using this tool here;

A [README.md] file has been generated with the following content:


# vuejs

## Project setup
```
npm install
```

### Compilation and hot reloading 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/).

This file summarizes the commands to use for managing the project.

We know that in [VSCode], [npm] tasks are available for execution:

in [1-3], we run the [serve] command, which will compile and then run the project [4-5];

At the URL [http://localhost:8080], we get the following page:

We’ll explain a little later what led to this page.

Let’s continue setting up our work environment:

in [2] above, we see [git] indicators. [git] is a source code version control system that allows you to manage successive versions of the code and share them among developers. We will disable this tool for the project;
In [3-5], we go to the project properties;

in [9-10], we disable the use of [git] in the project;

We will write various tests to demonstrate how [vue.js] works. However, we do not want to create a new project each time, as this would require generating a [node_modules] folder every time, and this folder is several hundred megabytes in size. Let’s revisit the [npm] tasks in the [package.json] file:


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

line 2: the [serve] command uses by default:
- the file [public/index.html];
- associated with the file [src/main.js];

On line 2, you can specify the project's entry point for the [serve] command, for example:


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

Let's try it:

in [1], the [src] folder has been renamed to [vuejs-00];
In [2-3], the [serve] command was modified;
In [4-6], we run the project;

We get the same result as before:

For our tests, we will proceed as follows:

writing code in a [vuejs-xx] folder within the project;
test this project using the command [vue-cli-service serve vuejs-xx/main.js] in the [package.json] file;

When the development server is running, any change to one of the project files triggers a recompilation. For this reason, we disable the [Auto Save] mode in [VSCode]. Indeed, we do not want a recompilation to occur every time we type characters into one of the project files. We only want a recompilation at certain times:

in [2], the [Auto Save] option must not be checked;