【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...)

相关推荐
爱上妖精的尾巴19 分钟前
5-16WPS JS宏 map数组转换迭代应用-1(一维嵌套数组结构重组)
开发语言·前端·javascript·wps·jsa
OEC小胖胖28 分钟前
交互的脉络:小程序事件系统详解
前端·微信小程序·小程序·微信开放平台
DokiDoki之父41 分钟前
web核心—HTTP
前端·网络协议·http
咖啡の猫44 分钟前
Vue 简介
前端·javascript·vue.js
Moment1 小时前
写代码也能享受?这款显示器让调试变得轻松又高效!😎😎😎
前端·后端
゜ eVer ㄨ1 小时前
React-router v6学生管理系统笔记
前端·笔记·react.js
m0_526119401 小时前
pdf文件根据页数解析成图片 js vue3
前端·javascript·pdf
时光少年1 小时前
Compose AnnotatedString实现Html样式解析
android·前端
用户904706683572 小时前
假数据生成器——JSONPlaceholder
前端
光影少年2 小时前
react16中的hooks的底层实现原理
前端·react.js·掘金·金石计划