首先在views下创建一个bottons.vue组件来做测试页: 然后把bottons.vue路径添加到router的index.ts配置中 import{createRouter,createWebHistory}from'vue-router'constrouter =createRouter({history:createWebHistory(),routes: [ {path:"/",name:"home",component:() =>import("../views/Home.vue") }, {path...
"target":"esnext","strict":true,"jsx":"preserve","esModuleInterop":true,"sourceMap":true,"baseUrl":".","paths":{"@/*":["src/*"]},"types":["vue"]// 添加"vue"到 types 数组中},"include":["src/**/*.ts","src/**/*.tsx","src/**/*.vue","tests...
import path from 'path'import {defineConfig} from'vite'import vue from'@vitejs/plugin-vue'import AutoImport from'unplugin-auto-import/vite'import Components from'unplugin-vue-components/vite'import {ElementPlusResolver} from'unplugin-vue-components/resolvers'//@ts-ignoreimport Icons from 'unplug...
报这个原因就是vite中不能使用require的,在vue-cli3搭建的vue2项目中可以使用是因为webpack帮我们解决了 ② 路由配置 @/router/index.ts import{createRouter,createWebHashHistory,RouteRecordRaw}from'vue-router' importviewsRouterfrom'./views' importpageRouterfrom'./page' // 对RouteRecordRaw类型进行扩展 ex...
一、安装vue-router yarn add vue-router 二、创建页面 项目目录下新建views文件夹,添加文件(home、login、test) image.png 三、创建router文件夹 3.1、在src下新建router文件夹,在router文件下创建index.ts和modules文件夹 image.png 3.2、在 modules 文件夹下创建模块化的 ts 文件,并填入对应的代码 ...
vite2的模板默认安装下是没有路由的需要自行安装npm install vue-router@4 新建router文件夹创建index.ts // 引入创建路由管理器 引入创建路由模式history模式 import { createRouter, createWebHistory } from 'vue-router' import Home from "@/view/home.vue" // 使用别名@ ...
配置vite-env.d.ts 文件 /// <reference types="vite/client" /> declare module "*.vue" { import type { DefineComponent } from "vue"; const component: DefineComponent<{}, {}, any>; export default component; } 配置router下index.vue文件 ...
Vue 3 + TypeScript + Vite + Element-Plus + Router + Axios + Pinia项目搭建(内含完整架构) 安装Vue3+ts+vite npm init vite@latest 1. 选择y,新建项目名称,选择vue,选择vue-ts 下载完成后执行以下命令行 cd 新建的项目名称 npm i npm run dev ...
新建src/util/menu.ts,内容如下,用来生成菜单和路由数据。 importmenusfrom"@/data/menu" import{ RouteRecordRaw }from"vue-router" constviews =import.meta.glob('@/views/**/*.vue') exportconstgen = (userType:number): [IMenu[], RouteRecordRaw[]] => { ...
exportdefaultrouter 编辑src/main.ts,导入并使用路由。 importAppfrom'./App.vue' importrouterfrom'./router' app.use(ElementPlus).use(router) 测试 浏览器访问http://localhost:5173/#/login网页会显示这是登录页。 浏览器访问http://localhost:5173/#/网页会显示这是主页。