Merge pull request '配置路由' (#3) from Brunch_LPQ into main

pull/11/head
ppnwsfegt 2 months ago
commit 11f01edc24

@ -8,9 +8,11 @@
"name": "order-system",
"version": "0.0.0",
"dependencies": {
"vue": "^3.5.17"
"vue": "^3.5.17",
"vue-router": "^4.5.1"
},
"devDependencies": {
"@types/node": "^24.2.1",
"@vitejs/plugin-vue": "^6.0.0",
"@vue/tsconfig": "^0.7.0",
"typescript": "~5.8.3",
@ -806,6 +808,16 @@
"dev": true,
"license": "MIT"
},
"node_modules/@types/node": {
"version": "24.2.1",
"resolved": "https://registry.npmmirror.com/@types/node/-/node-24.2.1.tgz",
"integrity": "sha512-DRh5K+ka5eJic8CjH7td8QpYEV6Zo10gfRkjHCO3weqZHWDtAaSTFtl4+VMqOJ4N5jcuhZ9/l+yy8rVgw7BQeQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"undici-types": "~7.10.0"
}
},
"node_modules/@vitejs/plugin-vue": {
"version": "6.0.1",
"resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-6.0.1.tgz",
@ -913,6 +925,12 @@
"he": "^1.2.0"
}
},
"node_modules/@vue/devtools-api": {
"version": "6.6.4",
"resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
"integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
"license": "MIT"
},
"node_modules/@vue/language-core": {
"version": "2.2.12",
"resolved": "https://registry.npmmirror.com/@vue/language-core/-/language-core-2.2.12.tgz",
@ -1328,6 +1346,13 @@
"node": ">=14.17"
}
},
"node_modules/undici-types": {
"version": "7.10.0",
"resolved": "https://registry.npmmirror.com/undici-types/-/undici-types-7.10.0.tgz",
"integrity": "sha512-t5Fy/nfn+14LuOc2KNYg75vZqClpAiqscVvMygNnlsHBFpSXdJaYtXMcdNLpl/Qvc3P2cB3s6lOV51nqsFq4ag==",
"dev": true,
"license": "MIT"
},
"node_modules/vite": {
"version": "7.0.6",
"resolved": "https://registry.npmmirror.com/vite/-/vite-7.0.6.tgz",
@ -1431,6 +1456,21 @@
}
}
},
"node_modules/vue-router": {
"version": "4.5.1",
"resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.5.1.tgz",
"integrity": "sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==",
"license": "MIT",
"dependencies": {
"@vue/devtools-api": "^6.6.4"
},
"funding": {
"url": "https://github.com/sponsors/posva"
},
"peerDependencies": {
"vue": "^3.2.0"
}
},
"node_modules/vue-tsc": {
"version": "2.2.12",
"resolved": "https://registry.npmmirror.com/vue-tsc/-/vue-tsc-2.2.12.tgz",

@ -9,9 +9,11 @@
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.5.17"
"vue": "^3.5.17",
"vue-router": "^4.5.1"
},
"devDependencies": {
"@types/node": "^24.2.1",
"@vitejs/plugin-vue": "^6.0.0",
"@vue/tsconfig": "^0.7.0",
"typescript": "~5.8.3",

@ -1,30 +1,7 @@
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>
<!-- 作为应用程序的根组件并提供路由视图的容器 -->
<template>
<div>
<a href="https://vite.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<HelloWorld msg="Vite + Vue" />
<router-view/>
</template>
<style scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
<style lang="scss">
</style>

@ -1,37 +1,12 @@
<script setup lang="ts">
import { ref } from 'vue'
defineProps<{ msg: string }>()
const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<h1>测试路由搭载是否成功不需要msg</h1>
<div class="card">
<button type="button" @click="count++">count is {{ count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test HMR
</p>
</div>
<p>
Check out
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
>create-vue</a
>, the official Vue + Vite starter
</p>
<p>
Learn more about IDE Support for Vue in the
<a
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
target="_blank"
>Vue Docs Scaling up Guide</a
>.
</p>
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>
<style scoped>

@ -0,0 +1,10 @@
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
"types": ["vite/client"]
},
"exclude": ["node_modules", "dist"]
}

@ -1,5 +1,11 @@
import { createApp } from 'vue'
import './style.css'
// import './style.css' 将默认样式注释掉,避免影响后续开发
import router from './router' //将创建好的路由引入到main.ts中
import App from './App.vue'
createApp(App).mount('#app')
// createApp(App).mount('#app')
// 通过router创建,挂载路由
const app = createApp(App);
app.use(router).mount('#app')

@ -0,0 +1,20 @@
import { createRouter, createWebHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
import Layout from '@/components/HelloWorld.vue'
// console.log('组件路径:', HelloWorld.__file)
const routes: Array<RouteRecordRaw> = [
{
path: '/home',
name: 'Home',
component: Layout
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router

@ -1 +1,16 @@
/// <reference types="vite/client" />
/// <reference types="vite-plugin-vue/client" />
// 声明 Vue 文件模块
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
// 声明路径别名(可选,增强类型提示)
declare module '@/components/*' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}

@ -2,14 +2,27 @@
"extends": "@vue/tsconfig/tsconfig.dom.json",
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
/* Linting */
//
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
//
"lib": ["ESNext", "DOM"],
//
"module": "ESNext",
"moduleResolution": "Node",
//
"target": "ESNext",
"esModuleInterop": true,
"resolveJsonModule": true,
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
"jsx": "preserve"
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"vite-env.d.ts" //
]
}

@ -1,7 +1,32 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path' //导入nodejs核心模块path解构提取resolce方法
// https://vite.dev/config/
export default defineConfig({
plugins: [vue()],
server:{
host: '0.0.0.0',//解决控制台Network:use--host to expose
port: 8080,//配置端口号
hmr:true,//开启热更新
open:true//启动在浏览器打开
},
// resolve: {
// //为项目设置别名,简化项目路径
// alias: [
// {
// find: '@',
// replacement: resolve(__dirname, 'src')
// }
// ]
// }
resolve: {
// 修正为对象格式
alias: {
'@': path.resolve(__dirname, 'src'),
// 可以添加更多别名
'components': path.resolve(__dirname, 'src/components')
},
// 添加扩展名支持
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
}
})

Loading…
Cancel
Save