Скачать eagles - eagles Скачать исходный код

eagles

Другие категории

1.0.0

Скачать

заголовок	дата	теги
Путь к восхождению на яму проекта vue2 Eagles — упаковка различных компонентов	2017-05-13 10:43:03 -0700	vue2 vue-i18n element-ui axios пользовательская тема hightopo echars vue-awesome koa2

04113_лондон_320x240

Онлайн демо

Онлайн демо 2

Предисловие

После более чем двух недель разработки и организации, после моего первого оригинального блога «Дорога от C/C++ к трансформации внешнего интерфейса», проект Eagles был наконец запущен. Почему он называется Eagles? «Иглс» означает «орел», точно так же, как брат-орел расправляет крылья, чтобы победить питона в «Легенде о героях Кондора». Этот проект использует технологию vue+axios+elementui, интегрирует управление состоянием vuex, потрясающую библиотеку значков шрифтов vue, интернационализацию vue-i18n, отправку данных API-интерфейса моделирования макета js и поддерживает компиляцию стиля sass. Мы разработали компоненты с низкой степенью связи, которые очень подходят для проектов, такие как древовидные таблицы, топологические диаграммы, таблицы, диаграммы и т. д., а также дополнительные общие модули проекта, такие как управление меню, управление разрешениями ролей и управление пользователями.

Стек фоновых технологий временно использует макеты для имитации отправки данных Ajax. Позже я воспользуюсь технологией Spring boot+mybatis, чтобы объяснить это всем. В последнее время я также изучаю практическую реализацию микросервисной архитектуры Spring Cloud и Docker. Позже мы опубликуем соответствующие статьи, чтобы мы могли добиться прогресса вместе!

Для облегчения общения открыта группа QQ, 613176270. Все желающие могут высказываться свободно. Теплое напоминание: в группе есть девушки!

Функция

Вход/Выход
проверка токена
Строка меню в другом стиле
Пользовательская тема смены скина
Международная поддержка
лист
стол из дерева
Компонент карты топологии
диаграмма
Всплывающее окно справа
Передвижное диалоговое окно
форматированный текст
Уценка
JSON-украшение
Перетаскивание списка
Управление разрешениями
Управление журналами
Управление пользователями
Управление меню
Управление данными
графический дизайнер
Два режима разработки/развертывания
Мак имитирует данные запроса AJAX
Модульность управления состоянием Vuex
Индикатор выполнения запроса Ajax
поддержка стиля Sass
Реализация центра событий

Скомпилируйте и запустите

 # 克隆项目
git clone https://github.com/silianpan/eagles.git

# 安装依赖
npm install

# 运行 访问 localhost:8080
npm run dev

# 编译
npm run build

# 待分析报告的编译
npm run build --report

Описание структуры каталогов

 | -- build                           # 编译目录
| -- config                          # 编译配置目录
| -- index.html                      # 首页模板
| -- package.json                    # 依赖库配置
| -- src                             # 源码目录
|   | -- api                         # api目录
|   | -- assets                      # 资源目录
|   |   | -- css                     # 样式目录
|   |   | -- img                     # 图片
|   |   | -- sass                    # sass
|   |   ` -- theme                   # 自定义主题目录
|   |-- common                      # 公共js库
|   |   |-- eventHubs.js            # 事件中心
|   |   |-- resTypeEnum.js          # 资源类型
|   |   ` -- topo                    # 拓扑图
|   | -- components                  # 通用组件
|   |   | -- Table.vue               # 表格
|   |   | -- topo                    # 拓扑图
|   |   ` -- treeTable               # 树表组件
|   |-- config.js                   # 全局配置
|   |-- i18n                        # 国际化
|   |-- libs                        # 第三方组件库
|   |-- main.js                     # 入口程序
|   |-- mock                        # 模拟数据目录
|   |-- router                      # 路由
|   |-- store                       # 状态管理目录
|   |-- utils                       # 工具目录
|   ` -- views                       # 业务类型组件
|       | -- introduction            # 简介
|       | -- lang                    # 语言设置
|       | -- layout                  # 布局：header、菜单
|       | -- login                   # 登录
|       | -- table                   # 表格演示
|       | -- topo                    # 拓扑图演示
|       ` -- treeTable               # 树表演示
` -- static                          # 静态资源目录
    ` -- img                         # 图片目录

Частичный скриншот

первая страница

дом

Изменение и форма кожи

кожа

Интернационализация и древовидная таблица

i18n

Карта топологии

топо

топо2

Меню в разных стилях

меню

Дорога к яме

Правильная ссылка на компонент Jquery

Добавьте jquery в package.json

 "jquery" : "^1.11.1"

Добавьте следующий код после webpack.base.conf.js и укажите webpack перед ним.

 var webpack = require ( "webpack" )

plugins: [
   new webpack . optimize . CommonsChunkPlugin ( 'common.js' ) ,
   new webpack . ProvidePlugin ( {
       jQuery : "jquery" ,
       $ : "jquery"
   } )
  ]

Внедрение jquery в main.js

 import $ from 'jquery'

Проблемы международной совместимости

Для интернационализации используется vue-i18n, но можно использовать только версию 5.x. Использование версии 6.x приведет к проблемам совместимости с элементом, в результате чего исходный элемент не сможет быть переведен. Он совместим с Element и введен для интернационализации.

 import enUS from './en-US.json'
import zhCN from './zh-CN.json'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
export const LANGS = {
    'en-US' : $ . extend ( enUS , enLocale ) ,
    'zh-CN' : $ . extend ( zhCN , zhLocale )
}

проблемы с развертыванием nginx

Компоненты горячей загрузки маршрутизации Vue вызовут проблему, заключающуюся в том, что компоненты невозможно переключить после развертывания на Nginx (сбой переключения). Поэтому при развертывании на Nginx при маршрутизации вы можете использовать только импорт для загрузки компонентов.

Проблема доступа к статическим ресурсам

После развертывания в Nginx при доступе ко всем статическим ресурсам возникает ошибка 404 (ошибка доступа). Причина: все файлы ресурсов в каталоге src в Vue должны быть скомпилированы и перекодированы. Первоначально указанные статические файлы вызовут ошибки, например статические изображения, на которые ссылается файл. тег img. Решение. Поместите статические ресурсы в статический каталог на том же уровне, что и src, и ссылайтесь на файлы в этом каталоге. Но важный момент: статические пути, на которые ссылаются в режиме разработки и рабочем режиме, будут разными, поэтому добавьте следующее в. Код файла конфигурации для различения режима разработки и режима производства:

 export const STATIC_IMAGEPATH = ( process . env . NODE_ENV === 'production' ) ? "./static/img/" : "/static/img/" ;

Кроме того, в файле config/index.js assetsPublicPath также отличается.

 assetsPublicPath : './' , //生产环境assetsPublicPath: '/'

Режим разработки и развертывание не являются настройками фоновой службы прокси.

Настройте proxyTable в config/index.js.

 proxyTable : {
    '/ajax' : {
      target : 'http://127.0.0.1:8080' ,
      // target: 'http://127.0.0.1:8081',
      changeOrigin : true ,
      pathRewrite : {
        '^/ajax' : '/dirms-service'
      } ,
      onProxyReq ( proxyReq , req , res ) {
      }
    }
  } ,

Добавьте в конфигурацию следующее, где Eagles-Service — это идентификатор доступа к фоновой службе в производственном режиме.

 export const API_BASEURL = ( process . env . NODE_ENV === 'production' ) ? "/eagles-service" : "/ajax" ;

список дел

Дополнить и улучшить оставшиеся функции
Найдите другие компоненты NB с открытым исходным кодом и упакуйте их, например D3 и т. д.
Улучшайте серверные проекты и создайте микросервисную архитектуру.