Mdg-components-web NPM

墨点狗智能科技（东莞）有限公司前端通用 Web 端组件库

技术栈

编程语言：TypeScript 4.x + JavaScript
构建工具：Vite 2.x
前端框架：Vue 3.x
路由工具：Vue Router 4.x
状态管理：Vuex 4.x
UI 框架：Element Plus 2.0.2
CSS 预编译：Sass
HTTP 工具：Axios
Echarts 图表库：Echarts 5.x
代码规范：EditorConfig + Prettier + ESLint

快速开始

安装依赖

yarn
# or
npm install

启动项目

yarn dev
# or
npm run dev

项目打包

yarn build
# or
npm run build

启动 vitepress

yarn docs:dev
# or
npm run docs:dev

打包 vitepress

yarn docs:build
# or
npm run docs:build

项目目录

|-- mdg-components-web                          -- 项目目录
    |-- .editorconfig                           -- 编辑器配置
    |-- .eslintrc.js                            -- eslint配置
    |-- .gitignore                              -- git配置
    |-- auto-imports.d.ts                       -- Element Plus 自动导入配置
    |-- components.d.ts                         -- Element Plus 组件引入配置
    |-- index.html                              -- 项目的默认首页，Vue的组件需要挂载到这个文件上
    |-- package-lock.json                       -- npm方式项目包的锁定文件，用于防止包版本不一样导致的错误
    |-- package.json                            -- 项目配置文件，包管理、项目名称、版本和命令
    |-- prettier.config.js                      -- prettier配置
    |-- README.md                               -- 项目介绍
    |-- tsconfig.json                           -- typescript 配置
    |-- vite.config.ts                          -- vite配置，原vue2.x的vue.config.js
    |-- yarn.lock                               -- yarn方式项目包的锁定文件，用于防止包版本不一样导致的错误
    |-- dist                                    -- 打包目录
    |-- docs                                    -- 文档目录
    |   |-- changelog.md                        -- 更新记录页
    |   |-- guide.md                            -- 指南页
    |   |-- index.md                            -- 首页
    |   |-- .vitepress                          -- vitepress配置目录
    |   |   |-- config.js                       -- vitepress主配置文件
    |   |   |-- configs                         -- vitepress路由配置目录
    |   |   |   |-- sidebar.js                  -- vitepress路由
    |   |   |   |-- utils.js                    -- vitepress路由引入方法文件
    |   |   |-- dist                            -- vitepress打包后的文件目录
    |   |   |-- theme                           -- vitepress主题目录
    |   |       |-- index.js                    -- vitepress主题配置，相当于main.ts
    |   |       |-- register-components.js      -- 注册组件，用于demo中使用
    |   |       |-- styles                      -- vitepress样式目录
    |   |           |-- index.css               -- vitepress公共主题样式
    |   |-- components                          -- 组件文档目录
    |   |-- public                              -- 说明文档静态资源目录
    |   |   |-- logo.svg                        -- logo文件
    |   |   |-- images                          -- 图片目录
    |-- public                                  -- 项目公用文件
    |   |-- favicon.ico                         -- 网站地址栏前面的小图标
    |-- src                                     -- 源文件目录
        |-- App.vue                             -- 项目的根组件，单页应用都需要的
        |-- main.ts                             -- 项目入口文件，SPA单页应用都需要入口文件
        |-- shims-vue.d.ts                      -- typescript声明文件
        |-- vite-env.d.ts                       -- vite环境变量
        |-- assets                              -- 静态资源文件
        |   |-- common                          -- 用来存放系统通用图片
        |   |-- images                          -- 用来存放实际项目图片
        |   |-- logo                            -- 用来存放公司logo
        |       |-- mdg-logo.png
        |   |-- result                          -- 用来存放空态等状态图
        |-- common                              -- 公共方法及公共常量
        |-- components                          -- 公用组件
        |   |-- HelloWorld.vue
        |-- request                             -- api接口请求
        |   |-- module1                         -- 模块1的接口
        |   |   |-- page1.ts
        |   |-- module2                         -- 模块2的接口
        |-- router                              -- vue-router路由文件夹
        |   |-- index.ts                        -- vue-router首页及配置
        |   |-- component.ts                    -- 组件的路由
        |   |-- page.ts                         -- 集成页面的路由
        |-- store                               -- vuex文件夹
        |   |-- index.ts                        -- vuex首页及配置
        |   |-- types.ts                        -- 类型声明文件
        |   |-- modules                         -- 模块文件夹，可根据实际情况新增删除
        |       |-- page1                       -- 模块1的状态管理
        |           |-- index.ts
        |           |-- types.ts
        |-- styles                              -- 公用样式配置
        |-- utils                               -- 工具函数目录
            |-- axios.ts                        -- axios配置
        |-- views                               -- 页面组件目录
            |-- component                       -- 组件目录
            |   |-- components                  -- 组件模块的组件
            |   |-- pages                       -- 组件模块的页面
            |       |-- index.vue
            |-- page                            -- 集成页的目录
            |   |-- components                  -- 集成页的组件
            |   |-- pages                       -- 集成页的页面
            |       |-- index.vue