@farris/cli 2.0.0 → 2.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bin/index.js +2 -2
- package/lib/commands/build-components.js +40 -0
- package/lib/commands/build-components.js.map +1 -0
- package/lib/commands/build-css.js +39 -0
- package/lib/commands/build-css.js.map +1 -0
- package/lib/commands/build-lib.js +26 -0
- package/lib/commands/build-lib.js.map +1 -0
- package/lib/commands/build.js +16 -0
- package/lib/commands/build.js.map +1 -0
- package/lib/commands/create-app.js +55 -0
- package/lib/commands/create-app.js.map +1 -0
- package/lib/commands/dev-serve.js +19 -0
- package/lib/commands/dev-serve.js.map +1 -0
- package/lib/commands/extract-i18n.js +75 -0
- package/lib/commands/extract-i18n.js.map +1 -0
- package/lib/commands/preview-serve.js +17 -0
- package/lib/commands/preview-serve.js.map +1 -0
- package/lib/common/constant.js +23 -0
- package/lib/common/constant.js.map +1 -0
- package/lib/common/generate-app.js +45 -0
- package/lib/common/generate-app.js.map +1 -0
- package/lib/common/get-dependencies.js +10 -0
- package/lib/common/get-dependencies.js.map +1 -0
- package/lib/common/get-farris-config.js +12 -0
- package/lib/common/get-farris-config.js.map +1 -0
- package/lib/common/get-version.js +7 -0
- package/lib/common/get-version.js.map +1 -0
- package/lib/common/get-vite-config.js +49 -0
- package/lib/common/get-vite-config.js.map +1 -0
- package/lib/config/vite-app.js +14 -0
- package/lib/config/vite-app.js.map +1 -0
- package/lib/config/vite-common.js +21 -0
- package/lib/config/vite-common.js.map +1 -0
- package/lib/config/vite-component.js +31 -0
- package/lib/config/vite-component.js.map +1 -0
- package/lib/config/vite-lib.js +27 -0
- package/lib/config/vite-lib.js.map +1 -0
- package/lib/index.js +84 -0
- package/lib/index.js.map +1 -0
- package/lib/plugins/create-component-style.js +46 -0
- package/lib/plugins/create-component-style.js.map +1 -0
- package/lib/plugins/create-package-json.js +34 -0
- package/lib/plugins/create-package-json.js.map +1 -0
- package/lib/plugins/dts.js +9 -0
- package/lib/plugins/dts.js.map +1 -0
- package/lib/plugins/html-system.js +12 -0
- package/lib/plugins/html-system.js.map +1 -0
- package/lib/plugins/replace.js +18 -0
- package/lib/plugins/replace.js.map +1 -0
- package/lib/plugins/systemjs-bundle.js +16 -0
- package/lib/plugins/systemjs-bundle.js.map +1 -0
- package/package.json +42 -40
- package/templates/mobile/.eslintrc.cjs +15 -15
- package/templates/mobile/.prettierrc.json +7 -7
- package/templates/mobile/farris.config.mjs +24 -24
- package/templates/mobile/index.html +12 -12
- package/templates/mobile/package.json +28 -28
- package/templates/mobile/src/App.vue +80 -80
- package/templates/mobile/src/components/TheButton.vue +3 -3
- package/templates/mobile/src/main.ts +12 -12
- package/templates/mobile/src/router/index.ts +23 -23
- package/templates/mobile/src/views/AboutView.vue +15 -15
- package/templates/mobile/src/views/HomeView.vue +9 -9
- package/templates/mobile/tsconfig.json +17 -17
- package/templates/web/.eslintrc.cjs +15 -15
- package/templates/web/.prettierrc.json +7 -7
- package/templates/web/farris.config.mjs +24 -24
- package/templates/web/index.html +12 -12
- package/templates/web/package.json +28 -28
- package/templates/web/src/App.vue +80 -80
- package/templates/web/src/components/TheButton.vue +3 -3
- package/templates/web/src/main.ts +10 -10
- package/templates/web/src/router/index.ts +23 -23
- package/templates/web/src/views/AboutView.vue +15 -15
- package/templates/web/src/views/HomeView.vue +9 -9
- package/templates/web/tsconfig.json +17 -17
@@ -1,80 +1,80 @@
|
|
1
|
-
<script setup lang="ts">
|
2
|
-
import { RouterLink, RouterView } from 'vue-router'
|
3
|
-
</script>
|
4
|
-
|
5
|
-
<template>
|
6
|
-
<header>
|
7
|
-
<div class="wrapper">
|
8
|
-
<nav>
|
9
|
-
<RouterLink to="/">Home</RouterLink>
|
10
|
-
<RouterLink to="/about">About</RouterLink>
|
11
|
-
</nav>
|
12
|
-
</div>
|
13
|
-
</header>
|
14
|
-
|
15
|
-
<RouterView />
|
16
|
-
</template>
|
17
|
-
|
18
|
-
<style scoped>
|
19
|
-
header {
|
20
|
-
line-height: 1.5;
|
21
|
-
max-height: 100vh;
|
22
|
-
}
|
23
|
-
|
24
|
-
.logo {
|
25
|
-
display: block;
|
26
|
-
margin: 0 auto 2rem;
|
27
|
-
}
|
28
|
-
|
29
|
-
nav {
|
30
|
-
width: 100%;
|
31
|
-
font-size: 12px;
|
32
|
-
text-align: center;
|
33
|
-
margin-top: 2rem;
|
34
|
-
}
|
35
|
-
|
36
|
-
nav a.router-link-exact-active {
|
37
|
-
color: var(--color-text);
|
38
|
-
}
|
39
|
-
|
40
|
-
nav a.router-link-exact-active:hover {
|
41
|
-
background-color: transparent;
|
42
|
-
}
|
43
|
-
|
44
|
-
nav a {
|
45
|
-
display: inline-block;
|
46
|
-
padding: 0 1rem;
|
47
|
-
border-left: 1px solid var(--color-border);
|
48
|
-
}
|
49
|
-
|
50
|
-
nav a:first-of-type {
|
51
|
-
border: 0;
|
52
|
-
}
|
53
|
-
|
54
|
-
@media (min-width: 1024px) {
|
55
|
-
header {
|
56
|
-
display: flex;
|
57
|
-
place-items: center;
|
58
|
-
padding-right: calc(var(--section-gap) / 2);
|
59
|
-
}
|
60
|
-
|
61
|
-
.logo {
|
62
|
-
margin: 0 2rem 0 0;
|
63
|
-
}
|
64
|
-
|
65
|
-
header .wrapper {
|
66
|
-
display: flex;
|
67
|
-
place-items: flex-start;
|
68
|
-
flex-wrap: wrap;
|
69
|
-
}
|
70
|
-
|
71
|
-
nav {
|
72
|
-
text-align: left;
|
73
|
-
margin-left: -1rem;
|
74
|
-
font-size: 1rem;
|
75
|
-
|
76
|
-
padding: 1rem 0;
|
77
|
-
margin-top: 1rem;
|
78
|
-
}
|
79
|
-
}
|
80
|
-
</style>
|
1
|
+
<script setup lang="ts">
|
2
|
+
import { RouterLink, RouterView } from 'vue-router';
|
3
|
+
</script>
|
4
|
+
|
5
|
+
<template>
|
6
|
+
<header>
|
7
|
+
<div class="wrapper">
|
8
|
+
<nav>
|
9
|
+
<RouterLink to="/">Home</RouterLink>
|
10
|
+
<RouterLink to="/about">About</RouterLink>
|
11
|
+
</nav>
|
12
|
+
</div>
|
13
|
+
</header>
|
14
|
+
|
15
|
+
<RouterView />
|
16
|
+
</template>
|
17
|
+
|
18
|
+
<style scoped>
|
19
|
+
header {
|
20
|
+
line-height: 1.5;
|
21
|
+
max-height: 100vh;
|
22
|
+
}
|
23
|
+
|
24
|
+
.logo {
|
25
|
+
display: block;
|
26
|
+
margin: 0 auto 2rem;
|
27
|
+
}
|
28
|
+
|
29
|
+
nav {
|
30
|
+
width: 100%;
|
31
|
+
font-size: 12px;
|
32
|
+
text-align: center;
|
33
|
+
margin-top: 2rem;
|
34
|
+
}
|
35
|
+
|
36
|
+
nav a.router-link-exact-active {
|
37
|
+
color: var(--color-text);
|
38
|
+
}
|
39
|
+
|
40
|
+
nav a.router-link-exact-active:hover {
|
41
|
+
background-color: transparent;
|
42
|
+
}
|
43
|
+
|
44
|
+
nav a {
|
45
|
+
display: inline-block;
|
46
|
+
padding: 0 1rem;
|
47
|
+
border-left: 1px solid var(--color-border);
|
48
|
+
}
|
49
|
+
|
50
|
+
nav a:first-of-type {
|
51
|
+
border: 0;
|
52
|
+
}
|
53
|
+
|
54
|
+
@media (min-width: 1024px) {
|
55
|
+
header {
|
56
|
+
display: flex;
|
57
|
+
place-items: center;
|
58
|
+
padding-right: calc(var(--section-gap) / 2);
|
59
|
+
}
|
60
|
+
|
61
|
+
.logo {
|
62
|
+
margin: 0 2rem 0 0;
|
63
|
+
}
|
64
|
+
|
65
|
+
header .wrapper {
|
66
|
+
display: flex;
|
67
|
+
place-items: flex-start;
|
68
|
+
flex-wrap: wrap;
|
69
|
+
}
|
70
|
+
|
71
|
+
nav {
|
72
|
+
text-align: left;
|
73
|
+
margin-left: -1rem;
|
74
|
+
font-size: 1rem;
|
75
|
+
|
76
|
+
padding: 1rem 0;
|
77
|
+
margin-top: 1rem;
|
78
|
+
}
|
79
|
+
}
|
80
|
+
</style>
|
@@ -1,3 +1,3 @@
|
|
1
|
-
<template>
|
2
|
-
<fm-button>按钮</fm-button>
|
3
|
-
</template>
|
1
|
+
<template>
|
2
|
+
<fm-button>按钮</fm-button>
|
3
|
+
</template>
|
@@ -1,12 +1,12 @@
|
|
1
|
-
import { createApp } from 'vue'
|
2
|
-
import FarrisVue from '@farris/mobile-ui-vue'
|
3
|
-
import App from './App.vue'
|
4
|
-
import router from './router'
|
5
|
-
|
6
|
-
import '@farris/mobile-ui-vue/style.css'
|
7
|
-
|
8
|
-
const app = createApp(App)
|
9
|
-
|
10
|
-
app.use(router).use(FarrisVue)
|
11
|
-
|
12
|
-
app.mount('#app')
|
1
|
+
import { createApp } from 'vue';
|
2
|
+
import FarrisVue from '@farris/mobile-ui-vue';
|
3
|
+
import App from './App.vue';
|
4
|
+
import router from './router';
|
5
|
+
|
6
|
+
import '@farris/mobile-ui-vue/style.css';
|
7
|
+
|
8
|
+
const app = createApp(App);
|
9
|
+
|
10
|
+
app.use(router).use(FarrisVue);
|
11
|
+
|
12
|
+
app.mount('#app');
|
@@ -1,23 +1,23 @@
|
|
1
|
-
import { createRouter, createWebHistory } from 'vue-router'
|
2
|
-
import HomeView from '../views/HomeView.vue'
|
3
|
-
|
4
|
-
const router = createRouter({
|
5
|
-
history: createWebHistory(import.meta.env.BASE_URL),
|
6
|
-
routes: [
|
7
|
-
{
|
8
|
-
path: '/',
|
9
|
-
name: 'home',
|
10
|
-
component: HomeView
|
11
|
-
},
|
12
|
-
{
|
13
|
-
path: '/about',
|
14
|
-
name: 'about',
|
15
|
-
// route level code-splitting
|
16
|
-
// this generates a separate chunk (About.[hash].js) for this route
|
17
|
-
// which is lazy-loaded when the route is visited.
|
18
|
-
component: () => import('../views/AboutView.vue')
|
19
|
-
}
|
20
|
-
]
|
21
|
-
})
|
22
|
-
|
23
|
-
export default router
|
1
|
+
import { createRouter, createWebHistory } from 'vue-router';
|
2
|
+
import HomeView from '../views/HomeView.vue';
|
3
|
+
|
4
|
+
const router = createRouter({
|
5
|
+
history: createWebHistory(import.meta.env.BASE_URL),
|
6
|
+
routes: [
|
7
|
+
{
|
8
|
+
path: '/',
|
9
|
+
name: 'home',
|
10
|
+
component: HomeView
|
11
|
+
},
|
12
|
+
{
|
13
|
+
path: '/about',
|
14
|
+
name: 'about',
|
15
|
+
// route level code-splitting
|
16
|
+
// this generates a separate chunk (About.[hash].js) for this route
|
17
|
+
// which is lazy-loaded when the route is visited.
|
18
|
+
component: () => import('../views/AboutView.vue')
|
19
|
+
}
|
20
|
+
]
|
21
|
+
});
|
22
|
+
|
23
|
+
export default router;
|
@@ -1,15 +1,15 @@
|
|
1
|
-
<template>
|
2
|
-
<div class="about">
|
3
|
-
<h1>This is an about page</h1>
|
4
|
-
</div>
|
5
|
-
</template>
|
6
|
-
|
7
|
-
<style>
|
8
|
-
@media (min-width: 1024px) {
|
9
|
-
.about {
|
10
|
-
min-height: 100vh;
|
11
|
-
display: flex;
|
12
|
-
align-items: center;
|
13
|
-
}
|
14
|
-
}
|
15
|
-
</style>
|
1
|
+
<template>
|
2
|
+
<div class="about">
|
3
|
+
<h1>This is an about page</h1>
|
4
|
+
</div>
|
5
|
+
</template>
|
6
|
+
|
7
|
+
<style>
|
8
|
+
@media (min-width: 1024px) {
|
9
|
+
.about {
|
10
|
+
min-height: 100vh;
|
11
|
+
display: flex;
|
12
|
+
align-items: center;
|
13
|
+
}
|
14
|
+
}
|
15
|
+
</style>
|
@@ -1,9 +1,9 @@
|
|
1
|
-
<script setup lang="ts">
|
2
|
-
import TheButton from '../components/TheButton.vue'
|
3
|
-
</script>
|
4
|
-
|
5
|
-
<template>
|
6
|
-
<main>
|
7
|
-
<TheButton />
|
8
|
-
</main>
|
9
|
-
</template>
|
1
|
+
<script setup lang="ts">
|
2
|
+
import TheButton from '../components/TheButton.vue';
|
3
|
+
</script>
|
4
|
+
|
5
|
+
<template>
|
6
|
+
<main>
|
7
|
+
<TheButton />
|
8
|
+
</main>
|
9
|
+
</template>
|
@@ -1,18 +1,18 @@
|
|
1
|
-
{
|
2
|
-
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
3
|
-
"include": [
|
4
|
-
"env.d.ts",
|
5
|
-
"src/**/*",
|
6
|
-
"src/**/*.vue"
|
7
|
-
],
|
8
|
-
"compilerOptions": {
|
9
|
-
"composite": true,
|
10
|
-
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
11
|
-
"baseUrl": ".",
|
12
|
-
"paths": {
|
13
|
-
"@/*": [
|
14
|
-
"./src/*"
|
15
|
-
]
|
16
|
-
}
|
17
|
-
}
|
1
|
+
{
|
2
|
+
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
3
|
+
"include": [
|
4
|
+
"env.d.ts",
|
5
|
+
"src/**/*",
|
6
|
+
"src/**/*.vue"
|
7
|
+
],
|
8
|
+
"compilerOptions": {
|
9
|
+
"composite": true,
|
10
|
+
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
11
|
+
"baseUrl": ".",
|
12
|
+
"paths": {
|
13
|
+
"@/*": [
|
14
|
+
"./src/*"
|
15
|
+
]
|
16
|
+
}
|
17
|
+
}
|
18
18
|
}
|
@@ -1,15 +1,15 @@
|
|
1
|
-
/* eslint-env node */
|
2
|
-
require('@rushstack/eslint-patch/modern-module-resolution')
|
3
|
-
|
4
|
-
module.exports = {
|
5
|
-
root: true,
|
6
|
-
'extends': [
|
7
|
-
'plugin:vue/vue3-essential',
|
8
|
-
'eslint:recommended',
|
9
|
-
'@vue/eslint-config-typescript',
|
10
|
-
'@vue/eslint-config-prettier/skip-formatting'
|
11
|
-
],
|
12
|
-
parserOptions: {
|
13
|
-
ecmaVersion: 'latest'
|
14
|
-
}
|
15
|
-
}
|
1
|
+
/* eslint-env node */
|
2
|
+
require('@rushstack/eslint-patch/modern-module-resolution');
|
3
|
+
|
4
|
+
module.exports = {
|
5
|
+
root: true,
|
6
|
+
'extends': [
|
7
|
+
'plugin:vue/vue3-essential',
|
8
|
+
'eslint:recommended',
|
9
|
+
'@vue/eslint-config-typescript',
|
10
|
+
'@vue/eslint-config-prettier/skip-formatting'
|
11
|
+
],
|
12
|
+
parserOptions: {
|
13
|
+
ecmaVersion: 'latest'
|
14
|
+
}
|
15
|
+
};
|
@@ -1,8 +1,8 @@
|
|
1
|
-
{
|
2
|
-
"$schema": "https://json.schemastore.org/prettierrc",
|
3
|
-
"semi": false,
|
4
|
-
"tabWidth": 2,
|
5
|
-
"singleQuote": true,
|
6
|
-
"printWidth": 100,
|
7
|
-
"trailingComma": "none"
|
1
|
+
{
|
2
|
+
"$schema": "https://json.schemastore.org/prettierrc",
|
3
|
+
"semi": false,
|
4
|
+
"tabWidth": 2,
|
5
|
+
"singleQuote": true,
|
6
|
+
"printWidth": 100,
|
7
|
+
"trailingComma": "none"
|
8
8
|
}
|
@@ -1,24 +1,24 @@
|
|
1
|
-
import { fileURLToPath, URL } from 'node:url';
|
2
|
-
|
3
|
-
export default {
|
4
|
-
format: "<%= format %>",
|
5
|
-
// 输出目录 App模式默认值 './dist' Lib模式 './lib'
|
6
|
-
// outDir: fileURLToPath(new URL('./dist', import.meta.url)),
|
7
|
-
// 最小化 默认值 true
|
8
|
-
minify: true,
|
9
|
-
// 外部依赖排除项 默认值 { include: [], exclude: [] }
|
10
|
-
// externals: {
|
11
|
-
// include: [],
|
12
|
-
// exclude: []
|
13
|
-
// },
|
14
|
-
// 是否排除 package.json 中 dependencies和 peerDependencies 依赖的包; App模式默认值 false Lib模式默认值 true
|
15
|
-
externalDependencies: false,
|
16
|
-
// 路径别名 默认值 null
|
17
|
-
alias: [
|
18
|
-
{ find: '@', replacement: fileURLToPath(new URL('./src', import.meta.url)) }
|
19
|
-
],
|
20
|
-
// 插件 默认值 [vue(), vueJsx()] 不要重复添加
|
21
|
-
// plugins: [],
|
22
|
-
// viteConfig 配置项
|
23
|
-
viteConfig: {}
|
24
|
-
}
|
1
|
+
import { fileURLToPath, URL } from 'node:url';
|
2
|
+
|
3
|
+
export default {
|
4
|
+
format: "<%= format %>",
|
5
|
+
// 输出目录 App模式默认值 './dist' Lib模式 './lib'
|
6
|
+
// outDir: fileURLToPath(new URL('./dist', import.meta.url)),
|
7
|
+
// 最小化 默认值 true
|
8
|
+
minify: true,
|
9
|
+
// 外部依赖排除项 默认值 { include: [], exclude: [] }
|
10
|
+
// externals: {
|
11
|
+
// include: [],
|
12
|
+
// exclude: []
|
13
|
+
// },
|
14
|
+
// 是否排除 package.json 中 dependencies和 peerDependencies 依赖的包; App模式默认值 false Lib模式默认值 true
|
15
|
+
externalDependencies: false,
|
16
|
+
// 路径别名 默认值 null
|
17
|
+
alias: [
|
18
|
+
{ find: '@', replacement: fileURLToPath(new URL('./src', import.meta.url)) }
|
19
|
+
],
|
20
|
+
// 插件 默认值 [vue(), vueJsx()] 不要重复添加
|
21
|
+
// plugins: [],
|
22
|
+
// viteConfig 配置项
|
23
|
+
viteConfig: {}
|
24
|
+
};
|
package/templates/web/index.html
CHANGED
@@ -1,12 +1,12 @@
|
|
1
|
-
<!DOCTYPE html>
|
2
|
-
<html lang="en">
|
3
|
-
<head>
|
4
|
-
<meta charset="UTF-8">
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6
|
-
<title>Vite App</title>
|
7
|
-
</head>
|
8
|
-
<body>
|
9
|
-
<div id="app"></div>
|
10
|
-
<script type="module" src="/src/main.ts"></script>
|
11
|
-
</body>
|
12
|
-
</html>
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html lang="en">
|
3
|
+
<head>
|
4
|
+
<meta charset="UTF-8">
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6
|
+
<title>Vite App</title>
|
7
|
+
</head>
|
8
|
+
<body>
|
9
|
+
<div id="app"></div>
|
10
|
+
<script type="module" src="/src/main.ts"></script>
|
11
|
+
</body>
|
12
|
+
</html>
|
@@ -1,29 +1,29 @@
|
|
1
|
-
{
|
2
|
-
"name": "<%= name %>",
|
3
|
-
"version": "0.0.0",
|
4
|
-
"private": true,
|
5
|
-
"type": "module",
|
6
|
-
"scripts": {
|
7
|
-
"dev": "farris-cli dev",
|
8
|
-
"build": "farris-cli build",
|
9
|
-
"preview": "farris-cli preview",
|
10
|
-
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
|
11
|
-
"format": "prettier --write src/"
|
12
|
-
},
|
13
|
-
"dependencies": {
|
14
|
-
"@farris/ui-vue": "latest",
|
15
|
-
"vue": "^3.4.29",
|
16
|
-
"vue-router": "^4.3.0"
|
17
|
-
},
|
18
|
-
"devDependencies": {
|
19
|
-
"@farris/cli": "<%= cliVersion %>",
|
20
|
-
"@rushstack/eslint-patch": "^1.8.0",
|
21
|
-
"@vue/eslint-config-prettier": "^9.0.0",
|
22
|
-
"@vue/eslint-config-typescript": "^13.0.0",
|
23
|
-
"@vue/tsconfig": "^0.5.1",
|
24
|
-
"eslint": "^8.57.0",
|
25
|
-
"eslint-plugin-vue": "^9.23.0",
|
26
|
-
"prettier": "^3.2.5",
|
27
|
-
"typescript": "~5.4.0"
|
28
|
-
}
|
1
|
+
{
|
2
|
+
"name": "<%= name %>",
|
3
|
+
"version": "0.0.0",
|
4
|
+
"private": true,
|
5
|
+
"type": "module",
|
6
|
+
"scripts": {
|
7
|
+
"dev": "farris-cli dev",
|
8
|
+
"build": "farris-cli build",
|
9
|
+
"preview": "farris-cli preview",
|
10
|
+
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
|
11
|
+
"format": "prettier --write src/"
|
12
|
+
},
|
13
|
+
"dependencies": {
|
14
|
+
"@farris/ui-vue": "latest",
|
15
|
+
"vue": "^3.4.29",
|
16
|
+
"vue-router": "^4.3.0"
|
17
|
+
},
|
18
|
+
"devDependencies": {
|
19
|
+
"@farris/cli": "<%= cliVersion %>",
|
20
|
+
"@rushstack/eslint-patch": "^1.8.0",
|
21
|
+
"@vue/eslint-config-prettier": "^9.0.0",
|
22
|
+
"@vue/eslint-config-typescript": "^13.0.0",
|
23
|
+
"@vue/tsconfig": "^0.5.1",
|
24
|
+
"eslint": "^8.57.0",
|
25
|
+
"eslint-plugin-vue": "^9.23.0",
|
26
|
+
"prettier": "^3.2.5",
|
27
|
+
"typescript": "~5.4.0"
|
28
|
+
}
|
29
29
|
}
|
@@ -1,80 +1,80 @@
|
|
1
|
-
<script setup lang="ts">
|
2
|
-
import { RouterLink, RouterView } from 'vue-router'
|
3
|
-
</script>
|
4
|
-
|
5
|
-
<template>
|
6
|
-
<header>
|
7
|
-
<div class="wrapper">
|
8
|
-
<nav>
|
9
|
-
<RouterLink to="/">Home</RouterLink>
|
10
|
-
<RouterLink to="/about">About</RouterLink>
|
11
|
-
</nav>
|
12
|
-
</div>
|
13
|
-
</header>
|
14
|
-
|
15
|
-
<RouterView />
|
16
|
-
</template>
|
17
|
-
|
18
|
-
<style scoped>
|
19
|
-
header {
|
20
|
-
line-height: 1.5;
|
21
|
-
max-height: 100vh;
|
22
|
-
}
|
23
|
-
|
24
|
-
.logo {
|
25
|
-
display: block;
|
26
|
-
margin: 0 auto 2rem;
|
27
|
-
}
|
28
|
-
|
29
|
-
nav {
|
30
|
-
width: 100%;
|
31
|
-
font-size: 12px;
|
32
|
-
text-align: center;
|
33
|
-
margin-top: 2rem;
|
34
|
-
}
|
35
|
-
|
36
|
-
nav a.router-link-exact-active {
|
37
|
-
color: var(--color-text);
|
38
|
-
}
|
39
|
-
|
40
|
-
nav a.router-link-exact-active:hover {
|
41
|
-
background-color: transparent;
|
42
|
-
}
|
43
|
-
|
44
|
-
nav a {
|
45
|
-
display: inline-block;
|
46
|
-
padding: 0 1rem;
|
47
|
-
border-left: 1px solid var(--color-border);
|
48
|
-
}
|
49
|
-
|
50
|
-
nav a:first-of-type {
|
51
|
-
border: 0;
|
52
|
-
}
|
53
|
-
|
54
|
-
@media (min-width: 1024px) {
|
55
|
-
header {
|
56
|
-
display: flex;
|
57
|
-
place-items: center;
|
58
|
-
padding-right: calc(var(--section-gap) / 2);
|
59
|
-
}
|
60
|
-
|
61
|
-
.logo {
|
62
|
-
margin: 0 2rem 0 0;
|
63
|
-
}
|
64
|
-
|
65
|
-
header .wrapper {
|
66
|
-
display: flex;
|
67
|
-
place-items: flex-start;
|
68
|
-
flex-wrap: wrap;
|
69
|
-
}
|
70
|
-
|
71
|
-
nav {
|
72
|
-
text-align: left;
|
73
|
-
margin-left: -1rem;
|
74
|
-
font-size: 1rem;
|
75
|
-
|
76
|
-
padding: 1rem 0;
|
77
|
-
margin-top: 1rem;
|
78
|
-
}
|
79
|
-
}
|
80
|
-
</style>
|
1
|
+
<script setup lang="ts">
|
2
|
+
import { RouterLink, RouterView } from 'vue-router';
|
3
|
+
</script>
|
4
|
+
|
5
|
+
<template>
|
6
|
+
<header>
|
7
|
+
<div class="wrapper">
|
8
|
+
<nav>
|
9
|
+
<RouterLink to="/">Home</RouterLink>
|
10
|
+
<RouterLink to="/about">About</RouterLink>
|
11
|
+
</nav>
|
12
|
+
</div>
|
13
|
+
</header>
|
14
|
+
|
15
|
+
<RouterView />
|
16
|
+
</template>
|
17
|
+
|
18
|
+
<style scoped>
|
19
|
+
header {
|
20
|
+
line-height: 1.5;
|
21
|
+
max-height: 100vh;
|
22
|
+
}
|
23
|
+
|
24
|
+
.logo {
|
25
|
+
display: block;
|
26
|
+
margin: 0 auto 2rem;
|
27
|
+
}
|
28
|
+
|
29
|
+
nav {
|
30
|
+
width: 100%;
|
31
|
+
font-size: 12px;
|
32
|
+
text-align: center;
|
33
|
+
margin-top: 2rem;
|
34
|
+
}
|
35
|
+
|
36
|
+
nav a.router-link-exact-active {
|
37
|
+
color: var(--color-text);
|
38
|
+
}
|
39
|
+
|
40
|
+
nav a.router-link-exact-active:hover {
|
41
|
+
background-color: transparent;
|
42
|
+
}
|
43
|
+
|
44
|
+
nav a {
|
45
|
+
display: inline-block;
|
46
|
+
padding: 0 1rem;
|
47
|
+
border-left: 1px solid var(--color-border);
|
48
|
+
}
|
49
|
+
|
50
|
+
nav a:first-of-type {
|
51
|
+
border: 0;
|
52
|
+
}
|
53
|
+
|
54
|
+
@media (min-width: 1024px) {
|
55
|
+
header {
|
56
|
+
display: flex;
|
57
|
+
place-items: center;
|
58
|
+
padding-right: calc(var(--section-gap) / 2);
|
59
|
+
}
|
60
|
+
|
61
|
+
.logo {
|
62
|
+
margin: 0 2rem 0 0;
|
63
|
+
}
|
64
|
+
|
65
|
+
header .wrapper {
|
66
|
+
display: flex;
|
67
|
+
place-items: flex-start;
|
68
|
+
flex-wrap: wrap;
|
69
|
+
}
|
70
|
+
|
71
|
+
nav {
|
72
|
+
text-align: left;
|
73
|
+
margin-left: -1rem;
|
74
|
+
font-size: 1rem;
|
75
|
+
|
76
|
+
padding: 1rem 0;
|
77
|
+
margin-top: 1rem;
|
78
|
+
}
|
79
|
+
}
|
80
|
+
</style>
|