Слияние кода завершено, страница обновится автоматически
Шаблон для среднего и заднего конца на основе Vue3, Vite, ElementPlus, Pinia, VueUse и других технологий. Включает часто используемые функции и хуки, а также подходы к их реализации. Использует последнюю стек технологий фронтенда, имеет соответствующие кодовые стандарты и стандарты коммитов, готов к использованию из коробки и может использоваться для обучения и справки.
Строится на основе Vue3, Vite, pnpm, имеет очень быструю скорость запуска
Встроенная тема Dark Mode, общая стилистика минималистичная
Динамическое управление правами, динамическое меню, глобальное управление состоянием страниц и т.д.
Мониторинг производительности и журналов системы, также может использоваться для сбора данных и мониторинга поведения пользователей
Упакованы часто используемые компоненты, включая динамические формы, динамические таблицы, виртуальные выборники, предварительный просмотр данных, группировка деревьев и т.д.- Упакованы общие хуки, включая запросы к сети, таблицы, формы, периодические запросы, параллельные задачи, слушатели событий, сокет-коммуникацию и т.д.
Используется кэширование на уровне страниц с помощью keep-alive, что позволяет сохранять состояние страниц при возврате.
Предоставлены подходы и решения для выполнения множества задач, обработки множества DOM (рендеринг кадров).
Упакованы компоненты выбора эмодзи для iOS и WeChat.
Включены общие функции и эффекты canvas, такие как водяные знаки, фейерверки, звездное небо, панели для подписей, вращающиеся диски и т.д.
Вторичная упаковка и глобальное автоматическое импортирование элементов ElementPlus.
Включены общие сторонние плагины, а также демонстрационные примеры.
Используется mediainfo.js для чтения форматов видео, video.js для совместимости с m3u8.
Используется dexie для создания базы данных indexDB для локального хранения журналов и массового отчета.
Используется eslint + prettier для проверки стиля кода.
Используется husky + lint-staged + cz-git для проверки коммитов.
Функции системы постоянно обновляются...
Уведомление о новых версиях в фронтенде, автоматическое обновление страницы после обновления версии
Использование анимации кадров для длинных форм и списков, повышение производительности отображения страницы
Удаление логов консоли в режиме производства, сокращение размера сборки
build: {
minify: 'esbuild', // terser, esbuild
terserOptions: {
// удаление логов при использовании terser
compress: { drop_console: true, drop_debugger: true },
},
},
// удаление логов при использовании esbuild
esbuild: {
drop: mode === 'production' ? ['console', 'debugger'] : [],
},
rollupOptions: {
input: {
index: resolve(__dirname, `index.html`),
},
output: {
// разделение больших и редко изменяющихся файлов для кэширования, уменьшение необходимости загрузки данных с сервера
manualChunks: {
'main/chunk-vue': ['vue'],
'main/chunk-vue-router': ['vue-router'],
'main/chunk-echarts': ['echarts'],
'main/chunk-lodash-es': ['lodash-es'],
'main/chunk-element-plus': ['element-plus'],
'main/chunk-vue-virtual-scroller': ['vue-virtual-scroller'],
'main/chunk-dexie': ['dexie'],
'main/chunk-fingerprintjs': ['@fingerprintjs/fingerprintjs'],
'main/chunk-sortablejs': ['sortablejs'],
'main/chunk-vuedraggable': ['vuedraggable'],
},
chunkFileNames: 'assets/js/[name]-[hash].js',
entryFileNames: 'assets/js/[name]-[hash].js',
assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
},
}
```- Константы и перечисления, упрощение получения значений
```bash
// enums.js
export class EnumArray extends Array {
getLabel(value) {
return this.find((item) => item?.value === value)?.label || '';
}
getValue(label) {
return this.find((item) => item?.label === label)?.value || '';
}
getValues() {
return this.map((item) => item.value);
}
getLabels() {
return this.map((item) => item.label);
}
getItem(value) {
return this.find((item) => item?.value === value) || {};
}
}
// использование
const RoleType = new EnumArray(
{ label: 'Создатель', value: 1 },
{ label: 'Суперадминистратор', value: 2 },
{ label: 'Обычный администратор', value: 3 },
);
Перед началом работы необходимо установить pnpm.
В соответствии с официальными требованиями, для использования vite3 и vite4 версии Node.js должны быть 14.18.0 или выше. При возникновении ошибок с зависимостями рекомендуется переустановить vite.
pnpm create vite@latest
pnpm install
pnpm run dev
pnpm run build
1. Prettier - Кодовый форматтер
2. Vue Language Features (Volar)
3. Vue 3 Snippets
4. ESLint
eslint + prettier + stylelint
pnpm run lint
pnpm run lint:lint-staged
husky + lint-staged + cz-git + commitizen
``````bash
{
"name": "my-helper",
"private": true,
"version": "0.0.0",
"scripts": {
"prepare": "husky install",
"dev": "vite",
"build": "node updateVersion.js && vite build",
"preview": "vite preview --host --mode development",
"lint": "eslint --ext .js,.vue src",
"lint:lint-staged": "lint-staged",
"commit": "git add . && git-cz"
},
"dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
"@element-plus/icons-vue": "^2.1.0",
"@fingerprintjs/fingerprintjs": "^4.1.0",
"@videojs-player/vue": "^1.0.0",
"@vueuse/components": "^10.7.0",
"@vueuse/core": "^10.1.2",
"axios": "^1.4.0",
"dayjs": "^1.11.9",
"dexie": "^3.2.4",
"echarts": "^5.4.3",
"echarts-gl": "^2.0.9",
"element-plus": "^2.4.3",
"install": "^0.13.0",
"lodash": "^4.17.21",
"mediainfo.js": "^0.2.1",
"mqtt": "^5.1.3",
"nprogress": "^0.2.0",
"pinia": "^2.0.36",
"sortablejs": "^1.15.0",
"terser": "^5.18.0",
"video.js": "^8.6.1",
"vue": "^3.2.47",
"vue-draggable-plus": "^0.3.2",
"vue-lazyload": "^3.0.0",
"vue-router": "^4.1.6",
"vue-virtual-scroller": "2.0.0-beta.8",
"vuedraggable": "^4.1.0"
},
"devDependencies": {
"@iconify-json/ep": "^1.1.12",
"@vitejs/plugin-vue": "^4.1.0",
"@vitejs/plugin-vue-jsx": "^3.0.1",
"babel-eslint": "^10.1.0",
"commitizen": "^4.3.0",
"cz-git": "^1.7.1",
"eslint": "^8.36.0",
"eslint-config-prettier": "^8.7.0",
"eslint-plugin-json": "^3.1.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.9.0",
"husky": "^8.0.3",
"lint-staged": "^15.2.0",
"prettier": "^2.8.8",
"sass": "^1.62.1",
"vite": "^4.3.2",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-vue-setup-extend": "^0.4.0"
},
"config": {
"commitizen": {
"path": "node_modules/cz-git"
}
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*. {js,ts,vue}": [
"pnpm run lint",
"prettier --write"
]
}
}
```## Структура директорий```
my-helper
├─ .commitlintrc.js
├─ .eslintignore
├─ .eslintrc.js
├─ .husky
│ ├─ pre-commit
│ └─ _
│ └─ husky.sh
├─ .prettierignore
├─ .prettierrc.js
├─ index.html
├─ jsconfig.json
├─ package-lock.json
├─ package.json
├─ pnpm-lock.yaml
├─ public
│ ├─ account-list
│ │ ├─ ic-account-avatar-default.jpg
│ │ ├─ ic-account-avatar1.jpg
│ │ ├─ ic-account-avatar2.jpg
│ │ ├─ ic-account-avatar3.jpg
│ │ └─ ic-account-avatar4.jpg
│ ├─ first-screen-loading
│ │ └─ index.css
│ ├─ mediainfo
│ │ ├─ mediainfo
│ │ │ └─ index.js
│ │ └─ MediaInfoModule.wasm
│ ├─ menu-icon
│ │ ├─ canvas.png
│ │ ├─ css-vfx.png
│ │ ├─ directives.png
│ │ ├─ el-encap.png
│ │ ├─ familiar-api.png
│ │ ├─ familiar-function.png
│ │ ├─ feature.familiar.png
│ │ ├─ feature.png
│ │ ├─ index.png
│ │ ├─ logs.png
│ │ ├─ not-popular-label.png
│ │ ├─ note.png
│ │ ├─ render-optimize.png
│ │ ├─ system.png
│ │ ├─ test.png
│ │ └─ third-party.png
│ ├─ note
│ │ ├─ jsknowledge.html
│ │ ├─ note.css
│ │ └─ software.html
│ ├─ avatar.jpg
│ ├─ version.js
│ └─ vite.svg
├─ README.md
├─ rules
│ └─ eslint.js
├─ src
│ ├─ apis
│ │ └─ setting.js
│ ├─ App.vue
│ ├─ assets
│ │ ├─ common
│ │ │ ├─ drag.svg
│ │ │ ├─ ic-emoji.png
│ │ │ └─ ic-user-avatar.jpg
│ │ ├─ emojis
│ │ │ ├─ ic-ios-emoji.png
│ │ │ └─ ic-wx-emoji.png
│ │ ├─ img-lazy.jpg
│ │ └─ vue.svg
│ ├─ components
│ │ ├─ auth-control
│ │ │ └─ index.vue
│ │ ├─ c-form
│ │ │ ├─ form-item copy.vue
│ │ │ ├─ form-item.vue
│ │ │ ├─ form.console.warn.js
│ │ │ └─ index.vue
│ │ ├─ canvas-demo
│ │ │ └─ stars-bg.vue
│ │ ├─ cropper
│ │ │ └─ index.vue
│ │ ├─ css-demo
│ │ │ ├─ ball-rolling.vue
│ │ │ ├─ clock.vue
│ │ │ ├─ cube.vue
│ │ │ ├─ malaria.vue
│ │ │ └─ index.vue
│ │ └─ index.vue
│ └─ index.vue
└─ index.vue│ │ │ ├─ копия-приза. vue
│ │ │ └─ приз. vue
│ │ ├─ пользовательский-глобальный-элемент
│ │ │ ├─ c-карта
│ │ │ │ └─ индекс. vue
│ │ │ ├─ c-календарь
│ │ │ │ └─ индекс. vue
│ │ │ ├─ c-диалог
│ │ │ │ └─ индекс. vue
│ │ │ ├─ c-вывод
│ │ │ │ └─ индекс. vue
│ │ │ ├─ c-пустота
│ │ │ │ └─ индекс. vue
│ │ │ ├─ c-форма
│ │ │ │ ├─ элемент-формы. vue
│ │ │ │ └─ индекс. vue
│ │ │ ├─ c-ручка
│ │ │ │ └─ индекс. vue
│ │ │ ├─ c-ввод
│ │ │ │ └─ индекс. vue
│ │ │ ├─ c-пагинация
│ │ │ │ └─ индекс. vue
│ │ │ ├─ c-попап
│ │ │ │ └─ индекс. vue
│ │ │ ├─ c-выбор
│ │ │ │ └─ индекс. vue
│ │ │ ├─ c-переключатель
│ │ │ │ └─ индекс. vue
│ │ │ ├─ c-таблица
│ │ │ │ └─ индекс. vue
│ │ │ └─ индекс. js
│ │ ├─ демонстрация-echarts
│ │ │ ├─ echart-столбчатая. vue
│ │ │ ├─ echart-линейная. vue
│ │ │ └─ echart-пироговая. vue
│ │ ├─ эмодзи-выбор
│ │ │ ├─ эмодзи-ios. js
│ │ │ ├─ эмодзи-wx. js
│ │ │ ├─ эмодзи. css
│ │ │ └─ индекс. vue
│ │ ├─ пример-контейнер
│ │ │ └─ индекс. vue
│ │ ├─ группы-меню
│ │ │ └─ таблица-группы. vue
│ │ ├─ загрузка
│ │ │ └─ спиральная-загрузка. vue
│ │ ├─ выбор-представления
│ │ │ └─ индекс. vue
│ │ ├─ попап
│ │ │ └─ эмодзи-попап. vue
│ │ ├─ показ-карты
│ │ │ └─ индекс. vue
│ │ ├─ загрузка
│ │ │ ├─ загрузка-файла. vue│ │ │ ├─ загрузка-изображения. vue
│ │ │ └─ загрузка-изображений. vue
│ │ ├─ видео-плеер
│ │ │ └─ индекс. vue
│ │ ├─ виртуальный-скролл
│ │ │ ├─ виртуальный-скролл-проверка. vue
│ │ │ ├─ виртуальный-скролл-радио. vue
│ │ │ └─ виртуальный-скролл-показ. vue
│ │ └─ виртуальный-скролл-модальное
│ │ ├─ больше-модальное. vue
│ │ ├─ показ-вывода. vue
│ │ └─ одно-модальное. vue
│ ├─ конфигурация
│ │ ├─ конфигурация. js
│ │ ├─ global-variable. js
│ │ ├─ storage-variable. js
│ │ └─ variable-map. js
│ ├─ directives
│ │ ├─ click-outside
│ │ │ └─ index. js
│ │ ├─ focus
│ │ │ └─ index. js
│ │ ├─ index. js
│ │ ├─ resize
│ │ │ └─ index. js
│ │ └─ watermark
│ │ └─ index. js
│ ├─ hooks
│ │ ├─ useAsyncComponent
│ │ │ └─ index. js
│ │ ├─ useDefer
│ │ │ └─ index. js
│ │ ├─ useDynamicTime
│ │ │ └─ index. js
│ │ ├─ useEventListener
│ │ │ └─ index. js
│ │ ├─ useFetch
│ │ │ └─ index. js
│ │ ├─ useForm
│ │ │ └─ index. js
│ │ ├─ useMqtt
│ │ │ └─ index. js
│ │ ├─ usePolling
│ │ │ └─ index. js
│ │ ├─ useSuperTask
│ │ │ └─ index. js
│ │ ├─ useTable
│ │ │ └─ index. js
│ │ └─ useWatermark
│ │ └─ index. js
│ ├─ layout
│ │ ├─ components
│ │ │ ├─ aside
│ │ │ │ ├─ aside-item. vue
│ │ │ │ └─ index. vue
│ │ │ ├─ breadcrumb
│ │ │ │ └─ index. vue
│ │ │ ├─ footer
│ │ │ │ └─ index. vue
│ │ │ ├─ header
│ │ │ │ └─ index. vue
│ │ │ ├─ menu
│ │ │ │ ├─ index. vue
│ │ │ │ └─ menu-item. vue │ │ │ └─ tabs
│ │ │ └─ index.vue
│ │ └─ index.vue
│ ├─ main.js
│ ├─ pinia
│ │ ├─ index.js
│ │ └─ modules
│ │ ├─ example.js
│ │ ├─ global.js
│ │ ├─ modal.js
│ │ ├─ router.js
│ │ └─ user.js
│ ├─ router
│ │ ├─ index.js
│ │ └─ routes.js
│ ├─ styles
│ │ ├─ atom.css
│ │ ├─ color.css
│ │ ├─ common.scss
│ │ ├─ mixin.scss
│ │ ├─ normalize.css
│ │ └─ reset.css
│ ├─ utils
│ │ ├─ chainedMode.js
│ │ ├─ day.js
│ │ ├─ db.js
│ │ ├─ echarts.js
│ │ ├─ enums.js
│ │ ├─ fetch.js
│ │ ├─ fingerprint.js
│ │ ├─ helpers.js
│ │ ├─ mediainfo.js
│ │ ├─ message-box.js
│ │ ├─ monitor-error.js
│ │ ├─ monitor-performance.js
│ │ ├─ mqtt-server.js
│ │ ├─ super-task.js
│ │ └─ tools.js
│ └─ views
│ ├─ canvas
│ │ ├─ drag
│ │ │ └─ index.vue
│ │ ├─ fireworks
│ │ │ └─ index.vue
│ │ ├─ signature-board
│ │ │ └─ index.vue
│ │ ├─ stars
│ │ │ └─ index.vue
│ │ └─ watermark
│ │ └─ index.vue
│ ├─ css-vfx
│ │ ├─ animation-api
│ │ │ └─ index.vue
│ │ ├─ css
│ │ │ └─ index.vue
│ │ ├─ css-demo
│ │ │ └─ index.vue
│ │ ├─ loading
│ │ │ └─ index.vue
│ │ └─ sass
│ │ └─ index.vue
│ ├─ el-encap
│ │ ├─ form-template
│ │ │ └─ index.vue
│ │ └─ table-template
│ │ ├─ components
│ │ │ ├─ append-popup.vue
│ │ │ └─ popup.vue
│ │ ├─ details-page.vue
│ │ └─ index.vue
│ ├─ error
│ │ ├─ 404.vue
│ │ └─ tip.vue
│ ├─ feature
│ │ ├─ concurrence-task
│ │ │ └─ index.vue │ │ ├─ directives
│ │ │ └─ index.vue
│ │ ├─ emojis
│ │ │ └─ index.vue
│ │ ├─ familiar
│ │ │ ├─ api
│ │ │ │ └─ index.vue
│ │ │ ├─ component
│ │ │ │ └─ index.vue
│ │ │ └─ function
│ │ │ └─ index.vue
│ │ ├─ markdown
│ │ │ └─ index.vue
│ │ ├─ mqtt-server
│ │ │ └─ index.vue
│ │ ├─ realTimeReviewHtml
│ │ │ └─ index.vue
│ │ ├─ text-label
│ │ │ └─ index.vue
│ │ ├─ video-fps
│ │ │ └─ index.vue
│ │ └─ worker
│ │ ├─ index.vue
│ │ └─ worker.js
│ ├─ home
│ │ └─ index.vue
│ ├─ login
│ │ └─ login.vue
│ ├─ logs
│ │ ├─ monitor-error
│ │ │ └─ index.vue
│ │ └─ monitor-performance
│ │ └─ index.vue
│ ├─ not-popular-label
│ │ └─ index.vue
│ ├─ note
│ │ └─ index.vue
│ ├─ render-optimize
│ │ ├─ task-execution
│ │ │ ├─ index.vue
│ │ │ └─ worker.js
│ │ └─ visible-win-render
│ │ └─ index.vue
│ ├─ system
│ │ ├─ setting
│ │ │ └─ index.vue
│ │ └─ user
│ │ └─ index.vue
│ ├─ test
│ │ ├─ software
│ │ │ └─ index.vue
│ │ └─ test1
│ │ ├─ index.vue
│ │ └─ worker.js
│ └─ third-party
│ ├─ cropper
│ │ └─ index.vue
│ ├─ draggable
│ │ └─ index.vue
│ ├─ echarts
│ │ └─ index.vue
│ ├─ img-lazy
│ │ └─ index.vue
│ ├─ virtual-scroller
│ │ └─ index.vue
│ └─ vueuse
│ └─ index.vue
├─ updateVersion.js
└─ vite.config.js
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )