# Installazione

# Prerequisiti

# Creazione progetto

Diversamente dalla costruzione del progetto Django (opens new window), per costruire un progetto quasar useremo la quasar cli e applicheremo una customizzazione di THUX tramite quasar extension.

Successivamente useremo il cookiecutter (opens new window) per costruire le varie app.

Il nome del progetto è composto da: quasar<year>.<domain>.

Per prima cosa assicurarsi di avere installato quasar cli, altrimenti seguire l'installazione di quasar (opens new window)

Come esempio vado a costruire il progetto quasar2021.remoteassistance.it

yarn create quasar
Riporto le risposte in grassetto 
✔ What would you like to build? › App with Quasar CLI, let's go!
✔ Project folder: … quasar-project
✔ Pick Quasar version: › Quasar v2 (Vue 3 | latest and greatest)
✔ Pick script type: › Javascript
✔ Pick Quasar App CLI variant: › Quasar App CLI with Webpack
✔ Package name: … quasar-project
✔ Project product name: (must start with letter if building mobile apps) … Quasar App
✔ Project description: … A Quasar Project
✔ Author: … code@thux.it
✔ Pick your CSS preprocessor: › Sass with SCSS syntax
✔ Check the features needed for your project: › ESLint, State Management (Vuex) [DEPRECATED by Vue Team], Axios, Vue-i18n
✔ Pick an ESLint preset: › Standard

 Quasar •  SUCCESS  • The project has been scaffolded

✔ Install project dependencies? (recommended) › Yes, use yarn

# Installazione Thx-customizations

Fin qui abbiamo creato il progetto pulito di quasar; ora applicheremo le customizzazioni di THUX.

cd quasar2021.remoteassistance.it
yarn config set registry https://npm.thux.dev # solo la prima volta
quasar ext add @thux/thx-auth
quasar ext add @thux/thx-customizations

# Installazione Quasar app

Per costruire le varie app utilizzeremo il cookiecutter; come esempio costruiremo l'applicazione price partendo dal file .yaml generato dal cookiecutter delle app di django (opens new window):

cd src/pages/
workon cookiecutter
cookiecutter hg+ssh://git@hg.thux.dev/tools/cookiecutter/quasar/quasar-app-cookiecutter -f --no-input --config-file /home/.../office2021.remoteassistance.it/apps/price/cookiecutter.yaml

Una volta finito tornare nella root del progetto e lanciare il processo di lint per sistemare la formattazione del codice.

Attenzione!

questo step è obbligatorio per evitare errori di compilazione dell’applicazione.

yarn lint --fix

# Installazione nuova app

È necessario includere la nuova applicazione con l’import nel routing e vuex principali del progetto:

File

src/router/routes.js

import { routes as vDemoRoutes, ROUTES as DEMO_ROUTES } from './demo/routes'

const routes = [{
  path: 'demo/',
  component: () => import('components/wrapper/Wrapper'),
  meta: {
    requiresAuth: true
  },
  children: [
    //...
    ...vDemoRoutes,
    //...
  ]
}]

const ROUTES = {
  //...
  ...DEMO_ROUTES,
  //...
}

File

src/store/index.js

import { store as demoStore, TYPES as DEMO_TYPES } from 'pages/demo/store'

const TYPES = {
  ...AUTH_TYPES,
  ...DEMO_TYPES,
  //...
}

const Store = createStore({
  modules: {
    configuration,
    auth,
    commonFilters,
    ...merge(
      //...
      demoStore
      //...
    )
  }
})

← Configurazione →