Некоторое время назад компании нужно было разработать систему управления фоном, и время было срочное, один-два дня. Размышляя над возможностью его сборки понемногу, я просто подумал о том, есть ли уже готовые, которые можно изменить, и я нашел готовый фон на базе Vue.js и библиотеки компонентов iview, и я могу его изменить , просмотрите админ.
1. Введение:
1. iviewБиблиотека компонентов пользовательского интерфейса — это библиотека компонентов пользовательского интерфейса на основе Vue.js (по сравнению с тем, что всем известно).
2.iview admin Процитируйте вступление к документу администратора iview: iView-admin является одним из членов экосистемы iView.iview_adminпредварительный просмотр iview_adminДокументация адрес гитхаба iview_admin
2. Используйте:
1. Структура каталога:
Оригинальный проект, клонированный с github, имеет такую структуру.
config/ (файл конфигурации разработки проекта, в основном используемый для различения среды разработки и производственной среды)
node_modules/ (зависимости проекта)
public/ (хранит основной файл записи index.html)
src/ (файл ресурсов, здесь много контента)
Также есть более важный файл — корневой каталог: vue.config.js.
Это файл конфигурации vue, который отличается от vue cli2.x.Здесь используется vue cli3, и здесь настраиваются все конфигурации веб-пакетов..
Некоторые другие файлы и папки вообще не используются.
2. config/
В папке config/ есть два файла:
env.js
export default 'development'
url.js
import env from './env'
const DEV_URL = 'https://www.easy-mock.com/mock/5add9213ce4d0e69998a6f51/iview-admin/'const PRO_URL = 'https://produce.com'
export default env === 'development' ? DEV_URL : PRO_URLЭто в основном используется для различения основного URL-адреса интерфейса запроса между средой разработки и онлайн-средой.
3. public/
В папке public/ есть только один файл, который является входным файлом для вывода содержимого index.html.
4. src/
4-1. src/api/
Среди них data.js — это функция всех запросов данных, routers.js — функция запроса маршрутизации, а user.js — метод запроса для входа пользователя, информации о пользователе и выхода из системы.В iview admin все методы запросов классифицируются вместе там, где их нужно вызывать, а не разбросаны по разным страницам, что способствует обслуживанию и модификации.
Например, в user.js:
4-2. src/assets/
src/assets/ хранит некоторые статические ресурсы, такие как изображения и так далее.
4-3. src/components/
src/components/ Ниже приведены некоторые компоненты, которые были упакованы администратором iview и могут быть вызваны напрямую.
4-4. src/config/В файле конфигурации проекта существующая конфигурация — это время хранения файлов cookie и необходимость использования международной конфигурации.
4-5. src/directive/Всегда проецируйте индивидуальные инструкции
4-6. src/libs/
Здесь в основном подчеркивается, что автор iview_admin инкапсулирует метод запроса в axios.js:
Ответ перехватывается здесь.Если вы не согласны с тем, что поле кода возврата является кодом после успешного запроса или кодом возврата: 200 после успеха, то вы используете его запрос, даже если вы видите, что данные об успешном выполнении запроса возвращаются в консоли Network, но результат, который вы распечатаете, будет ложным, или вы можете следовать его соглашению с бэкэндом или изменить исходный код.
tools.js и util.js — это следующие функции инструмента.
4-7. src/locale/Сохраняет файл конфигурации интернационализации, если вы не используете интернационализацию, вам не нужно об этом заботиться.
4-8. src/mock/Данные макета, когда он не подключен к реальной среде разработки, клонированный проект использует добавленные данные макета.
4-9. src/router/Файл конфигурации маршрутизации routers.js, здесь нужно обратить внимание на конфигурацию разрешений пользователя:
Например:
Конфигурация разрешений пользователя должна быть массивом.
4-10. src/store/ Здесь находится место для всего управления статусом проекта, используя инструмент управления статусом vuex, студенты, которые не понимают, могут взглянутьофициальная документация vux.
4-11. src/view/Вот страница дисплея, которую мы собираемся написать.
Резюме: Небольшой поверхностный опыт, если что-то не так, пожалуйста, поправьте меня. iview admin — это набор интерфейсных фреймворков системы фонового управления на основе Vue, которая действительно реализует разделение интерфейсных и серверных частей.