Быстрое создание проектов на фронтенде

Этот репозиторий больше не обновляется, был перемещён в: https://gitee.com/newgateway/my

Инфраструктурный фреймворк web-проектов на основе Vue + ElementUI.

Сконцентрирован на быстрой сборке центральных систем. Фреймворк уже прошёл тестирование в нескольких реальных проектах. Основные характеристики:

• Включает генератор кода, который может сгенерировать вызовы нижнего уровня API, управление vuex, а также код для моделирования данных;
• Предоставляет более чем 80 базовых UI компонентов;
• Интегрирован с библиотеками графиков и картографическими приложениями;
• Поддерживает микросервисные подприложения front-end, которые могут быть независимо разработаны, запущены и установлены;
• Автоматически создаёт маршруты;
• Компоненты автоматически регистрируются и загружаются по мере необходимости;
• Поддерживает пользовательские темы, которые можно менять онлайн;
• Поддерживает статическую конфигурацию.

Разработка

• Официальный сайт
• Руководство по разработке
• Базовая библиотека компонентов
• Картографическая библиотека

Установка

Рекомендуется использовать установку через npm, так как это лучше всего работает вместе с инструментом сборки webpack.

npm i @xdh/my --save
```## Быстрый старт

Вы можете использовать `My` двумя способами:

### Первый метод: Создание проекта с использованием шаблона проекта [рекомендован]

Один-в-один решение для проектов на основе Vue, предоставленное официальным сайтом.

```sh 
git clone https://gitee.com/newgateway/my-web.git

Просто получите шаблон проекта и используйте его сразу после получения, включая все функции.

Второй метод: Вызов функциональности библиотеки компонентов

Если вам нужны только некоторые компоненты из My, вы можете установить их в существующем проекте и выполнить необходимую конфигурацию. Шаги:

1. Установка библиотеки компонентов и связанных плагинов

Установка компонента

npm i element-ui @xdh/my --save

Установка зависимостей проекта

npm i babel-plugin-component sass sass-loader --save-dev

2. Конфигурация babel.config.js

Компоненты используются с возможностью построения по требованию, что требует добавления плагинов в файл babel.config.js, как показано ниже:```js
module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], plugins: [ [ 'component', { libraryName: 'element-ui', styleLibraryName: theme-chalk } ], [ 'component', { libraryName: '$ui', libDir: 'components', styleLibraryName: `~node_modules/@xdh/my/ui/lib/styles`, ext: '.scss' }, '$ui' ], [ 'component', { libraryName: '$ui/charts', libDir: 'packages', style: false }, '$ui/charts' ], [ 'component', { libraryName: '$ui/map', libDir: 'packages', style: false }, '$ui/map' ], [ 'component', { libraryName: '$ui/go', libDir: 'packages', style: false }, '$ui/go' ] ] }

### 3\. Конфигурация `vue.config.js`Необходимо добавить псевдонимы в `vue.config.js`, как:

```js
module.exports = {
  transpileDependencies: ['@xdh/my'],
  chainWebpack(chain) {
    chain.resolve.alias.set('$ui', '@xdh/my/ui/lib')
  }
}

4. Включение компонентов

На этом этапе вы можете начать использовать компоненты и писать код, например:

<template>
  <div>
    <Button type="primary">Кнопка</Button>
    <MyPanel title="Заголовок">Содержание</MyPanel>
  </div>
</template>

<script>
  import {Button} from 'element-ui'
  import {MyPanel} from '$ui'
  export default {
    components: {
      Button,
      MyPanel
    }
  }
</script>