ui_template

Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Learn more about the recommended Project Setup and IDE Support in the Vue Docs TypeScript Guide.

前端模板项目

node18

Vue 3 + TypeScript + Vite6

构建过程

1. 项目初始化

   npm create vite@6
   

2. 添加vue-router和elementPlus依赖

   • 安装

     npm install vue-router@4
     npm install element-plus --save
     

   • 配置

     const routes:RouteRecordRaw[] = [
     {
        path: '/',
        name: 'commonLayout',
        component: CommonLayout,
        children: [
            {
                path: '/',
                name: 'home',
                component: HomeView
            },
            {
                path: '/about',
                name: 'about',
                component: AboutView
            },
        ],
     },
     ]
        
     const router : Router = createRouter({
     history: createWebHistory(),
     routes: routes,
     });
     export default router
     

   • 使用

     app.use(router)
     app.use(ElementPlus)
     

3. 添加状态管理依赖

   • 安装

     npm install pinia
     

   • 配置

   • 使用

     import { createPinia } from 'pinia'
     const pinia = createPinia()
     app.use(pinia)
     

4. 添加axios依赖

5. openAPI自动生成接口调用