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

技术栈

• 编程语言：TypeScript 4.x + JavaScript
• 构建工具：Vite 2.x
• 前端框架：Vue 3.x
• 路由工具：Vue Router 4.x
• 状态管理：Vuex 4.x
• UI 框架：Vant 3
• CSS 预编译：Sass
• HTTP 工具：Axios
• Vant 组件库：Vant
• 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-wx                   -- 项目目录
    |-- .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                    -- 项目配置文件，包管理、项目名称、版本和命令
    |-- postcss.config.js               -- 移动端适配配置文件，px转vw
    |-- 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
    |   |       |-- 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            -- 组件路由
        |-- store                       -- vuex文件夹
        |   |-- index.ts                -- vuex首页及配置
        |   |-- types.ts                -- 类型声明文件
        |   |-- modules                 -- 模块文件夹，可根据实际情况新增删除
        |       |-- page1               -- 模块1的状态管理
        |           |-- index.ts
        |           |-- types.ts
        |-- styles                      -- 公用样式配置
        |-- utils                       -- 工具函数目录
            |-- axios.ts                -- axios配置
            |-- vant.ts                 -- vant按需引入
        |-- views                       -- 页面组件目录
            |-- component                 -- 组件目录
            |   |-- components          -- 组件的组件
            |   |-- pages               -- 组件的页面
            |       |-- index.vue

作者

王星宇

许可

MIT Copyright © 2022 MDG