examples/vue-ts-example
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

更新
All checks were successful
CI / cache-and-install (push) Successful in 1m26s
Details

Browse Source
This commit is contained in:
严浩
2024-08-22 19:24:36 +08:00
parent 7e1637ccce
commit 2a78b2db01
14 changed files with 136 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.npmrc
View File

@ -1,2 +1,3 @@
use-node-version=20.16.0
# registry=https://npm-cf-proxy.oo1.dev
use-node-version=20.16.0
shamefully-hoist=true

1
components.d.ts vendored
View File

@ -13,6 +13,7 @@ declare module 'vue' {
IconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default']
IconSupport: typeof import('./src/components/icons/IconSupport.vue')['default']
IconTooling: typeof import('./src/components/icons/IconTooling.vue')['default']
ReusableTemplate: typeof import('./src/components/ReusableTemplate.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
}

3
package.json
View File

@ -19,7 +19,7 @@
"@unhead/vue": "^1.10.0",
"@vant/use": "^1.6.0",
"@yanhao98/vue-router-helper": "^0.0.4",
"alova": "^3.0.10",
"alova": "^3.0.11",
"axios": "^1.7.4",
"dayjs": "^1.11.13",
"jsencrypt": "^3.3.2",
@ -45,6 +45,7 @@
"@types/jsdom": "^21.1.7",
"@types/node": "^22.5.0",
"@types/nprogress": "^0.2.3",
"@unocss/preset-attributify": "^0.62.2",
"@unocss/preset-rem-to-px": "^0.62.2",
"@unocss/reset": "^0.62.2",
"@vant/auto-import-resolver": "^1.2.1",

19
pnpm-lock.yaml generated
View File

@ -15,7 +15,7 @@ importers:
dependencies:
'@alova/adapter-axios':
specifier: ^2.0.5
version: 2.0.5(alova@3.0.10)(axios@1.7.4)
version: 2.0.5(alova@3.0.11)(axios@1.7.4)
'@unhead/vue':
specifier: ^1.10.0
version: 1.10.0(vue@3.4.38(typescript@5.5.4))
@ -26,8 +26,8 @@ importers:
specifier: ^0.0.4
version: 0.0.4(nprogress@0.2.0)(vue-router@4.4.3(patch_hash=srtmpgmwmi3z5x3wdppdguh7mi)(vue@3.4.38(typescript@5.5.4)))
alova:
specifier: ^3.0.10
version: 3.0.10
specifier: ^3.0.11
version: 3.0.11
axios:
specifier: ^1.7.4
version: 1.7.4
@ -98,6 +98,9 @@ importers:
'@types/nprogress':
specifier: ^0.2.3
version: 0.2.3
'@unocss/preset-attributify':
specifier: ^0.62.2
version: 0.62.2
'@unocss/preset-rem-to-px':
specifier: ^0.62.2
version: 0.62.2
@ -1244,8 +1247,8 @@ packages:
ajv@6.12.6:
resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==, tarball: https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz}
alova@3.0.10:
resolution: {integrity: sha512-nYt3Xv+huzsekOsIkJNtR7R1Rkhz2gpuNAHjkbRtDWtV6RGyV6sA3T+Uy4MKvkJ4YBID6hGQoOuZeteUCNG5Ug==, tarball: https://registry.npmjs.org/alova/-/alova-3.0.10.tgz}
alova@3.0.11:
resolution: {integrity: sha512-AOsjol0wTYUzxLOo3m2IvfL7KyQjFFzlCwAXV6fqeOolTWSbDMVcQ9jAWLgPFtLeYenia3jzwPxHbNyQIQK+UA==, tarball: https://registry.npmjs.org/alova/-/alova-3.0.11.tgz}
engines: {node: '>= 18.0.0'}
ansi-escapes@7.0.0:
@ -3072,10 +3075,10 @@ packages:
snapshots:
'@alova/adapter-axios@2.0.5(alova@3.0.10)(axios@1.7.4)':
'@alova/adapter-axios@2.0.5(alova@3.0.11)(axios@1.7.4)':
dependencies:
'@alova/shared': 1.0.4
alova: 3.0.10
alova: 3.0.11
axios: 1.7.4
'@alova/shared@1.0.4': {}
@ -4219,7 +4222,7 @@ snapshots:
json-schema-traverse: 0.4.1
uri-js: 4.4.1
alova@3.0.10:
alova@3.0.11:
dependencies:
'@alova/shared': 1.0.4
rate-limiter-flexible: 5.0.3

1
src/App.vue
View File

@ -4,5 +4,6 @@ const VITE_BUILD_COMMIT = import.meta.env.VITE_BUILD_COMMIT;
<template>
<div fixed rounded-br-4 bottom-0 left-0 z-9999 px-4 py-2 bg-black text-white>commit: {{ VITE_BUILD_COMMIT }}</div>
<div>$__DEV__: {{ $__DEV__ }}</div>
<RouterView />
</template>

14
src/components/ReusableTemplate.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<TemplateFoo.define v-slot="{ msg }">
<div>Hello {{ msg.toUpperCase() }}</div>
</TemplateFoo.define>
<TemplateFoo.reuse msg="World" />
<TemplateFoo.reuse msg="Reusable" />
</template>
<script setup lang="ts">
import { createReusableTemplate } from '@vueuse/core';
const TemplateFoo = createReusableTemplate<{ msg: string }>();
</script>

7
src/main.ts
View File

@ -23,14 +23,15 @@ async function init() {
});
}
createApp(App)
const app = createApp(App)
.use(createHead())
.use(createPinia())
// Register the plugin before the router
.use(DataLoaderPlugin, { router })
// adding the router will trigger the initial navigation
.use(router)
.mount('#app');
.use(router);
app.config.globalProperties.$__DEV__ = $__DEV__;
app.mount('#app');
}
init();

14
src/pages/index-page.vue
View File

@ -1,6 +1,4 @@
<script lang="tsx" setup>
import type { FunctionalComponent } from 'vue';
useHead({
// Titles
title: 'Hello World',
@ -16,11 +14,14 @@ definePage({
alias: '/',
});
import type { FunctionalComponent } from 'vue';
// https://cn.vuejs.org/guide/extras/render-function#typing-functional-components
const FComponent: FunctionalComponent<{ prop: string }> = (props, context) => (
<>
<div>This is a functional component with prop: {props.prop}</div>
<div>{props.prop}</div>
<div b="1 solid pink" text="pink">
<span>This is a functional component with prop: {JSON.stringify(props)}</span>
</div>
</>
);
</script>
@ -35,4 +36,9 @@ const FComponent: FunctionalComponent<{ prop: string }> = (props, context) => (
<li><router-link :to="{ name: 'MdPage' }">Markdown Page</router-link></li>
</ul>
<FComponent prop="Hello World" />
<div text-orange></div>
<div b="1px solid pink" mt-8>
<ReusableTemplate />
</div>
</template>

12
src/types/shims.d.ts vendored
View File

@ -1,12 +0,0 @@
export {};
declare global {
const $__DEV__: boolean;
}
/* declare module 'vue' {
export interface ComponentCustomProperties {
$__DEV__: boolean;
}
}
*/

11
src/types/shims/global.ts Normal file
View File

@ -0,0 +1,11 @@
declare global {
const $__DEV__: boolean;
}
declare module 'vue' {
export interface ComponentCustomProperties {
$__DEV__: boolean;
}
}
export {};

5
src/types/router.ts → src/types/shims/router.ts
View File

@ -1,8 +1,5 @@
import 'vue-router';
// 为了确保这个文件被当作一个模块，添加至少一个 `export` 声明
export {};
// declare module 'vue-router' {
// interface RouteMeta {
// // fromList?: RouteLocationNormalized[]
@ -19,3 +16,5 @@ export {};
// // stackIndex: number
// }
// }
export {};

15
src/types/shims/unocss.ts Normal file
View File

@ -0,0 +1,15 @@
// https://unocss.dev/presets/attributify#vue-3
import type { BasicAttributes, PseudoPrefix } from '@unocss/preset-attributify';
// https://github.com/unocss/unocss/pull/4095
type BasicAttributesFix = BasicAttributes | 'b';
type AttributifyNames<Prefix extends string = ''> =
| `${Prefix}${BasicAttributesFix}`
| `${Prefix}${PseudoPrefix}:${BasicAttributes}`;
declare module '@vue/runtime-dom' {
interface HTMLAttributes extends Partial<Record<AttributifyNames, string | boolean>> {}
}
export {};

11
tsconfig.app.json
View File

@ -10,15 +10,18 @@
"src/**/*",
"src/**/*.vue"
],
"exclude": ["src/**/__tests__/*"],
"exclude": [
"src/**/__tests__/*"
],
"compilerOptions": {
"composite": true,
// "skipLibCheck": false,
"moduleResolution": "Bundler",
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
"@/*": [
"./src/*"
]
}
}
}
}

108
vite.config.ts
View File

@ -24,58 +24,7 @@ export default defineConfig(({ mode, command }) => {
return {
base: env.VITE_BASE,
plugins: [
VueRouter({
// https://uvr.esm.is/guide/configuration.html
exclude: ['**/__*', '**/__*/**/*'],
getRouteName: (routeNode) => getPascalCaseRouteName(routeNode),
logs: false,
extensions: ['.vue', '.page.vue', '.md'],
}),
// other plugins
AutoImport({
resolvers: [
TDesignResolver({
library: 'mobile-vue',
esm: true,
}),
VantResolver({
importStyle: true,
}),
],
imports: ['pinia', 'vue', VueRouterAutoImports, unheadVueComposablesImports],
}),
Components({
// allow auto load markdown components under `./src/components/`
extensions: ['vue', 'md'],
// allow auto import and register components used in markdown
include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
resolvers: [
TDesignResolver({
library: 'mobile-vue',
esm: true,
}),
VantResolver({
importStyle: true,
}),
],
}),
UnoCSS(),
Vue({
include: [/\.vue$/, /\.md$/], // <-- allows Vue to compile Markdown files
}),
vueJsx(),
Markdown({
headEnabled: true,
}),
vueDevTools(),
cdnImport({
// https://github.com/mmf-fe/vite-plugin-cdn-import/blob/HEAD/README.zh-CN.md
modules: ['vue'],
prodUrl: '//fastly.jsdelivr.net/npm/{name}@{version}/{path}',
enableInDevMode: true,
}),
],
plugins: Plugins(),
define: {
$__DEV__: JSON.stringify(!isBuild),
},
@ -127,3 +76,58 @@ function isInNodeModules(id: string): boolean {
}
/* const CSS_LANGS_RE = /\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss)(?:$|\?)/;
const isCSSRequest = (request: string): boolean => CSS_LANGS_RE.test(request); */
function Plugins() {
return [
VueRouter({
// https://uvr.esm.is/guide/configuration.html
exclude: ['**/__*', '**/__*/**/*'],
getRouteName: (routeNode) => getPascalCaseRouteName(routeNode),
logs: false,
extensions: ['.vue', '.page.vue', '.md'],
}),
// other plugins
AutoImport({
resolvers: [
TDesignResolver({
library: 'mobile-vue',
esm: true,
}),
VantResolver({
importStyle: true,
}),
],
imports: ['pinia', 'vue', VueRouterAutoImports, unheadVueComposablesImports],
}),
Components({
// allow auto load markdown components under `./src/components/`
extensions: ['vue', 'md'],
// allow auto import and register components used in markdown
include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
resolvers: [
TDesignResolver({
library: 'mobile-vue',
esm: true,
}),
VantResolver({
importStyle: true,
}),
],
}),
UnoCSS(),
Vue({
include: [/\.vue$/, /\.md$/], // <-- allows Vue to compile Markdown files
}),
vueJsx(),
Markdown({
headEnabled: true,
}),
vueDevTools(),
cdnImport({
// https://github.com/mmf-fe/vite-plugin-cdn-import/blob/HEAD/README.zh-CN.md
modules: ['vue'],
prodUrl: '//fastly.jsdelivr.net/npm/{name}@{version}/{path}',
enableInDevMode: true,
}),
];
}