feat: migrate vue-cli based scaffold to vue-create
This commit is contained in:
Sebin Nyshkim
parent
10f9ae340c
commit
90ef5eaf06
21 changed files with 3530 additions and 29817 deletions
|
|
@ -1,3 +0,0 @@
|
||||||
> 1%
|
|
||||||
last 2 versions
|
|
||||||
not dead
|
|
||||||
15
.eslintrc.cjs
Normal file
15
.eslintrc.cjs
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
/* eslint-env node */
|
||||||
|
require("@rushstack/eslint-patch/modern-module-resolution");
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
extends: [
|
||||||
|
"plugin:vue/vue3-essential",
|
||||||
|
"eslint:recommended",
|
||||||
|
"@vue/eslint-config-typescript",
|
||||||
|
"@vue/eslint-config-prettier",
|
||||||
|
],
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: "latest",
|
||||||
|
},
|
||||||
|
};
|
||||||
14
.eslintrc.js
14
.eslintrc.js
|
|
@ -1,14 +0,0 @@
|
||||||
module.exports = {
|
|
||||||
root: true,
|
|
||||||
env: {
|
|
||||||
node: true,
|
|
||||||
},
|
|
||||||
extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
|
|
||||||
parserOptions: {
|
|
||||||
parser: "babel-eslint",
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
|
|
||||||
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
27
.gitignore
vendored
27
.gitignore
vendored
|
|
@ -1,21 +1,26 @@
|
||||||
.DS_Store
|
# Logs
|
||||||
node_modules
|
logs
|
||||||
/dist
|
*.log
|
||||||
|
|
||||||
|
|
||||||
# local env files
|
|
||||||
.env.local
|
|
||||||
.env.*.local
|
|
||||||
|
|
||||||
# Log files
|
|
||||||
npm-debug.log*
|
npm-debug.log*
|
||||||
yarn-debug.log*
|
yarn-debug.log*
|
||||||
yarn-error.log*
|
yarn-error.log*
|
||||||
pnpm-debug.log*
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
coverage
|
||||||
|
*.local
|
||||||
|
|
||||||
|
/cypress/videos/
|
||||||
|
/cypress/screenshots/
|
||||||
|
|
||||||
# Editor directories and files
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
.idea
|
.idea
|
||||||
.vscode
|
|
||||||
*.suo
|
*.suo
|
||||||
*.ntvs*
|
*.ntvs*
|
||||||
*.njsproj
|
*.njsproj
|
||||||
|
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
{
|
|
||||||
"esversion": 9
|
|
||||||
}
|
|
||||||
1
.prettierrc.json
Normal file
1
.prettierrc.json
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{}
|
||||||
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
|
||||||
|
}
|
||||||
57
README.md
57
README.md
|
|
@ -1,24 +1,55 @@
|
||||||
# vue3-test
|
# Sebin Reference Page
|
||||||
|
|
||||||
## Project setup
|
The official reference page of Sebin Nyshkim, the anthro dragon.
|
||||||
```
|
|
||||||
|
This page is primarily targeted at artists commissioned to draw Sebin. The idea is to have a single point of truth to easily point to.
|
||||||
|
|
||||||
|
The benefit of this is two-fold:
|
||||||
|
|
||||||
|
* Lack of attachments in Fur Affinity notes
|
||||||
|
* Participating in art raffles on Twitter without cluttering up the media tab with the same image over and over again
|
||||||
|
|
||||||
|
Furthermore, this page serves both for the development of Sebin as an independent character as well as a training ground for learning various new web technologies fitting such a project.
|
||||||
|
|
||||||
|
## Recommended IDE Setup
|
||||||
|
|
||||||
|
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
|
||||||
|
|
||||||
|
## Type Support for `.vue` Imports in TS
|
||||||
|
|
||||||
|
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
|
||||||
|
|
||||||
|
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
|
||||||
|
|
||||||
|
1. Disable the built-in TypeScript Extension
|
||||||
|
1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
|
||||||
|
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
|
||||||
|
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
|
||||||
|
|
||||||
|
## Customize configuration
|
||||||
|
|
||||||
|
See [Vite Configuration Reference](https://vitejs.dev/config/).
|
||||||
|
|
||||||
|
## Project Setup
|
||||||
|
|
||||||
|
```sh
|
||||||
npm install
|
npm install
|
||||||
```
|
```
|
||||||
|
|
||||||
### Compiles and hot-reloads for development
|
### Compile and Hot-Reload for Development
|
||||||
```
|
|
||||||
npm run serve
|
```sh
|
||||||
|
npm run dev
|
||||||
```
|
```
|
||||||
|
|
||||||
### Compiles and minifies for production
|
### Type-Check, Compile and Minify for Production
|
||||||
```
|
|
||||||
|
```sh
|
||||||
npm run build
|
npm run build
|
||||||
```
|
```
|
||||||
|
|
||||||
### Lints and fixes files
|
### Lint with [ESLint](https://eslint.org/)
|
||||||
```
|
|
||||||
|
```sh
|
||||||
npm run lint
|
npm run lint
|
||||||
```
|
```
|
||||||
|
|
||||||
### Customize configuration
|
|
||||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
|
||||||
|
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
module.exports = {
|
|
||||||
presets: ["@vue/cli-plugin-babel/preset"],
|
|
||||||
};
|
|
||||||
1
env.d.ts
vendored
Normal file
1
env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
/// <reference types="vite/client" />
|
||||||
29
index.html
Normal file
29
index.html
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||||||
|
<link rel="favicon" href="favicon.png" type="image/png" />
|
||||||
|
<link rel="icon" href="favicon.png" type="image/png" />
|
||||||
|
<title>Sebin Nyshkim - Reference Page</title>
|
||||||
|
|
||||||
|
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#22759d" />
|
||||||
|
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#195673" />
|
||||||
|
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:site" content="@SebinNyshkim" />
|
||||||
|
<meta name="twitter:creator" content="@SebinNyshkim" />
|
||||||
|
<meta name="twitter:title" content="Sebin Nyshkim - Reference Page" />
|
||||||
|
<meta name="twitter:description" content="The official reference page for Sebin Nyshkim with picture references and in-depth character descriptions" />
|
||||||
|
<meta name="twitter:image" content="https://ref.sebin-nyshkim.net/preview.png" />
|
||||||
|
|
||||||
|
<meta name="og:type" content="website" />
|
||||||
|
<meta name="og:title" content="Sebin Nyshkim - Reference Page" />
|
||||||
|
<meta name="og:url" content="https://ref.sebin-nyshkim.net" />
|
||||||
|
<meta name="og:image" content="https://ref.sebin-nyshkim.net/preview.png" />
|
||||||
|
<meta name="og:description" content="The official reference page for Sebin Nyshkim with picture references and in-depth character descriptions" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
33461
package-lock.json
generated
33461
package-lock.json
generated
File diff suppressed because it is too large
Load diff
45
package.json
45
package.json
|
|
@ -3,30 +3,33 @@
|
||||||
"version": "0.8.3",
|
"version": "0.8.3",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"serve": "vue-cli-service serve",
|
"dev": "vite --host",
|
||||||
"build": "vue-cli-service build",
|
"build": "run-p type-check build-only",
|
||||||
"lint": "vue-cli-service lint"
|
"preview": "vite preview",
|
||||||
|
"build-only": "vite build",
|
||||||
|
"type-check": "vue-tsc --noEmit",
|
||||||
|
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"core-js": "^3.6.5",
|
"vue": "^3.2.45",
|
||||||
"normalize.css": "^8.0.1",
|
"vue-router": "^4.1.6"
|
||||||
"vue": "^3.0.0",
|
|
||||||
"vue-router": "^4.0.0-0"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vue/cli-plugin-babel": "~4.5.0",
|
"@rushstack/eslint-patch": "^1.2.0",
|
||||||
"@vue/cli-plugin-eslint": "~4.5.0",
|
"@types/node": "^18.11.18",
|
||||||
"@vue/cli-plugin-router": "~4.5.0",
|
"@vitejs/plugin-vue": "^4.0.0",
|
||||||
"@vue/cli-service": "~4.5.0",
|
"@vue/eslint-config-prettier": "^7.0.0",
|
||||||
"@vue/compiler-sfc": "^3.0.0",
|
"@vue/eslint-config-typescript": "^11.0.2",
|
||||||
"@vue/eslint-config-prettier": "^6.0.0",
|
"@vue/tsconfig": "^0.1.3",
|
||||||
"babel-eslint": "^10.1.0",
|
"eslint": "^8.32.0",
|
||||||
"eslint": "^6.7.2",
|
"eslint-plugin-vue": "^9.9.0",
|
||||||
"eslint-plugin-prettier": "^3.3.1",
|
"normalize.css": "^8.0.1",
|
||||||
"eslint-plugin-vue": "^7.0.0",
|
"npm-run-all": "^4.1.5",
|
||||||
"image-webpack-loader": "^8.0.1",
|
"prettier": "^2.8.3",
|
||||||
"prettier": "^2.2.1",
|
"sass": "^1.57.1",
|
||||||
"sass": "^1.26.5",
|
"typescript": "~4.7.4",
|
||||||
"sass-loader": "^8.0.2"
|
"vite": "^4.0.4",
|
||||||
|
"vite-imagetools": "^4.0.15",
|
||||||
|
"vue-tsc": "^1.0.24"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
|
|
||||||
<link rel="<%= htmlWebpackPlugin.options.links.favicon.rel %>" href="<%= htmlWebpackPlugin.options.links.favicon.href %>" type="<%= htmlWebpackPlugin.options.links.favicon.type %>">
|
|
||||||
<link rel="<%= htmlWebpackPlugin.options.links.icon.rel %>" href="<%= htmlWebpackPlugin.options.links.icon.href %>" type="<%= htmlWebpackPlugin.options.links.icon.type %>">
|
|
||||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
|
||||||
</head>
|
|
||||||
<body id="app">
|
|
||||||
<noscript>
|
|
||||||
<strong>Sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
|
||||||
</noscript>
|
|
||||||
<!-- built files will be auto injected -->
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
import { createApp } from "vue";
|
|
||||||
import App from "./App.vue";
|
|
||||||
import router from "./router";
|
|
||||||
|
|
||||||
createApp(App).use(router).mount("#app");
|
|
||||||
12
src/main.ts
Normal file
12
src/main.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { createApp } from "vue";
|
||||||
|
import App from "./App.vue";
|
||||||
|
import router from "./router";
|
||||||
|
|
||||||
|
import "normalize.css";
|
||||||
|
import "@/scss/main.scss";
|
||||||
|
|
||||||
|
const app = createApp(App);
|
||||||
|
|
||||||
|
app.use(router);
|
||||||
|
|
||||||
|
app.mount("body");
|
||||||
8
tsconfig.config.json
Normal file
8
tsconfig.config.json
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"extends": "@vue/tsconfig/tsconfig.node.json",
|
||||||
|
"include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"types": ["node"]
|
||||||
|
}
|
||||||
|
}
|
||||||
16
tsconfig.json
Normal file
16
tsconfig.json
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
{
|
||||||
|
"extends": "@vue/tsconfig/tsconfig.web.json",
|
||||||
|
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"references": [
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.config.json"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
19
vite.config.ts
Normal file
19
vite.config.ts
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
import { fileURLToPath, URL } from "node:url";
|
||||||
|
|
||||||
|
import { defineConfig } from "vite";
|
||||||
|
import { imagetools } from "vite-imagetools";
|
||||||
|
import vue from "@vitejs/plugin-vue";
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
base: "/sebin/",
|
||||||
|
plugins: [vue(), imagetools()],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
"@": fileURLToPath(new URL("./src", import.meta.url)),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
css: {
|
||||||
|
devSourcemap: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
@ -1,78 +0,0 @@
|
||||||
module.exports = {
|
|
||||||
publicPath: "",
|
|
||||||
css: {
|
|
||||||
sourceMap: process.env.NODE_ENV !== "production",
|
|
||||||
},
|
|
||||||
chainWebpack: (config) => {
|
|
||||||
config.plugin("html").tap((args) => {
|
|
||||||
const meta = {
|
|
||||||
title: "Sebin Nyshkim - Reference Page",
|
|
||||||
desc: "The official reference page for Sebin Nyshkim with picture references and in-depth character descriptions",
|
|
||||||
type: "website",
|
|
||||||
url: "https://ref.sebin-nyshkim.net",
|
|
||||||
favicon: "favicon.png",
|
|
||||||
preview: "preview.jpg",
|
|
||||||
twitter: {
|
|
||||||
card: "summary_large_image",
|
|
||||||
creator: "@SebinNyshkim",
|
|
||||||
},
|
|
||||||
themeColor: "#597ea2",
|
|
||||||
};
|
|
||||||
|
|
||||||
const links = {
|
|
||||||
icon: {
|
|
||||||
rel: "icon",
|
|
||||||
href: meta.favicon,
|
|
||||||
type: "image/png",
|
|
||||||
},
|
|
||||||
favicon: {
|
|
||||||
rel: "favicon",
|
|
||||||
href: meta.favicon,
|
|
||||||
type: "image/png",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
args[0].title = meta.title;
|
|
||||||
args[0].links = links;
|
|
||||||
args[0].meta = {
|
|
||||||
"twitter:card": meta.twitter.card,
|
|
||||||
"twitter:creator": meta.twitter.creator,
|
|
||||||
"twitter:description": meta.desc,
|
|
||||||
"twitter:text:title": meta.title,
|
|
||||||
"twitter:image": `${meta.url}/${meta.preview}`,
|
|
||||||
"og:title": meta.title,
|
|
||||||
"og:type": meta.type,
|
|
||||||
"og:url": meta.url,
|
|
||||||
"og:image": `${meta.url}/${meta.preview}`,
|
|
||||||
"og:description": meta.desc,
|
|
||||||
"theme-color": meta.themeColor,
|
|
||||||
};
|
|
||||||
|
|
||||||
return args;
|
|
||||||
});
|
|
||||||
|
|
||||||
if (process.env.NODE_ENV === "production") {
|
|
||||||
config.module
|
|
||||||
.rule("images")
|
|
||||||
.test(/\.(png|jpe?g|gif|webp|svg)(\?.*)?$/i)
|
|
||||||
.use("image-webpack-loader")
|
|
||||||
.loader("image-webpack-loader")
|
|
||||||
.tap((options) => {
|
|
||||||
const newOpts = {
|
|
||||||
mozjpeg: {
|
|
||||||
progressive: true,
|
|
||||||
quality: 75,
|
|
||||||
},
|
|
||||||
pngquant: {
|
|
||||||
quality: [0.65, 0.9],
|
|
||||||
speed: 4,
|
|
||||||
},
|
|
||||||
gifsicle: {
|
|
||||||
interlaced: false,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
return { ...options, ...newOpts };
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue