1、npm create vite@latest ->输入项目名称->选择vue->选择ts->根据提示进行 2、安装vue-router,输入命令npm install vue-router@4 -s 3、安装element-plus,输入命令npm install element-plus -s 4、安装less,输入命令npm install less -s 5、安装icons,输入命令npm install @element-plus/icons-vue -s 6...
3.3、完善 /src/router/inde.ts 文件 // history模式import{createRouter,createWebHistory,RouteRecordRaw}from'vue-router';// 引用test.tsimporttestRoutefrom'./modules/test.ts';exportconstpublicRoutes:Array<RouteRecordRaw>= [ // 路由的路径 ...testRoute,{path:'/',name:'Home',component:()=>impo...
index.vue主要是配置layout布局,如下: 2.4路由配置 我们新建 router/routes.ts 引入layout布局,主要存放路由信息,代码如下: // 引入创建路由模式 history模式 import Layout from '../layout/index.vue' // 引入路由各页面配置 const routes = [ { path: '/login', name: 'login', component: () => import...
const router = createRouter({ history: createWebHashHistory(),// 路由跳转模式 ,hash模式会带#号 /#/xxx. routes }) exportdefaultrouter 2.现在使用的是vue3+ts的方式去实现,所以 RouteRecordRaw 里指定的类型必然不能满足日常的需要,接下来看一下源码。对RouteRecortdRaw的类型支持。 不难发现,每一个类...
报这个原因就是vite中不能使用require的,在vue-cli3搭建的vue2项目中可以使用是因为webpack帮我们解决了 ② 路由配置 @/router/index.ts import{createRouter,createWebHashHistory,RouteRecordRaw}from'vue-router' importviewsRouterfrom'./views' importpageRouterfrom'./page' ...
—— router :/ 路由文件 —— styles :/ 样式文件 —— views :/ 主要功能组件 —— App.vue —— main.ts index.html :/入口html tsconfig.json :/ typescript配置文件 vite.config.mjs :/ vite项目的主要配置文件 以下是每个文件简单的结构
3.项目创建 选择Vue 选择TypeScript 4. cd my_vue 到项目目录,准备安装依赖 5. npm install 安装依赖 6.运行项目 npm run dev 7.http://localhost:5173/打开页面 8.安装router 路由 npm installvue-router--save 9.安装pinia(vue 状态管理)js可安装vuex ...
新建src/util/menu.ts,内容如下,用来生成菜单和路由数据。 import menus from "@/data/menu" import { RouteRecordRaw } from "vue-router" const views = import.meta.glob('@/views/**/*.vue') export const gen = (userType: number): [IMenu[], RouteRecordRaw[]] => { return gen2(userType...
/src/router/inde.ts 文件,这样写: import type { App } from 'vue' // 引入 login.ts import LoginRouter from './modules/login' import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router' export const publicRoutes: Array<RouteRecordRaw> = [ ...