【vite-vue】demo项目创建

在日常开发中,我们常常会创建demo去测试我们封装的组件或者页面是否达到了预期的效果,但是这些demo通常会在测试后就删除。

为了便于日后遇到同样的问题能找到对应的demo,今天我们就来封装一个vite-vue的demo项目。

项目要点:

  1. 确保每个demo页之间的样式隔离
  2. home页面存在路由,便于导航

初始化demo项目

powershell 复制代码
npm create vite@latest 

项目结构

路径别名配置

配置路径别名,提升代码可维护性,降低输入成本。

ts 复制代码
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vite.dev/config/
export default defineConfig({
  resolve:{
    alias: {
      '@' : path.resolve(__dirname,'src')
    }
  },
  plugins: [
    vue()
  ],
})
json 复制代码
// tsconfig.app.json
{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,
    "paths": {
      "@/*":["./src/*"] //配置
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

页面路由配置

ts 复制代码
// router/index.ts
import { createRouter, createWebHistory, type RouteLocationRaw, type RouteRecordRaw } from 'vue-router'

export const routes:RouteRecordRaw[] = [
  {
    path: '/',
    name: 'home',
    component: () => import('@/views/home.vue'),
    meta: {
      title: 'home page'
    }
  },
  {
    path: '/test',
    name: 'test',
    component: () => import('@/views/demo-pages/test/test.vue'),
    meta: {
      title: 'test demo page'
    }
  }, 
]

export const router = createRouter({
  history: createWebHistory(),
  routes
})

export const routerPush = (to: RouteLocationRaw | string): void => {
  router.push(typeof to === 'string' ? {path:to} : to)
}

export const currentPageTitle =  ()=>{
  const title = router.currentRoute.value.meta.title
  return title ? title : ''
}

创建home页面,并将所有路由导航添加到该页面

vue 复制代码
// home.vue
<script lang="ts" setup>
import { routerPush, routes } from '@/router';
</script>
<template>
  <div>
    <ul>
      <li v-for="route in routes" :key="route.name" @click="routerPush(route.path)">{{ route.name }}</li>
    </ul>
  </div>
</template>
vue 复制代码
// app.vue
<script lang="ts" setup>
import { currentPageTitle } from './router';

</script>
<template>
  <div>
    <h1>{{ currentPageTitle() }}</h1>
    <RouterView></RouterView>
  </div>
</template>

效果

项目地址(github.com/ALiuYiLin/1...)

相关推荐
excel26 分钟前
CSS 里的斜杠 /:你可能忽略的小细节
前端
PBitW2 小时前
element plus 使用细节 (二)
前端·vue·element plus·element使用细节
zcz16071278212 小时前
Web详解
前端
良木林2 小时前
JS函数进阶
开发语言·前端·javascript
HelloRevit3 小时前
让B站视频4倍速度播放
前端·javascript·音视频
SEO_juper3 小时前
E-E-A-T与现代SEO:赢得搜索引擎信任的完整策略
前端·搜索引擎·seo·数字营销·seo优化·谷歌seo
一点一木3 小时前
2025 前端 3D 选型指南:Three.js、Babylon.js、WebGPU 深度对比
前端·javascript·3d
岭子笑笑3 小时前
vant 4 暗黑主题源码阅读
前端
匆叔4 小时前
JavaScript 性能优化实战技术
前端·javascript
子兮曰4 小时前
🚀前端环境变量配置:10个让你少加班的实战技巧
前端·node.js·前端工程化