https://vuejs.org/guide/quick-start.html#try-vue-online
Met terminal in parent folder run:
npm init vue@latest
Bij de input geef de gewenste naam en folder op.
Daarna alles default behalve:
- vue-router = Y
Pinia = Y
Volg de afsluitende instructies
Flikker alles in de nieuwe instance weg wat je niet gaat gebruiken.
Installeer en setup environment:
Installeer alle onderstaand depencies met -D flag, want ze zijn alle devDepencies (I.e.: npm i <xxx> -D)
Met unplugin-vue-components niet meer nodig om components in de componentsfolder te importeren. Handig, installatie zie vite.config.js
File vite.config.js:
import { fileURLToPath, URL } from “node:url”
import Components from “unplugin-vue-components/vite”
import { defineConfig } from “vite”
import vue from “@vitejs/plugin-vue”
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue( {
//https://www.youtube.com/watch?v=lJ6mUrZfbWQ
reactivityTransform: true}
),
Components({
/* options */
}),
],
resolve: {
alias: {
“@”: fileURLToPath(new URL(“./src”, import.meta.url)),
},
},
})
File package.json :
{
“name”: “blog1”,
“version”: “0.0.0”,
“private”: true,
“scripts”: {
“dev”: “vite”,
“build”: “vite build”,
“preview”: “vite preview”
},
“dependencies”: {
“vue”: “^3.2.47”,
“vue-router”: “^4.1.6”
},
“devDependencies”: {
“@vitejs/plugin-vue”: “^4.0.0”,
“unplugin-vue-components”: “^0.24.0”,
“vite”: “^4.1.4”,
“canvas-confetti”: “^1.6.0”,
“graphql”: “^16.6.0”,
“pinia”: “^2.0.32”,
“postcss”: “^8.4.21”,
“postcss-each”: “^1.1.0”,
“postcss-import”: “^15.1.0”,
“postcss-mixins”: “^9.0.4”,
“postcss-nested”: “^6.0.1”,
“postcss-preset-env”: “^8.0.1”,
“sass”: “^1.58.3”,
“villus”: “^2.1.1”,
“vue-pdf-embed”: “^1.1.5”
}
}
File main.js :
import { createApp } from ‘vue’
import { createPinia } from ‘pinia’
import { createClient } from ‘villus’
import App from ‘./App.vue’
import router from ‘./router’
// Creates a villus client instance
const client = createClient({
url: `https://maredorpwp.atmyplayground.nl/graphql`
})
import ‘./assets/main.css’
const app = createApp(App)
app.use(createPinia())
app.use(client)
app.use(router)
app.mount(‘#app’)
File postcss.config.js :
const OpenProps = require(“open-props”);
module.exports = {
plugins: [
require(“postcss-jit-props”)(OpenProps),
require(‘postcss-import’),
require(‘postcss-nested’),
require(‘postcss-each’),
require(‘postcss-preset-env’)({
stage: 0,
‘nesting-rules’: true,
‘color-mod-function’: true,
‘custom-media’: true
}),
require(‘postcss-mixins’)
]
}