vue-manage-system

Решение для управления системой на основе Vue.js 2.x + Element UI. Онлайн адрес

Поддержка

Пожалуйста, поддержите автора, угостив его кофе!

Сканирование QR-кода WeChat

Введение

Ранее в компании я использовал Vue + библиотеку компонентов Element для создания системы управления. Многие компоненты можно было использовать напрямую из библиотеки, но некоторые требования не могли быть удовлетворены. Например, функции обрезки изображений, загрузки, редактирования. Функции, такие как редактор富文本编辑器，Markdown编辑器，图片拖拽/裁剪上传等功能，在后台管理系统中很常见，需要引用其他组件才能实现。В процессе поиска и использования этих компонентов, я столкнулся с множеством проблем и накопил ценный опыт. Поэтому я решил создать это решение для управления системой, основываясь на моем опыте.

Это решение представляет собой многофункциональный шаблон для управления системой, который подходит для большинства разработок веб-систем управления (Web Management System). Оно основано на Vue.js и использует vue-cli для быстрого создания проекта, а также Element UI для создания компонентов, которые легко и быстро можно сделать красивыми. Цветовые стили разделены, поддерживается ручное переключение темы и использование пользовательской темы.

Функции

|-- VueEditor.vue // компонент для редактирования富文本编辑器 |-- VueEditor.vue // компонент для редактирования富文本编辑器 |-- VueEditor.vue // компонент для редактирования富文本编辑器

|-- VueEditor.vue // компонент для редактирования富文本编辑器 |-- VueEditor.vue // компонент для редактирования富文本编辑ра |-- VueEditor.vue // компонент для редактирования富文本编辑器

|-- VueEditor.vue // компонент для редактирования富文本编辑器 | |-- App.vue // точка входа для приложения | |-- main.js // точка входа для программы, загрузка различных общих компонентов |-- .babelrc // конфигурация для компиляции ES6 синтаксиса |-- .editorconfig // стандарты написания кода |-- .gitignore // файлы для игнорирования |-- index.html // основной html файл |-- package.json // файл с зависимостями проекта и инструментами |-- README.md // файл с описанием проекта## Шаги установки ##

git clone https://github.com/lin-xin/vue-manage-system.git      # Скачиваем шаблон на локальную машину
cd vue-manage-system    # Переходим в директорию шаблона
npm install         # Устанавливаем зависимости проекта, дожидаемся завершения установки

Локальное разработка

# Запускаем сервер, в браузере посетите http://localhost:8080
npm run dev

Построение для продакшена

# Выполняем команду сборки, созданный каталог dist размещаем на сервере
npm run build

Пояснения по компонентам и демонстрация

vue-schart

Компонент графиков, созданный на основе vue.js и sChart.js. Ссылка: vue-schart

```html

Набор компонентов для создания десктопных приложений на основе Vue.js 2.0. Ссылка: [element](http://element.eleme.io/#/zh-CN/component/layout)

### Vue-Quill-Editor ###
Редактор富文本编辑器, основанный на Quill и предназначен для Vue 2. Ссылка: [vue-quill-editor](https://github.com/surmon-china/vue-quill-editor)

(Не поддерживается в IE10 и ниже)

### mavonEditor ###
Редактор markdown на основе Vue. Ссылка: [mavonEditor](https://github.com/hinesboy/mavonEditor)

### vue-cropperjs ###
Компонент Vue, обертка для cropperjs, предназначенная для обрезки изображений. Ссылка: [vue-cropperjs](https://github.com/Agontuk/vue-cropperjs)

## Другие注意事项 ##
### 1. Как удалить некоторые компоненты из шаблона, не влияя на другие функции? ###

Пример: если вы не хотите использовать компонент Vue-Quill-Editor, вам нужно выполнить четыре шага.

Первый шаг: удалите маршрут этого компонента. В файле src/router/index.js найдите маршрут, связанный с этим компонентом, и удалите следующий фрагмент кода.

```JavaScript
{
    // Компонент редактора富文本编辑器
    path: '/editor',
    component: resolve => require(['../components/page/VueEditor.vue'], resolve) 
},

Второй шаг: удалите файл, который импортирует этот компонент. Удалите файл VueEditor.vue из папки src/components/page/.

Третий шаг: удалите вход для этой страницы. В файле src/components/common/Sidebar.vue найдите этот вход и удалите следующий фрагмент кода.

{
	index: 'editor',
	title: 'Редактор富文本编辑器'
},

Четвертый шаг: удалите этот компонент. Выполните следующую команду:``` npm un vue-quill-editor -S


Готово.

### 2. Как переключиться на другой темный цвет? ###

Первый шаг: Откройте файл src/main.js и найдите место, где импортируется тема Element. Замените его на светло-зеленую тему.

```javascript
import 'element-ui/lib/theme-chalk/index.css';    // Default theme
// import '../static/css/theme-green/index.css';       // Light green theme

Второй шаг: Откройте файл src/App.vue и найдите место, где импортируется стиль. Переключитесь на светло-зеленую тему.

@import "../static/css/main.css";
@import "../static/css/color-dark.css";     /* Dark theme */
/*@import "../static/css/theme-green/color-green.css";   !* Light green theme *!*/

Третий шаг: Откройте файл src/components/common/Sidebar.vue и найдите тег el-menu. Удалите атрибуты background-color, text-color и active-text-color.

OSCHINA-MIRROR/wangx111-vue-master

vue-manage-system

Поддержка

Введение

Функции

Локальное разработка

Построение для продакшена

Пояснения по компонентам и демонстрация

vue-schart

Скриншоты проекта

По умолчанию

Светло-зеленая тема

Опубликовать ( 0 )

Введение

Обновления

Участники

Язык

Недавние действия

OSCHINA-MIRROR/wangx111-vue-master .gitee-modal { min-width: 500px !important; } .gitee-modal .close { right: 0.6rem !important; }

vue-manage-system

Поддержка

Введение

Функции

Локальное разработка

Построение для продакшена

Пояснения по компонентам и демонстрация

vue-schart

Скриншоты проекта

По умолчанию

Светло-зеленая тема

Опубликовать ( 0 )

Введение

Обновления

Участники

Язык

Недавние действия

OSCHINA-MIRROR/wangx111-vue-master