PHP eksempel


Install node.js + vue cli
Efter install af Node kan jeg installere Vue CLI med cmd:
npm install –global @vue/cli

Vent mens der hentes packages og installeres – nogle vil være outdated og give errors.
Når Vue CLI er installed på laptoppen, ses noget lignende dette:

+ @vue/cli@4.5.12
added 931 packages from 602 contributors in 160.1s

OBS!
Update Vue CLI til seneste version (kræver formentlig update af Node.js - tjek op før brug!!):
npm i -g @vue/cli

VScode program - color syntax 
Filer med extension .vue vises sokm udgangspunkt ikke med ”farvet kode” -
intsall plugin Vetur i VScode for at løse det 

	// ---

Setup nyt Vue project
Åbn cmd og cd til wamp64/www/ hvor nyt project skal placeres – mappen og projektets filer oprettes med cmd:
vue create nytprojekt

Jeg skal tage stilling til en række ting – i denne tut bruges følgende indstillinger.
Brug arrow og enter til at vælge:
1.
Vue CLI v4.5.12
Vælg: Manuel select feat 
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint) (Brug Vue 3 til nye projekter!)
  Manually select features
2 
Vælg: Babel og Linter
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press  to select,  to toggle all, to invert selection)
>(*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

3
Vælg: 2.x
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x

4.
Vælg: Eslint with error only
Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
5.
Vælg: Lint on save
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press  to select,  to toggle all, to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit (requires Git)

6.
Vælg: In ded conf files
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json
7
Vælg: No
 Save this as a preset for future projects? (y/N)

Press Enter og vent mens install – efter install vises 
🎉  Successfully created project vuetut.
👉  Get started with the following commands:

	// ---

start project
Efter install cd til project root 'nytprojekt' og start project med cmd:
npm run serve

  App running at:
Local:   http://localhost:8080/
Network: http://192.168.8.106:8080/

Skal et eksisterende project startes
cd ../..
cd wamp64/www/nytprojekt
npm run serve

vis i browser
Kopier url til browser efter start i cmd:
localhost:8080/ 

	// ---

APP.VUE
I mappen src ligger filen app.vue som svarer til index.html – det er i denne fil alt hjemmesidens indhold loades og også her hvor hjemmesidens css placeres.

	// ---

Vue Router opsætning
OBS! Kopier app.vue før install – router sletter og overskriver filens indhold!

OBS! Luk cmd hvis projektet allerede er kørende efter npm run serve. Efter install af router så kør npm run serve igen...

Åbn cmd og cd til projektet wamp64/www/nytprojekt – installer routeren med cmd:
vue add router 

	// ---

Udveksling af data mellem komponenter med Tiny-emitter
Ved udvekling af data i Vue 2 og 3 mellem child → > parent kan jeg bruge Vue's integrerede $emit (se”Projekt” for opsætning)

Ved udveksling af data mellem fx child → > grandparent er det i Vue 2 lidt besværligt, mens udvekslingen i Vue 3 kun kan ske via en såkaldt ”Emitter”. 
Der findes flere forskllige fx 
Mitt:
https://openbase.com/js/mitt
eller Tiny-emitter:
https://openbase.com/js/tiny-emitter

Install af Tiny-emitter skal ske i Vue-projektets folder – browse til projekt folder og install fx:
cd wamp64/www/nytprojekt
npm install tiny-emitter –save


	// ---

VSCode Code color
VSCode kan som udgangspunkt ikke vise kode med farver i syntaxen i workspace - 
installer dette plugin for Vue-Color

	// ---

.htaccess i Vue
Placer filen i root – altsi selve mappen med vue's filer public, src etc.

	// ---

axios INSTALL 
Fra cmd:
npm install axios

Axios post og get
axios.post('http://localhost/vuetutfire/src/ajax/form_data_ajax.php', formData)

Data / value
1. Hent data fra HTML (input, div, etc) som values -

var text_input = document.getElementById("textId").value;
var number_input = document.getElementById("numberId").value;

2. Gem som vars og indsæt i en samling af data
let formData = new FormData();
formData.append('textId', text_input);
formData.append('numberId', number_input);

Url til post + get
Brug den fulde url til siden der sendes data til med https:// etc

CORS
”Same Origin Policy” tillader kun adgang fra sider på samme domæne / på samme server.  Kommer der fx en forespørgsel til post.ph fra en side som ikke tilhører samme domæne, blokeres forespørgslen.
Brug require_one med filen ”cors_fix.php”

 	// ---


page setup
A. Alle enkeltstående sider placeres i mappen ”views” fx:
source/views/Forside.vue

Forside.vue indhold:




B. Siden hentes ind i Vue Router fra routerens setup-page index.js som efter install ligger placeret i:
src/router/index.js

index.js indhold som henter siden Forside.vue:
// HENT VUE 
import Vue from 'vue'
// HENT ROUTER
import VueRouter from 'vue-router'

// HENT PAGES
import Forside from '@/views/Forside.vue'

// AKTIVER ROUTER
Vue.use(VueRouter)

// DEFINER VAR TIL PAGES OG PLACERING
const routes = [
	{
		path:'/',
		component: Forside 
	}
]

// DEFINER VAR TIL BRUG I ROUTER
const router = new VueRouter({
	routes
})

// EKSPORTER ROUTER TIL BRUG I VUE 
export default router

C. Router / indhold af index.js hentes ind i Vue primære side App.vue placeret i mappen src:
src/App.vue

App.vue indhold:


// PLACER MAIN STYLING I APP.VUE



	// ---

skjul eslint errors
	/* eslint-disable */ 

		---- javascript kode her som giver fejl i ESLint ------

	/* eslint-enable */ 

	// ---

error Mixed spaces and tabs i cmd
C:\wamp64\www\skrifter_vue\src\views\html-og-css\html\beskrivelse-af-HTML-elementerne-block-og-inline.vue
  12:2  error  Mixed spaces and tabs  no-mixed-spaces-and-tabs

Fejlen gives fx hvis en page i et Vue-projekt er lavet i to forskellige editors – fx Dreamweaver og VSCode.
Fejlen kommer fra ESLint:
https://eslint.org/docs/rules/no-mixed-spaces-and-tabs

Convert DW-filen til ”Tabs ”

	// ---

ERROR VED IMPORT AF NODE MODULES UDEN TYPESCRIPT

Hvis et Node modul, fx vue-highlightjs, efter npm install mangler viser sig ikke at indeholde en fil til brug af TypeScript, vil VSCode give en fejl når modulet importeres i projektets ”main.js”.
import VueHighlightJS from 'vue-highlightjs'
Fejlen kan ses ved hover over de 3 punktummer efter ”from” og giver følgende pop-up:

Could not find a declaration file for module 'vue-highlightjs'. 'C:/wamp64/www/test_syntax/node_modules/vue-highlightjs/index.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/vue-highlightjs` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-highlightjs';`ts(7016) 

Løsning:
Opret en ny fil med navnet index.d.ts i modulets root folder og indsæt følgende i filen:
declare module 'vue-highlightjs';

Luk ”main.js” og åbn igen i VSCode – fejlen bør være rettet.
Måske skal ”main.js” resettes ved at slette et bogstav eller lign. på siden og save – gendan herefter og save igen


	// ---

SYNTAX HIGHLIGHT 
Til visning af kode fx tags som  kan jeg bruge et plugin som fx higlight.js 
https://highlightjs.org/

Install highlightjs i Vue
Cmd:
npm install highlight.js


	// ---

import external scripts I MAIN.JS
Placer eksterne .css og .js filer i mappen ”assets”

Link til filerne i ”main.js” med fx:
// CSS 
import eksempler_css from './assets/css/eksempler.css'

// SCRIPTS
import eksempler_ script from './assets/scripts/eksempler.script'

// RENDER 
new Vue({
	eksempler_css,
	eksempler_script,
	render: h => h(App)
}).$mount('#app')


	// ---