game-contest v0.0.0
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
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
1 year ago