1. Введение
См. Введение.
2. Структура каталога проекта
qw-admin-web/static
:
apis
:
assets
:
animations
: библиотека Lottie с анимационными эффектами;libs
: содержит некоторые сторонние библиотеки, используемые в проекте;components
: компоненты Vue;img
: папка с изображениями проекта;layout
: используется в проекте;mock
: mockjs;pages
: файлы страниц;require-config
:
modules
: каталог модулей RequireJS;plugins
: каталог плагинов RequireJS;index.js
: файл конфигурации RequireJS;router
: каталог файлов конфигурации Vue-Router;store
: каталог файлов конфигурации Vuex;utils
: каталог функций утилит;App.vue
: корневой компонент (компонент входа);favicon.ico
: значок веб-страницы;index.dev.html
: вход в среду разработки;index.html
: вход в производственную среду;index.js
: входной JS.3. Конфигурация
См. index.dev.html
, соответствующая конфигурация следующая:
<script type="text/javascript">
if ('ActiveXObject' in window) {
var ele = document.getElementById('loading-mask');
ele.style.display = 'none';
document.write('对不起,不支持IE,请使用其他非 IE 内核浏览器访问,比如:360、Firefox、Chrome 浏�зарнаер');
} else {
// Текущая версия проекта,
window.__version__ = '1.1.1';
// текущая среда dev | prd, в среде разработки будет включена функция source-map и vue-dev-tool.
window.__env__ = 'dev';
// текущий базовый путь статического доступа, этот путь должен соответствовать следующим правилам:
// доступ к [window.__app__]/a.js => qw-admin-web/static/a.js
window.__app__ = '/web-admin';
// базовый путь интерфейса API сервера
window.__server_base_url__ = '/admin';
// время ожидания ajax
window.__timeout__ = 180;
// включена ли функция динамической загрузки, уже реализована, но разработчик считает, что она не очень полезна во время разработки, и временно не предоставляет код реализации на стороне сервера.
// Если вам это нужно, пожалуйста, оставьте комментарий.
window.__hot_reload__ = false;
// динамический адрес загрузки сервера
window.__hot_reload_server__ = 'http://localhost:8080/imserver';
}
</script>
<!--Обратите внимание, что номер версии соответствует window.__version__, после каждого обновления статических файлов сервером номер версии будет обновляться, чтобы гарантировать, что кэш клиента становится недействительным -->
<script type="text/javascript" src="/web-admin/assets/libs/requirejs/require.min.js?browser_spa_version=1.1.1"></script>
<!--edge 浏览器需要 этот плагин поддержки -->
<!-- <script type="text/javascript" src="/web-admin/assets/libs/polyfill/polyfill.min.js?browser_spa_version=1.1.1"></script> -->
<script type="text/javascript" src="./require-config/index.js?browser_spa_version=1.1.1"></script>
<script type="text/javascript" src="./index.js?browser_spa_version=1.1.1"></script>
См. require-config/modules/config.js
, соответствующие настройки следующие:
define([], function () {
var process = {
// текущая рабочая среда
ENV : window.__env__
};
var env = '';
switch (process.ENV) {
case 'dev':
case 'test':
env = 'development';
break;
case 'prd':
env = 'production';
break;
}
return {
env: env,
version: window.__version__ || '1.0',
timeout: window.__timeout__,
serverBaseUrl: window.__server_base_url__ || '/admin',
routerMode: window.__router_mode__ || 'hash',
// настройка псевдонима начинается здесь, аналогично псевдониму webpack, который можно использовать при загрузке других компонентов из компонента,
// не следует напрямую писать относительный путь или абсолютный путь, иначе это приведёт к сильной связи между статическим путём ресурса и структурой каталогов,
// после того как проект станет слишком большим, изменение пути статического ресурса станет очень хлопотным делом.
alias : {
'@': window.__app__,
'@R': window.__app__ + '/require-config',
'@CMP': window.__app__ + '/components',
'@IMG': window.__app__ + '/img',
'@UTIL': window.__app__ + '/utils',
'@PAGE': window.__app__ + '/pages',
'@MOCK': window.__app__ + '/mock',
'@ROUTE': window.__app__ + '/router',
'@STORE': window.__app__ + '/store',
'@ASSET': window.__app__ + '/assets',
'@LAYOUT': window.__app__ + '/layouts',
'@API': window.__app__ + '/apis',
'@SERVER_IMGS_BASE_URL' : '/imgs/view/find'
},
// глобальный bus, основанный на vue, реализует простой Bus, который может использоваться для межкомпонентного взаимодействия,
// все события определены здесь, что удобно для импорта в других местах (личные привычки, полезно для совместной разработки несколькими людьми и обслуживания проектов).
busEvents: {
// событие тайм-аута сеанса
SESSION_TIMEOUT: 'SESSION_TIMEOUT',
// исключение отсутствия полномочий при доступе к ресурсам
NO_AUTHORITY: 'NO_AUTHORITY',
// закрыть событие указанной метки в многостраничном режиме
CLOSE_PAGE: 'CLOSE_PAGE_TAB'
},
// является ли текущая среда средой разработки
isDev: function() {
return this.env === 'development';
}
``` Вот перевод текста на русский язык:
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )