1、基本的vue3项目框架搭建 详细vite创建vue3项目(vue3+vue-router+ts+vite+element-plus+pinia)-CSDN博客 2、配置@符号为项目根目录 import { defineConfig } from 'vite'import vue from'@vitejs/plugin-vue'import { resolve } from'path'exportdefaultdefineConfig({ plugins: [vue()],//解决“vite use...
npm create vite@latest vue-ts-app -- --template vue-ts # yarn yarn create vite vue-ts-app --template vue-ts # pnpm pnpm create vite vue-ts-app --template vue-ts 三、运行项目 安装插件:npm install 运行项目:npm run dev { "name": "vue-ts-app", "private": true, "version": "0....
然后把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:"/btns",name:"bottons",component:() =>import...
第三步:在项目的 main.ts文件夹引入和使用该插件和注册图标,即整合完成,main.ts文件如下所示import{ createApp }from'vue'importAppfrom'./App.vue'importrouterfrom'./router'importstorefrom'./store'constapp =createApp(App)// 引入 ElementPlus 插件(npm i element-plus)importElementPlusPluginfrom'@/plug...
/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> = [ ...
新建src/util/menu.ts,内容如下,用来生成菜单和路由数据。 importmenusfrom"@/data/menu" import{ RouteRecordRaw }from"vue-router" constviews =import.meta.glob('@/views/**/*.vue') exportconstgen = (userType:number): [IMenu[], RouteRecordRaw[]] => { ...
// useRoute Hooks import { toRefs } from 'vue' import {useRoute} from 'vue-router' let route = useRoute() let {params} = toRefs(route) 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18.
编辑src/views/Main.vue,template段el-main修改如下。<el-main> <el-scrollbar> <router-view v-slot="{ Component }"> <keep-alive> <component :is="Component" /> </keep-alive> </router-view> </el-scrollbar> </el-main> 再次测试,/Home不管切换几次它都只加载了一次,说明缓存成功了。路由...
vue3 vite ts 编程式路由导航 一、区别 1、获取路由器 let router = useRouter() 1. 2、使用 router.push({ name:'detail', query:news }) 1. 2. 3. 4. 二、案例 <template> {{ }} <RouterView></RouterView> </template> import { reactive } from "vue"; import {Router...
vue3创建router/index.ts 写路由的时候氛围无需权限路由(比如登录)和需要权限的路由。 在vite.config.ts里配置跨域 一般是proxy。 element 按需引入也是在vite.config.ts里通过AutoImport和Compontes去引入 // 配置element的中文 import zhCn from 'element-plus/dist/locale/zh-cn.mjs' ...