分享OpenTiny总结VUE目录结构

2024-04-02 20:28
文章标签 javascript 总结 vue 分享 结构 frontend 目录 opentiny

本文主要是介绍分享OpenTiny总结VUE目录结构，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

OpenTiny总结VUE目录结构，在设计规范和基础组件的基础上， 继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。

Vue 项目目录结构

├── node_modules  (为整个工作空间提供 npm 包)
├── src  (页面代码)
├── env (环境变量配置)
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── config (为工作区中的所有项目指定 CLI 的默认配置)
├── package.json  (配置工作空间中所有项目可用的 npm 包依赖)
├── README.md
├── tsconfig.json  (工作空间中所有项目的基本 TypeScript 配置)

页面代码结构

src 目录下是页面代码，对于大多数的情况，您只需要开发 src 目录下的文件。 推荐您在开发的过程中，遵守现有的目录结构，以使项目代码的组织结构更加规范。

若一个组件被多个页面所依赖，我们推荐您放到 src/components 中； 若只是被单个页面依赖的组件，我们推荐您放到就近的 view 目录。

|-- src|-- index.html  (主要 HTML 页面)|-- main.ts  (应用的主要挂载入口)|-- api  (包含接口和mock数据的文件)|-- assets (包含静态资源，国际化等文件)|   |-- style|   |-- img|-- components  (包含封装的组件文件)|   |-- breadcrumb (路由面包屑)|   |-- footer (底部)|   |-- global-setting (页面陪住)|   |-- menu (路由菜单)|   |-- navbar (头部导航)|   |-- theme (右下角主题切换)|-- directive (自定义指令)|-- hooks (自定义hook)|-- layout (页面布局)|-- locale  (国际化配置文件)|-- mock  (mock数据)|-- router  (router配置)|-- store  (pinia定义的状态管理)|-- types  (ts定义类型)|-- utils  (全局方法)|-- views  (项目页面)|   |-- board (看板页)|   |-- exception (异常页)|   |-- form (表单页)|   |-- list (列表页)|   |-- login (登录页)|   |-- not-found (404页)|   |-- profile (详情页)|   |-- result (结果页)|   |-- user (个人中心)|-- env (包含特定目标环境的构建配置选项)

在用户使用应用程序时，Vue 的路由器能让用户从一个视图导航到另一个视图。

核心模块和功能

  • 导航

    在src/router/routes/modules中根据你的路由进行配置。

  • 路由管理

    • 1.主路由
      在src/router/index中进行配置。

    • 2.页面路由
      在src/router/routes/modules中进行配置。

  • 面包屑

    可以参考src/compoments/breadcrumb中进行配置。

导航

导航的相关内容可以在src/router/routes/modules中进行修改。 menu数据格式如下所示：

export default {path: 'form',name: 'Form',id: 'Form',label: 'Form',component: () => import('@/views/form/index.vue'),meta: {locale: 'menu.form',icon: 'icon-settings',requiresAuth: true,order: 3,},children: [{path: 'base',name: 'Base',id: 'Base',label: 'Base',component: () => import('@/views/form/base/index.vue'),meta: {locale: 'menu.form.base',requiresAuth: true,roles: ['admin'],},},{path: 'step',name: 'Step',id: 'Step',label: 'Step',component: () => import('@/views/form/step/index.vue'),meta: {locale: 'menu.form.step',requiresAuth: true,roles: ['admin'],},},],
};

注意：在国际化文件中补充对应的修改内容

在导航中使用Vue的图标

在menu.ts中为配置项menuIcon传入VueIcon 组件的对应图标名称即可。

路由

项目中的路由分为主路由、页面路由详细配置如下：
主路由的配置文件在src/router/index

const router = createRouter({history: createWebHistory(),routes: [{path: '/',redirect: import.meta.env.VITE_CONTEXT + 'login',},{path: '/' + import.meta.env.VITE_CONTEXT,redirect: import.meta.env.VITE_CONTEXT + 'board/work',},{path: import.meta.env.VITE_CONTEXT + 'login',name: 'login',component: () => import('@/views/login/index.vue'),meta: {requiresAuth: false,},},{name: 'root',path: import.meta.env.VITE_CONTEXT,component: DefaultLayout,children: appRoutes,},{path: import.meta.env.VITE_CONTEXT + ':pathMatch(.*)*',name: 'notFound',component: () => import('@/views/not-found/index.vue'),},],
});export default router;

页面路由的配置文件src/router/routes/modules格式为：

export default {path: 'form',name: 'Form',id: 'Form',label: 'Form',component: () => import('@/views/form/index.vue'),meta: {locale: 'menu.form',icon: 'icon-settings',requiresAuth: true,order: 3,},children: [{path: 'base',name: 'Base',id: 'Base',label: 'Base',component: () => import('@/views/form/base/index.vue'),meta: {locale: 'menu.form.base',requiresAuth: true,roles: ['admin'],},},{path: 'step',name: 'Step',id: 'Step',label: 'Step',component: () => import('@/views/form/step/index.vue'),meta: {locale: 'menu.form.step',requiresAuth: true,roles: ['admin'],},},],
};

通过 Breadcrumb 面包屑组件breadcrumb实现，面包屑组件除最后一级外，其余几级一般都为可跳转的链接，链接地址可以通过 href 属性设置; 用户也可通过添加事件，实现业务逻辑, 如下所示：

<breadcrumb class="container-breadcrumb"><breadcrumb-item v-for="item in items" :key="item">{{ $t(item) }}</breadcrumb-item></breadcrumb>

对应的 ts 文件：

import { PropType } from 'vue';import {Breadcrumb,BreadcrumbItem,} from '@vue';defineProps({items: {type: Array as PropType<string[]>,default() {return [];},},});

新增页面

如果你想通过导航栏访问一个新页面，可通过此方法进行操作。新建页面的主要流程为在 src/view 目录中创建对应页面， 然后在模块中创建对应的组件，如果组件中需创建公共组件，则在 src/components 中创建。 下面以新建结果页为例，介绍新建页面的流程。

首先在src/view下新建一个页面：

增加路由访问

以上步骤完成后，需要为新增的页面在导航栏中添加对应的路由访问。

在 src/router/moudles中，添加路由信息。

export default {path: 'result',name: 'Result',id: 'Result',label: 'Result',component: () => import('@/views/result/index.vue'),meta: {locale: 'menu.result',icon: 'icon-check-circle',requiresAuth: true,order: 5,},children: [{path: 'success',name: 'Success',id: 'Success',label: 'Success',component: () => import('@/views/result/success/index.vue'),meta: {locale: 'menu.result.success',requiresAuth: true,roles: ['admin'],},},{path: 'error',name: 'Error',id: 'Error',label: 'Error',component: () => import('@/views/result/error/index.vue'),meta: {locale: 'menu.result.error',requiresAuth: true,roles: ['admin'],},},],
};

Mock 数据

支持不依赖后端，本地方便调试数据。

实现原理

实现前后端的我们需要将 data 文件和 service 文件分隔开。 在Vue中，我们在src/api中定义数据的类型，同时在src/api中实现相关的接口文件。

下面以登录为例，介绍 Mock 数据的使用。

首先需要在src/api/user.ts文件中定义数据参数类型：

import axios from 'axios';
import { UserState } from '@/store/modules/user/types';export interface LoginData {username: string;password: string;
}export function login(data: LoginData) {return axios.post<LoginRes>('/api/user/login', data);
}

在src/mock/user.ts文件中我们实现接口定义具体要模拟的数据。

{url: '/api/user/login',method: 'post',response: (params: MockParams) => {const { username, password } = JSON.parse(JSON.stringify(params.body));if (!username) {return failResponseWrap(null, '用户名不能为空', 50000);}if (!password) {return failResponseWrap(null, '密码不能为空', 50000);}if (username === 'admin' && password === 'admin') {window.localStorage.setItem('userRole', 'admin');return successResponseWrap({token: '12345',});}if (username === 'user' && password === 'user') {window.localStorage.setItem('userRole', 'user');return successResponseWrap({token: '54321',});}return failResponseWrap(null, '账号或者密码错误', 50000);},},

项目中使用

在src/view/login中调用你的 service：

   async login(loginForm: LoginData) {try {const res = await userLogin(loginForm);setToken(res.data.token);} catch (err) {clearToken();throw err;}},

国际化

Vue通过在src/locale的文件夹下添加不同语言的 ts 文件，引入Vue的国际化方案vue-i18n来实现国际化的相关功能。

安装

npm install vue-i18n --save

目录结构

.
├── src/
│   └── locale/
│       │    │── en-US/    (存放所有模块的英文翻译文件)
│       │    │── zh-CN/    (存放所有模块的中文翻译文件)
│       │    │── en-US.ts
│       │    └── zh-CN.ts

添加国际化代码

修改Vue应用入口文件main.ts。

export default {'settings.title': '页面配置','settings.themeColor': '主题色','settings.content': '内容区域','settings.search': '搜索','settings.language': '语言','settings.navbar': '导航栏','settings.menuWidth': '菜单宽度 (px)','settings.navbar.alerts': '消息通知','settings.navbar.help': '帮助中心','settings.menu': '菜单栏','settings.tabBar': '多页签','settings.footer': '底部','settings.otherSettings': '其他设置','settings.colorWeek': '主题配置','settings.alertContent':'配置之后仅是临时生效，要想真正作用于项目，点击下方的 "复制配置" 按钮，将配置替换到 settings.json 中即可。','settings.copySettings': '复制配置','settings.copySettings.message':'复制成功，请粘贴到 src/settings.json 文件中','settings.close': '关闭','settings.color.tooltip':'根据主题颜色生成的 10 个梯度色（将配置复制到项目中，主题色才能对亮色 / 暗黑模式同时生效）','setting.user.set': '用户设置','setting.loginout': '登出成功',
};....

在zh-CN.ts文件中引入对应的文件：

import localeLogin from '@/views/login/locale/zh-CN';
import localeTheme from '@/components/theme/locale/zh-CN';export default {...localeTheme,...localeLogin,
};

同理在英文的en-US文件夹下新建模块补充对应的英文翻译，并在en-US.ts的文件中引入。

个性化主题

Vue站点已添加了六套常用的主题(默认主题、糖蜜主题、紫罗兰主题、深邃夜空主题、深色主题、自定义主题)供大家参考，初始化为默认主题风格。

在线主题设置

Vue站点，我们已集成主题切换功能，你可以切换当前站点为我们已内置好的主题风格，并实时预览。

  

src/components/theme组件中，实现主题切换功能

<div class="theme-choose"><div><span>Light</span><span>Dark</span></div><div><div v-for="(index, item) in SwitchColor" :key="index"><divclass="theme-block":style="{ 'background-color': item.color }"@click="choose(item)"><iconYes v-if="item.value === index" class="theme-yes"></iconYes></div></div></div>
const choose = (item: {value?: number;color?: string;dark: any;theme: any;}) => {index.value = item.value;theme.changeTheme(item.theme);dark.value = item.dark as string;};

自定义扩展主题

增加自定义主题类型和自定义主题相关配置，参考src/components/theme/type里面的配置

const Theme = {id: 'theme',name: 'Theme',data: {'base-color-brand-1': '#f36b7f;','base-color-brand-2': '#f36b7f;','base-color-brand-3': '#f36b7f;','base-color-brand-4': '#f36b7f;','base-color-brand-5': '#f36b7f;','base-color-brand-6': '#f36b7f;','base-color-brand-7': '#f36b7f;','base-color-brand-8': '#f36b7f;',},
};

布局

Vue为页面开发提供了布局组件，并在页面集成常见的布局模式，可快速调整页面的布局方式。

布局组件

<container><template #header><layout><!-- 头部区域 --></layout></template><template #aside><layout class="layout-sider"><!-- 侧边栏区域 --></layout></template><layout class="layout-content"><!-- 内容区域 --></layout><template #footer><layout><!-- 页脚区域 --></layout></template>
</container>

布局调整

  • 修改src/layout/default-layout.config.ts属性信息文件，可修改页面的布局。
// 是否显示切换框架结构const mPattern = ref('legend');

状态管理

Vue通过在src/store的文件，引入Pinia来实现状态管理。

准备工作

安装依赖

npm install pinia -S

main中注册

import { createApp } from 'vue';
import globalComponents from '@/components';
import router from './router';
import store from './store';
import i18n from './locale';
import directive from './directive';
import { setupProdMockServer } from './mockProdServer';
import './mock';
import App from './App.vue';
import '@/api/interceptor';
import '@/assets/style/global.less';setupProdMockServer();const app = createApp(App);app.use(router);
app.use(store);
app.use(i18n({ locale: 'zhCN' }));
app.use(globalComponents);
app.use(directive);app.mount('#app');

建立store

import { createPinia } from 'pinia';
import useAppStore from './modules/app';
import useUserStore from './modules/user';
import useTabBarStore from './modules/tab-bar';const pinia = createPinia();export { useAppStore, useUserStore, useTabBarStore };
export default pinia;

项目中使用

在使用页面中引入你的store

import { useAppStore } from '@/store';const appStore = useAppStore();

调用store中的action方法

appStore.updateSettings({ navbar: true, footer: true });

权限管理

Vue通过在src/store/moudles/user文件结合路由，建立switchRoles方法来实现角色权限管理的。

项目使用方式

路由中设置角色显示标签[roles]

export default {path: 'exception',name: 'Exception',id: 'Exception',label: 'Exception',component: () => import('@/views/exception/index.vue'),meta: {locale: 'menu.exception',requiresAuth: true,icon: 'icon-exclamation-circle',order: 6,},children: [{path: '403',name: '403',id: '403',label: '403',component: () => import('@/views/exception/403/index.vue'),meta: {locale: 'menu.exception.403',requiresAuth: true,roles: ['admin'],},},{path: '404',name: '404',id: '404',label: '404',component: () => import('@/views/exception/404/index.vue'),meta: {locale: 'menu.exception.404',requiresAuth: true,roles: ['*'],},},{path: '500',name: '500',id: '500',label: '500',component: () => import('@/views/exception/500/index.vue'),meta: {locale: 'menu.exception.500',requiresAuth: true,roles: ['*'],},},],
};

store中书写`switchRoles`方法

switchRoles() {return new Promise((resolve) => {this.role = this.role === 'user' ? 'admin' : 'user';resolve(this.role);});},

页面中调用方法，来做到路由权限管理

 const switchRoles = async () => {const res = await userStore.switchRoles();Modal.message({message: res as string,status: 'success',});};

参见：

Vue.js - 渐进式 JavaScript 框架 | Vue.js

Pinia 中文文档

开始 | Vite 官方中文文档

npm Registry and npm CLI

Ant Design of React - Ant Design

Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js

TinyPro of Vue - 开箱即用的中台前端/设计解决方案 (opentiny.design)

这篇关于分享OpenTiny总结VUE目录结构的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/870969。

相关文章

Python+PyQt5实现文件夹结构映射工具

Python+PyQt5实现文件夹结构映射工具

《Python+PyQt5实现文件夹结构映射工具》在日常工作中,我们经常需要对文件夹结构进行复制和备份,本文将带来一款基于PyQt5开发的文件夹结构映射工具,感兴趣的小伙伴可以跟随小编一起学习一下... 目录概述功能亮点展示效果软件使用步骤代码解析1. 主窗口设计（FolderCopyApp）2. 拖拽路径
阅读更多...
使用Vue-ECharts实现数据可视化图表功能

使用Vue-ECharts实现数据可视化图表功能

《使用Vue-ECharts实现数据可视化图表功能》在前端开发中,经常会遇到需要展示数据可视化的需求,比如柱状图、折线图、饼图等,这类需求不仅要求我们准确地将数据呈现出来,还需要兼顾美观与交互体验,所... 目录前言为什么选择 vue-ECharts？1. 基于 ECharts，功能强大2. 更符合 Vue
阅读更多...
Vue中插槽slot的使用示例详解

Vue中插槽slot的使用示例详解

《Vue中插槽slot的使用示例详解》：本文主要介绍Vue中插槽slot的使用示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、插槽是什么二、插槽分类2.1 匿名插槽2.2 具名插槽2.3 作用域插槽三、插槽的基本使用3.1 匿名插槽
阅读更多...
springboot+vue项目怎么解决跨域问题详解

springboot+vue项目怎么解决跨域问题详解

《springboot+vue项目怎么解决跨域问题详解》：本文主要介绍springboot+vue项目怎么解决跨域问题的相关资料,包括前端代理、后端全局配置CORS、注解配置和Nginx反向代理,... 目录1. 前端代理（开发环境推荐）2. 后端全局配置 CORS（生产环境推荐）3. 后端注解配置（按接口
阅读更多...
Vue 2 项目中配置 Tailwind CSS 和 Font Awesome 的最佳实践举例

Vue 2 项目中配置 Tailwind CSS 和 Font Awesome 的最佳实践举例

《Vue2项目中配置TailwindCSS和FontAwesome的最佳实践举例》：本文主要介绍Vue2项目中配置TailwindCSS和FontAwesome的最... 目录vue 2 项目中配置 Tailwind css 和 Font Awesome 的最佳实践一、Tailwind CSS 配置1. 安
阅读更多...
CSS3 布局样式及其应用举例

CSS3 布局样式及其应用举例

《CSS3布局样式及其应用举例》CSS3的布局特性为前端开发者提供了无限可能，无论是Flexbox的一维布局还是Grid的二维布局，它们都能够帮助开发者以更清晰、简洁的方式实现复杂的网页布局，本文给... 目录深入探讨 css3 布局样式及其应用引言一、CSS布局的历史与发展1.1 早期布局的局限性1.2
阅读更多...
使用animation.css库快速实现CSS3旋转动画效果

使用animation.css库快速实现CSS3旋转动画效果

《使用animation.css库快速实现CSS3旋转动画效果》随着Web技术的不断发展，动画效果已经成为了网页设计中不可或缺的一部分，本文将深入探讨animation.css的工作原理，如何使用以及... 目录1. css3动画技术简介2. animation.css库介绍2.1 animation.cs
阅读更多...
CSS引入方式和选择符的讲解和运用小结

CSS引入方式和选择符的讲解和运用小结

《CSS引入方式和选择符的讲解和运用小结》CSS即层叠样式表，是一种用于描述网页文档（如HTML或XML）外观和格式的样式表语言,它主要用于将网页内容的呈现（外观）和结构（内容）分离，从而实现... 目录一、前言二、css 是什么三、CSS 引入方式1、行内样式2、内部样式表3、链入外部样式表四、CSS 选
阅读更多...
使用雪花算法产生id导致前端精度缺失问题解决方案

使用雪花算法产生id导致前端精度缺失问题解决方案

《使用雪花算法产生id导致前端精度缺失问题解决方案》雪花算法由Twitter提出,设计目的是生成唯一的、递增的ID,下面：本文主要介绍使用雪花算法产生id导致前端精度缺失问题的解决方案,文中通过代... 目录一、问题根源二、解决方案1. 全局配置Jackson序列化规则2. 实体类必须使用Long封装类3.
阅读更多...
Nginx部署React项目时重定向循环问题的解决方案

Nginx部署React项目时重定向循环问题的解决方案

《Nginx部署React项目时重定向循环问题的解决方案》Nginx在处理React项目请求时出现重定向循环,通常是由于`try_files`配置错误或`root`路径配置不当导致的,本文给大家详细介... 目录问题原因1. try_files 配置错误2. root 路径错误解决方法1. 检查 try_f
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2