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...
/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> = [ ...LoginRouter, { path: '...
记录一下使用 Vite 创建 Vue3+TS 项目并整合 ElementPlus、Axios、Pinia、Less、Vue-router 等组件或插件。 一、使用 Vite 创建 Vue3+TS 项目 1.新建一个 temp 文件夹 (1)在桌面新建一个 temp 文件夹,然后在 VS Code 中打开此文件夹,打开一个终端; ...
新建src/util/menu.ts,内容如下,用来生成菜单和路由数据。 importmenusfrom"@/data/menu" import{ RouteRecordRaw }from"vue-router" constviews =import.meta.glob('@/views/**/*.vue') exportconstgen = (userType:number): [IMenu[], RouteRecordRaw[]] => { ...
编辑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不管切换几次它都只加载了一次,说明缓存成功了。路由...
// 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.
npmivue-router@4 1. 2. 配置相关 ① 配置别名 vite.config.ts 代码: import{defineConfig}from'vite' importvuefrom'@vitejs/plugin-vue' constpath=require('path') importAutoImportfrom'unplugin-auto-import/vite' importComponentsfrom'unplugin-vue-components/vite' ...
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' ...