parent
f068148073
commit
ac463184f9
26 changed files with 1757 additions and 3 deletions
@ -0,0 +1,24 @@ |
||||
# Logs |
||||
logs |
||||
*.log |
||||
npm-debug.log* |
||||
yarn-debug.log* |
||||
yarn-error.log* |
||||
pnpm-debug.log* |
||||
lerna-debug.log* |
||||
|
||||
node_modules |
||||
dist |
||||
dist-ssr |
||||
*.local |
||||
|
||||
# Editor directories and files |
||||
.vscode/* |
||||
!.vscode/extensions.json |
||||
.idea |
||||
.DS_Store |
||||
*.suo |
||||
*.ntvs* |
||||
*.njsproj |
||||
*.sln |
||||
*.sw? |
||||
@ -0,0 +1,3 @@ |
||||
{ |
||||
"recommendations": ["Vue.volar"] |
||||
} |
||||
@ -0,0 +1,16 @@ |
||||
# Vue 3 + TypeScript + Vite |
||||
|
||||
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. |
||||
|
||||
## Recommended IDE Setup |
||||
|
||||
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) |
||||
|
||||
## Type Support For `.vue` Imports in TS |
||||
|
||||
Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps: |
||||
|
||||
1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled. |
||||
2. Reload the VS Code window by running `Developer: Reload Window` from the command palette. |
||||
|
||||
You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471). |
||||
@ -0,0 +1,13 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8" /> |
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||
<title>Vite-TS</title> |
||||
</head> |
||||
<body> |
||||
<div id="app"></div> |
||||
<script type="module" src="/src/main.ts"></script> |
||||
</body> |
||||
</html> |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,21 @@ |
||||
{ |
||||
"name": "vite-ts-project", |
||||
"private": true, |
||||
"version": "0.0.0", |
||||
"type": "module", |
||||
"scripts": { |
||||
"dev": "vite", |
||||
"build": "vue-tsc --noEmit && vite build", |
||||
"preview": "vite preview" |
||||
}, |
||||
"dependencies": { |
||||
"vue": "^3.2.37", |
||||
"vue-router": "^4.1.5" |
||||
}, |
||||
"devDependencies": { |
||||
"@vitejs/plugin-vue": "^3.1.0", |
||||
"typescript": "^4.6.4", |
||||
"vite": "^3.1.0", |
||||
"vue-tsc": "^0.40.4" |
||||
} |
||||
} |
||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,14 @@ |
||||
<script setup lang="ts"> |
||||
</script> |
||||
|
||||
<template> |
||||
<router-link :to="{name: 'Home'}">【首页】</router-link> |
||||
<router-link :to="{name: 'List'}">【列表】</router-link> |
||||
<router-link :to="{name: 'User'}">【我的】</router-link> |
||||
<router-link :to="{name: 'About'}">【关于】</router-link> |
||||
<hr/> |
||||
<router-view></router-view> |
||||
</template> |
||||
|
||||
<style scoped> |
||||
</style> |
||||
|
After Width: | Height: | Size: 496 B |
@ -0,0 +1,78 @@ |
||||
import { createApp } from 'vue' |
||||
import { createRouter, createWebHistory } from 'vue-router' |
||||
import './style.css' |
||||
import App from './App.vue' |
||||
|
||||
const router = createRouter({ |
||||
history: createWebHistory(), |
||||
routes: [ |
||||
{ |
||||
path: '/', |
||||
name: 'Home', |
||||
component: () => import ('./views/Home.vue'), |
||||
}, |
||||
{ |
||||
path: '/detail', |
||||
name: 'Detail', |
||||
component: () => import ('./views/Detail.vue'), |
||||
}, |
||||
{ |
||||
path: '/about', |
||||
name: 'About', |
||||
component: () => import ('./views/About.vue'), |
||||
}, |
||||
{ |
||||
path: '/list', |
||||
name: 'List', |
||||
component: () => import ('./views/List.vue'), |
||||
}, |
||||
{ |
||||
path: '/login', |
||||
name: 'Login', |
||||
component: () => import ('./views/Login.vue'), |
||||
}, |
||||
{ |
||||
path: '/user', |
||||
name: 'User', |
||||
component: () => import ('./views/User.vue'), |
||||
meta: { |
||||
needLogin: true, // 该页面需要登录
|
||||
}, |
||||
children: [ // 嵌套路由
|
||||
{ |
||||
path: 'info', |
||||
name: 'userInfo', |
||||
component: import('./views/User/Info.vue'), |
||||
}, |
||||
{ |
||||
path: 'scores', |
||||
name: 'userScores', |
||||
component: import('./views/User/Scores.vue'), |
||||
}, |
||||
{ |
||||
path: 'orders', |
||||
name: 'userOrders', |
||||
component: import('./views/User/Orders.vue'), |
||||
}, |
||||
] |
||||
}, |
||||
] |
||||
}) |
||||
|
||||
router.beforeEach((to,from,next) => { |
||||
// console.log(to.query);
|
||||
// 这里可以做路由拦截
|
||||
// 判断当前页面是否需要登录
|
||||
if (to.meta.needLogin) { |
||||
if (localStorage.getItem('token')) { // 有token不需要登陆
|
||||
next(); |
||||
}else { |
||||
next({ |
||||
name: 'Login', |
||||
}) |
||||
} |
||||
}else { |
||||
next(); |
||||
} |
||||
}) |
||||
createApp(App).use(router).mount('#app') |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h1>关于</h1> |
||||
</template> |
||||
@ -0,0 +1,12 @@ |
||||
<template> |
||||
<h1>详情</h1> |
||||
<hr /> |
||||
<div>查询条件为：{{query}}</div> |
||||
|
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { useRoute } from 'vue-router'; |
||||
const { query } = useRoute(); |
||||
|
||||
</script> |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h1>首页</h1> |
||||
</template> |
||||
@ -0,0 +1,32 @@ |
||||
<template> |
||||
<h1>列表</h1> |
||||
<hr /> |
||||
<div class="list"> |
||||
|
||||
<router-link |
||||
:to="{ name: 'Detail', query: { id: item.id } }" |
||||
v-for="item in courses" |
||||
:key="item.id" |
||||
><li>【{{ item.name }}】</li></router-link |
||||
> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { ref } from "vue"; |
||||
|
||||
const courses = ref([ |
||||
{ |
||||
id: 1, |
||||
name: "语文", |
||||
}, |
||||
{ |
||||
id: 2, |
||||
name: "数学", |
||||
}, |
||||
{ |
||||
id: 3, |
||||
name: "英语", |
||||
}, |
||||
]); |
||||
</script> |
||||
@ -0,0 +1,16 @@ |
||||
<template> |
||||
<h1>登录页</h1> |
||||
<button @click="login">点击登录</button> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { useRouter } from 'vue-router'; |
||||
const { replace } = useRouter(); |
||||
|
||||
const login = () => { |
||||
localStorage.setItem("token", "1111"); |
||||
replace({ |
||||
name: 'User', |
||||
}) |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,8 @@ |
||||
<template> |
||||
<h1>用户页</h1> |
||||
<router-link :to="{name: 'userInfo'}">【个人信息】</router-link> |
||||
<router-link :to="{name: 'userScores'}">【我的订单】</router-link> |
||||
<router-link :to="{name: 'userOrders'}">【我的积分】</router-link> |
||||
<hr /> |
||||
<router-view></router-view> |
||||
</template> |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h3>个人信息</h3> |
||||
</template> |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h3>我的订单</h3> |
||||
</template> |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h3>我的积分</h3> |
||||
</template> |
||||
@ -0,0 +1,7 @@ |
||||
/// <reference types="vite/client" />
|
||||
|
||||
declare module '*.vue' { |
||||
import type { DefineComponent } from 'vue' |
||||
const component: DefineComponent<{}, {}, any> |
||||
export default component |
||||
} |
||||
@ -0,0 +1,18 @@ |
||||
{ |
||||
"compilerOptions": { |
||||
"target": "ESNext", |
||||
"useDefineForClassFields": true, |
||||
"module": "ESNext", |
||||
"moduleResolution": "Node", |
||||
"strict": true, |
||||
"jsx": "preserve", |
||||
"sourceMap": true, |
||||
"resolveJsonModule": true, |
||||
"isolatedModules": true, |
||||
"esModuleInterop": true, |
||||
"lib": ["ESNext", "DOM"], |
||||
"skipLibCheck": true |
||||
}, |
||||
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], |
||||
"references": [{ "path": "./tsconfig.node.json" }] |
||||
} |
||||
@ -0,0 +1,9 @@ |
||||
{ |
||||
"compilerOptions": { |
||||
"composite": true, |
||||
"module": "ESNext", |
||||
"moduleResolution": "Node", |
||||
"allowSyntheticDefaultImports": true |
||||
}, |
||||
"include": ["vite.config.ts"] |
||||
} |
||||
@ -0,0 +1,7 @@ |
||||
import { defineConfig } from 'vite' |
||||
import vue from '@vitejs/plugin-vue' |
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({ |
||||
plugins: [vue()] |
||||
}) |
||||
Loading…
Reference in new issue