Tablet

Install

Node 14.15.4

Commencez par enlever les anciennes versions :

brew uninstall node

Installer node 14.15.4 (Current version)

Download : https://nodejs.org/dist/v14.15.4/node-v14.15.4.pkg

node -v
# => Must be equal to 14.15.4

Yarn 1.22.10

$ yarn -v
# => Must be equal to 1.22.10

Vue

# Install dev / dependancies
$ npm i

# build app
$ npm run build

# serve with hot reload at localhost:3000
$ npm run dev

# run ESLint to check for errors
$ npm run lint:script

Project structure

├── public
├── src
│   ├── api             Configuration + Other called
│   ├── assets          Images
│   ├── components      Base, The, others
│   ├── lang            Translations
│   ├── layouts         Layout is a component used for inject some views on a specific layout
│   ├── router          List each route
│   ├── types           List of different types
│   ├── views           Views equal to Pages
├── App.vue             Base template of the application
├── index.css           Default css
├── main.ts             Configuration of the application

Typescript

• Documentation : https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html

Basic types:

• String: string
• Boolean: boolean
• Number: number

If you want to type an Object :

For type object we use interface

interface Example {
  string: string
  boolean: boolean
  number: number
  ...
}

If you have an Object on an other Object:

interface NewExample {
  string: string
  boolean: boolean
  number: number
  example: Example
  ...
}

If you want to type an Array :

Basic array type:

• Array of string: string[]
• Array of number: number[]
• Array of boolean: boolean[]

For types array you just have to add [] after your type value

For an array of object:

• With our interface we just create before : Example[]

Plugins & dependencies

• axios
• vue
• vue-axios

Check peer dependancies

npm install -g check-peer-dependencies
npx check-peer-dependencies --npm
npx check-peer-dependencies --npm --findSolutions

Conventions

We use ESLint with a few custom rules defined in .eslintrc, and Prettier If you are on visualStudio Code

Add this code on your settings.json : Install this extension :

• ESlint of Dirk Baeumer
• Prettier - Code formatter of Prettier

{
  "editor.tabSize": 2,
  "editor.multiCursorModifier": "ctrlCmd",
  "files.trimFinalNewlines": true,
  "workbench.colorTheme": "Community Material Theme Darker",
  "files.insertFinalNewline": true,
  "files.trimTrailingWhitespace": true,
  "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    }
  ],
  "editor.formatOnSave": false,
  "vetur.validation.template": false,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "window.zoomLevel": 2,
  "editor.formatOnPaste": false,
  "editor.formatOnType": false,
  "[html]": {
    "editor.defaultFormatter": "Wscats.eno"
  }
}

Components

Base

A reusable component that contains only UI will have a name that starts with Base. Example: BaseIcon, BaseButton, BaseHouseCard

It does not have access to the store.

The

A component which has only one instance in a page, and is reused in multiple pages, has a name that starts with The.

Ex: TheHeader, TheCookieBanner, TheFooter