Comprehensive Guide to Building a Vue3 + Vite + TypeScript Project with Permission Management, Component Encapsulation, and Build Optimization

This guide walks through the creation of a Vue 3 application powered by Vite and TypeScript, starting with project initialization, environment setup, and modular architecture, and integrating Element Plus UI components and Axios for HTTP requests.

Key project points include using Vue 3 + Vite + TS as the base framework, configuring Axios interceptors for token‑based authentication, implementing role‑based route guards via vue-router hooks, and packaging reusable UI components such as PageHeader , EpTable , BtnGroup , and EpDialog . The guide also shows how to extend ElForm for flexible form validation and how to prepare the project for production deployment.

Routing configuration demonstrates creating router/index.ts , distinguishing public (e.g., login) and protected routes, setting up a proxy in vite.config.ts , and using AutoImport/Components for on‑demand Element Plus imports.

Permission management covers the login flow, role‑menu association, and two approaches to route permission: (1) loading the full route table with a global guard that checks meta fields, and (2) mounting a whitelist of public routes and dynamically adding protected routes after login via router.addRoute() . Page‑level permissions are handled in permission.ts using Pinia stores ( usePermissionStore ) and route guards; button‑level permissions use a custom v-permission directive that checks admin status and permission lists before rendering or removing elements. API permissions are enforced by Axios request/response interceptors that redirect to the login page on 400/401 responses and attach the token to every request.

Main layout development explains how the sidebar collapse button communicates via slot , provide , and inject , how the menu is rendered from stored data, and the component hierarchy ( layout → components → Sidebar → index.vue, SidebarMenu.vue, SidebarItem.vue ). It also details tag view handling by listening to route changes and using Pinia’s tagsViewStore.addView() to push new tabs, as well as a brief note on front‑end dictionaries for rendering select options.

Encapsulation strategies are illustrated with examples:

Component encapsulation using EpTable – configuring column properties ( sortable , fixed , prop , label , width , formatter , default ) via a props array, handling action buttons, and emitting events such as deleteItem for parent components to process.

Directive encapsulation with a custom v-permission directive that removes unauthorized buttons; the directive logic is shown in the code snippet: mounted(el, binding) { const permissionStore = usePermissionStore(); const staffStore = useStaffStore(); if (staffStore.staff?.role_code === superAdminRole) { return; } const hasPermission = permissionStore.permissions.includes(binding.value); if (!hasPermission) { el.remove(); } }

Hook encapsulation via a useScroll hook that returns a reactive scrollTop value and attaches/detaches a scroll event listener on the target element.

Axios encapsulation includes a base instance with baseURL , timeout , request interceptor adding the token, response interceptor extracting res.data , and helper methods for GET , POST , PUT , DELETE requests.

Module encapsulation example shows adding a new order: loading a JSON template, two‑way binding to a filmForm object, uploading images with Element Plus Upload , formatting data before sending via an Axios POST , and navigating back on success.

Build and optimization sections cover:

Using rollup-plugin-visualizer to generate a visual bundle analysis report.

Configuring manual chunk splitting in vite.config.ts to separate node_modules packages and customize file naming patterns.

Removing console.log and debugger statements with Terser options. Image compression via vite-plugin-imagemin with detailed plugin options for GIF, PNG, JPEG, and SVG optimization. Implementing route lazy‑loading using dynamic import() syntax. Enabling gzip compression with vite-plugin-compression , specifying algorithm, file extension, size threshold, and filter regex.

TypeScript fundamentals are summarized, covering basic types (boolean, number, string, symbol, undefined, null, any, never), function type signatures, object type definitions, interfaces (declaration, inheritance, merging), union types, class modifiers ( extends , super , public , private , static ), type assertions, and generics (generic functions, generic interfaces, and usage examples).