iTaster admin template

индекс

• обобщать
• Установить
• использовать
• возобновлять
• Конфигурация
• Архитектура
• Известные проблемы
• лицензия

обобщать

Модифицированный администратор на основе шаблона Webpack4.x от vue-cli. Пожалуйста, не загружайте его. Предварительный код не имеет никаких функций. Это чисто для развлечения и практики.

Инструкции по обновлению

• 19.06.2018. Обновите веб-пакет, используйте webpack4 и порекомендуйте новый плагин mini-css-extract-plugin.

Установить

 ＃克隆该项目
git clone https://github.com/iTaster/webpack4-template

# 安装依赖关系
npm install

# 编译开发环境
npm run dev

По умолчанию http://localhost:1988/ открывается автоматически.

использовать

 # 编译生产环境
npm run build

# 构建生产环境
npm run build --report

возобновлять

Обеспечить последующие обновления модулей проекта.

 # 检测模块
npm outdated

# 更新模块
npm update

# 删除 node_modules 文件
npm install rimraf -g
rimraf node_modules

Команда npm outdated проверит установленные модули и сообщит, какие из них устарели.

Конкретная информация включает в себя: установленную в данный момент версию (Текущая), версию, до которой следует обновить (Разыскивается) и последнюю версию в репозитории (Последняя).

Конфигурация

1. Если вы хотите загрузить папку dist , просто удалите /dist в конфигурации игнорируемого файла (файл .gitignore ).

2. По умолчанию файлы ресурсов, скомпилированные и обработанные webpack , будут храниться в static папке. Если вы хотите хранить их только в корневом каталоге файлов, измените параметр build.assetsSubDirectory в config/index.jx чтобы оставить его пустым. Но не рекомендуется! Таким образом, некоторые пути к изображениям будут неправильными при упаковке. Рекомендуется размещать ресурсы размером менее 10 КБ и некоторые значки SVG (вещи, которые обычно не будут изменены) в папке src/assets , а другие — в static папка.

3. По умолчанию упакованные файлы css/js содержат source map , которые очень полезны для отладки кода в среде разработки. Однако в среде компиляции и эксплуатации не рекомендуется изменять файл config/index.js и изменять его значение. из build.productionSourceMap to: false .

4. Если код выполняется на сервере и вы не хотите, чтобы #/ в адресной строке, вам необходимо удалить аннотацию mode: 'history' в router/index.js (также требуется настройка серверной части, в противном случае страница обновит 404); если на странице необходимо использовать переходы привязки. Перейдите в указанное место и удалите аннотацию scrollBehavior .

5. Он поставляется с плагином autoprefixer . Написание CSS-кода непосредственно в файле vue автоматически добавит префикс.

Архитектура

При разработке больших одностраничных страниц рекомендуется следующая структура каталогов:

src
    ├── README.md
    ├── assets                  // 全局资源目录
    │    ├── images            // 图片
    │    ├── css               // CSS 样式表
    │    └── fonts             // 自定义字体文件
    ├── components              // 公共组件目录
    │    ├── NavMenu.vue
    │    ├── Slider.vue
    │    └── ...
    ├── directives               // 公共指令
    ├── filters                  // 公共过滤器
    ├── i18n                     // 国际化
    │    ├── index.js           // 入口文件
    │    ├── zh.js
    │    └── en.js
    ├── router                   // 路由
    │    └── index.js
    ├── store                    // 状态管理
    │    ├── index.js        
    │    └── ...
    ├── views                    // 页面视图
    │    ├── login
    │    │    ├── index.vue
    │    │    ├── LoginForm.vue
    │    │    └── LoginSocial.vue
    │    ├── home
    │    │    ├── index.vue
    │    │    ├── HomeBanner.vue
    │    │    └── ...
    │    └── ...
    ├── App.vue                // 默认程序入口
    └── main.js

преимущество:

• Если вы хотите использовать /login в другом проекте, просто скопируйте или переместите его в каталог /comComponents.

• Если вы установили какие-либо внешние зависимости и определили тот же загрузчик в конфигурации, проект должен работать нормально.

Известные проблемы

• Ошибка при скрытии левой боковой панели.

способствовать

Вы можете свободно вносить свой вклад в этот проект, отправляя проблемы и/или запросы на включение. Этот проект тестируется, поэтому помните, что каждое изменение и новая функция должны быть охвачены тестами.

лицензия

Этот проект имеет лицензию MIT.