первоначальное намерение
На самом деле, мне все еще очень нравится панель инструментов на основе CLI, и я также хочу попробовать некоторые вещи, такие какВнедрение приложения TODO с помощью Nodejs CLI — требуется программист, и будет продолжать добавлять новые идеи к этому в будущем. Но сегодня я понял проблему, сценарий использования DashBoard на основе CLI больше подходит для Todo-like, а также для быстрого запроса и обработки информации (например, мне нужно быстро узнать ход работы команды и содержание работы, я не Я не хочу заходить в браузер и находить соответствующие теги и фильтры), поэтому DashBoard на основе CLI является свободным и может рассматриваться как набор инструментов. Некоторое мелкозернистое содержимое по-прежнему требует графического интерфейса. так что яGitHub — roubo/rouboworks: панель заданий на основе Nodejs CLIНиже приведено различие между каталогами CLI и WEB, и сзади может быть рабочий стол, в зависимости от того, много ли «свободного времени».
Выбор
Если вы хотите быть передовым и экологичным, выберите Vue.js (бездумный выбор, просто хотите просмотреть Vue), поторопитесь, поищите шаблон на GitHub (ленивый, но умный способ). Я нашел тот, у которого больше всего звезд на Github,GitHub - PanJiaChen/vue-element-admin: A magical vue admin, но автор Даниэля рекомендует не вести вторичную разработку напрямую на базе этого проекта, а выбрать его базовую версию:GitHub - PanJiaChen/vue-admin-template: a vue2.0 minimal admin template, Осуществлять вторичную разработку на основе этого проекта, и в то же время, вы можете ссылаться на эффект проекта vue-element-admin, и непосредственно перемещать компоненты, которые необходимо использовать. Проект шаблона объединяет: пользовательский интерфейс Element, axios, iconfont, контроль разрешений и lint. Предварительный адрес проекта vue-element-admin:vue-element-admin, это достаточно круто, но следуйте совету автора и берите только то, что действительно нужно.
клонировать и скомпилировать проект
git clone https://github.com/PanJiaChen/vue-admin-template.git
## 修改成想要的名字
mv vue-admin-template dashboard
npm install
npm run dev
Просмотрите код проекта шаблона
Если вы знакомы со структурой проекта, сгенерированного с помощью vue scaffolding, то структура admin-template очень понятна. Структура каталогов в src:
.
├── App.vue //入口
├── api // 各种接口
├── assets // 图片等资源
├── components // 各种公共组件，非公共组件在各自view下维护
├── icons //svg icon
├── main.js //入口
├── permission.js //认证入口
├── router // 路由表
├── store // 存储
├── styles // 各种样式
├── utils // 公共工具，非公共工具，在各自view下维护
└── views // 各种layout
Структура каталогов проста и понятна.В документе автора предлагается разделять общедоступные компоненты и непубличные компоненты, а непубличные компоненты должны поддерживаться независимо на разных страницах.Это не было хорошо сделано в проекты между ними.Я согласен с идеей автора, хотя суждение Действительно публичные компоненты - это сложная вещь.
Хоть админ-шаблон и небольшой, из него все же нужно вырезать несколько бесполезных демок. Обрезку можно начать с роутера.
Цель этого выпуска (не этой статьи)
Цель этого выпуска состоит в том, чтобы добавить исследовательский контент в DashBoard, который я называю «Ежедневные исследования», а затем добавить данные социальных исследований под названием «Анализ образовательных и учебных (дошкольных) учреждений Цзиньхуа в режиме реального времени» в форме динамические диаграммы. Перейдите на вкладку исследования. Найдите себе носителя для какого-нибудь небольшого исследования (социальная сфера), которым вы займетесь позже в свободное время.
обрезать
Удалите все бесполезные списки маршрутизации в роутере, оставив следующее содержимое.Метод настройки смотрите в официальной документации vue-router.
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import Layout from '../views/layout/Layout'
export const constantRouterMap = [
{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
{
path: '/404',
component: () => import('@/views/404'),
hidden: true
},
{
path: '/',
component: Layout,
redirect: '/dashboard',
name: 'Dashboard',
hidden: true,
children: [{
path: 'dashboard',
component: () => import('@/views/dashboard/index')
}]
},
{
path: '/research',
component: Layout,
redirect: '/research/respage01',
name: 'Research',
alwaysShow: true,
meta: { title: '日常研究', icon: 'research' },
children: [
{
path: 'respage01',
name: 'Respage01',
component: () => import('@/views/respage01/index'),
meta: { title: '金华教育培训市场准实时数据', icon: 'train' }
}
]
},
{
path: '*',
redirect: '/404',
hidden: true
}
]
export default new Router({
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap
})
Добавьте каталог respage01 в каталог представления и добавьте index.vue в качестве записи для изменения страницы. На этом этапе вы можете видеть, что боковая панель имеет следующий эффект:
Уведомление, так как ширина боковой панели по умолчанию составляет 180 пикселей, а заголовок моей страницы слишком длинный, поэтому я изменил конфигурацию, связанную с шириной боковой панели, в sidebar.scss в каталоге стилей на 300 пикселей. Кстати, файлы стилей в каталоге styles загружаются в корневой маршрут (HOME), который является компонентом views/dashboard:
@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';
Удалите другие бесполезные файлы под представлениями (надежнее найти соответствующие файлы по настроенному маршрутизатору), под представлениями оставить только следующую структуру каталогов:
├── 404.vue
├── dashboard
│ └── index.vue
├── layout
│ ├── Layout.vue
│ ├── components
│ └── mixin
├── login
│ └── index.vue
└── respage01
└── index.vue
Затем мы можем сосредоточиться на respage01 и сосредоточиться на своем бизнесе.Если мы столкнемся с другими проблемами, связанными с периферийными устройствами, мы выпрыгнем из середины и проанализируем.
Присоединяйтесь к библиотеке диаграмм Echarts
Библиотека диаграмм Echartsjs — самая мощная библиотека диаграмм для внешнего интерфейса, которую я люблю. Официальную демо-версию можно посмотреть:ECharts Demo. Из-за ежедневных исследований основным процессом является сканирование данных, очистка данных, анализ данных и отображение выводов данных.Для отображения выводов последнего шага диаграмма, безусловно, является наиболее интуитивно понятной.
Импорт диаграмм в проект
Очень интересно, что в настоящее время есть две компании, поддерживающие работу echarts для vue, одна из них — автор Fang Baidu, которая предоставляет vue-echarts.GitHub - ecomfe/vue-echarts: ECharts component for Vue.js., Другой вносит большой вклад в экологию vue, Ele.me, предоставляет v-charts,GitHub - ElemeFE/v-charts: компонент диаграммы на основе Vue2.0 и пакета ECharts 📈📊. Что еще интересно, так это то, что количество звезд больше 2к, что сопоставимо. В простом сравнении vue-echarts использует метод предоставления нативной конфигурации, который теоретически может поддерживать все функции echarts, в то время как v-echarts фокусируется на простоте использования и проделал большую работу по инкапсуляции и сокращению локального импорта. а из Согласно документации, поддерживаемых типов диаграмм не так много, как у ечартов, но их достаточно. Так что для удобства я все же выбираю последнее.Если оно действительно не может удовлетворить потребности, то можно его настроить.
Непосредственная установка:
npm i v-charts echarts -S
запустить демонстрацию
Добавьте демонстрационный код v-charts в respage01/index.vue:
<template>
<div>
<ve-line :data="chartData"></ve-line>
</div>
</template>
<script>
import VeLine from 'v-charts/lib/line.common'
export default {
name: "index",
components: { VeLine },
data () {
return {
chartData: {
columns: ['date', 'PV'],
rows: [
{ 'date': '01-01', 'PV': 1231 },
{ 'date': '01-02', 'PV': 1223 },
{ 'date': '01-03', 'PV': 2123 },
{ 'date': '01-04', 'PV': 4123 },
{ 'date': '01-05', 'PV': 3123 },
{ 'date': '01-06', 'PV': 7123 }
]
}
}
}
}
</script>
<style scoped>
</style>
Получены следующие результаты:
[image:BE2B45BB-C538-472F-88A8-64EAA4CAB3CC-2866-0000681CA6760FFC/B5B738DC-A0A1-4AE2-8901-84B2566342A9.png]
Следующий шаг
Используйте функции, связанные с картой echarts, для выполнения бизнес-требований. Сегодня суббота, отдых. Бип-бип-бип-бип-бип-бип-бип-бип-бип