Here I learn how to use Vue.ts and how to build and deploy to make it accessible via Github Pages.
Need node-js for this:
npm init vite@latest FOLDERNAME --template vue
Select Vue > TypeScript
cd FOLDERNAME
npm install
npm run dev
This runs now locally.
Create shims-vue.d.ts in src folder and paste this:
declare module '*.vue' {
import { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
to solve intellisense not finding vue modules.
Install Axios:
npm install axios
Import Axios with:
import axios from 'axios'
Open vite.config.ts and add base: '/repo-name'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
base: '/repo-name'
})
Open package.json and change script to
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"
}
npm run build
npm install --save-dev gh-pages
npm run deploy
Build will create .vue.js (sometimes, idk) files for some reason, to remove them do:
git restore .
git clean -f
You very probably didn't place this in a repo and even if, you didn't commit before this step, so good luck!
This will create a branch named 'gh-pages'.
Go to the repo on Github > Settings > Pages then select the branch gh-pages as source and save.
The page will be accessible on https://username.github.io/repo-name/