如有任何技术问题,关注微信公众号留言
mui-vue2
基于mui+vue2.x的H5 APP项目,页面视图全部都是html5页,不是嵌入app原生页面,项目可以直接运行在PC上调试,也可以在hbuilder上真机调试,可以直接下载安装点此链接APP下载。
项目文档地址:mui-vue2说明文档。
Это обновление до vue2.x и webpack с последующей настройкой в качестве одностраничного приложения. Если вы хотите увидеть vue1.0+gulp многостраничное приложение, посмотрите репозиторий mui-vue адрес.
Технология упаковки приложения использует инструмент HBuilder IDE для создания пакета приложений одним щелчком мыши, также можно использовать eclipse для локальной упаковки (локальная упаковка требует добавления пакета Android sdk, здесь не описывается, только простое построение использования, файл локального пакета можно получить по запросу). Все это предоставляет dcloud в виде комплексного технического решения.
Примечание: проект и разработка основаны на проектах yujinjin/fans и vue美团 на GitHub, проект представляет собой только базовую страницу, дополнительные страницы и интерфейс бэкенда будут добавлены позже.
Фронтенд UI использует фреймворк mui.
Технология упаковки приложения использует HBuilder IDE.
Демонстрация
Просмотр на мобильном устройстве
В последнее время занят работой над мобильными приложениями WeChat, попробуйте: огонь:открытый исходный код
Установка
Загрузите HBuilder IDE, инструмент разработки, который на самом деле является переработкой eclipse от dcloud для создания приложений, поддержки веб-языков, таких как php, jsp, ruby, python, nodejs и т. д., а также компиляционных языков, таких как less и coffee.
Скачайте node.js в качестве среды выполнения для фронтенда. Моя текущая версия node.js — 6.9.2, версия npm — 3.10.9.
Приложение полностью основано на файле конфигурации manifest.json, который в основном используется для настройки базовой информации о приложении (номер версии, appid и т.д.), значка (значок приложения), конфигурации sdk, конфигурации модуля разрешений, ссылки на страницы, кода просмотра и т.д. Подробнее см. в документации dcloud документ.
Инициализация npm
{
"name": "vue-meituan",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "bxm",
"private": true,
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
},
"dependencies": {
"axios": "^0.16.2",
"better-scroll": "^1.2.3",
"element-ui": "^1.4.3",
"jade": "^1.11.0",
"jade-loader": "^0.8.0",
"jsonp": "^0.2.1",
"mint-ui": "^2.2.9",
"moment": "^2.18.1",
"pug": "^2.0.0-rc.4",
"pug-loader": "^2.3.0",
"vue": "^2.4.2",
"vue-lazyload": "^1.1.3",
"vue-resource": "^1.3.4",
"vue-router": "^2.7.0",
"vuex": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-loader": "^7.1.1",
"babel-plugin-istanbul": "^4.1.1",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chai": "^3.5.0",
"chalk": "^2.0.1",
"chromedriver": "^2.27.2",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^5.0.1",
"cross-spawn": "^5.0.1",
"css-loader": "^0.28.0",
"cssnano": "^3.10.0",
"eslint": "^3.19.0",
"eslint-config-standard": "^6.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^3.0.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^2.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.11.1",
"friendly-errors-webpack-plugin": "^1.1.3",
"html-webpack-plugin": "^2.28.0",
"http-proxy-middleware": "^0.17.3",
"inject-loader": "^3.0.0",
"karma": "^1.4.1",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0"
}
}
``` **Карма-фантомный лаунчер**: ^1.0.2
**Карма-фантомная прокладка**: ^1.4.0
**Карма-синон-чай**: ^1.3.1
**Карма-источник-загрузчик**: ^0.3.7
**Кармический спецрепортёр**: 0.0.31
**Карма-webpack**: ^2.0.2
**Мокко**: ^3.2.0
**Ночной дозор**: ^0.9.12
**Узел-сасс**: ^4.5.3
**Оуп**: ^5.1.0
**Оптимизировать CSS-активы-webpack-плагин**: ^2.0.0
**Ора**: ^1.2.0
**Фантомные пребуилды**: ^2.1.14
**Римраф**: ^2.6.0
**Сасс-ладер**: ^6.0.6
**Селен-сервер**: ^3.0.1
**Семвер**: ^5.3.0
**Шеллс**: ^0.7.6
**Синон**: ^2.1.0
**Синон-чай**: ^2.8.0
**URL-ладер**: ^0.5.8
**Вью-ладер**: ^13.0.4
**Стиль вью-ладера**: ^3.0.1
**Шаблон вью-компилятора**: ^2.4.2
**Вебпак**: ^2.6.1
**Анализатор вебпак-пакетов**: ^2.2.1
**Промежуточное ПО вебпак-разработчика**: ^1.10.0
**Горячее промежуточное ПО вебпака**: ^2.18.0
**Слияние вебпаков**: ^4.1.0
## Проект каталога
|-- build // Компилированный каталог
| |-- // Компилированные HTML-шаблоны приложения
| |-- // Скомпилированные CSS приложения
| |-- // Скомпилированный JS приложения
|-- src // Каталог исходного кода
| |-- // HTML-страницы приложения
| |-- // CSS приложения
| |-- // JS приложения
|-- unpackage // Каталог пакетов приложения
|-- static // Библиотека ресурсов (JS, изображения и т. д.)
|-- index.html // Файл загрузки домашней страницы приложения
|-- manifest.json // Конфигурационный файл пакета приложения
|-- package.json // Конфигурация информации о проекте, созданная с помощью команды npm init
## Запуск программы
Адрес проекта: (git clone)
git clone https://gitee.com/wuhou123/mui-vue2.git
Установите локальные серверные модули сторонних зависимостей через npm (требуется установленный Node.js)
Запустите публикацию кода
// Инициализация npm install
// Разработка npm run dev
// Публикация npm run build
Примечание: поскольку необходимо решить проблему задержки события click в 300 мс на iOS, специально используется событие tap для замены события click. Поэтому во время выполнения лучше всего работать в мобильном симуляторе браузера. В mui есть объект plus, который можно запускать только в мобильной среде, и может возникнуть ошибка при запуске на ПК.
## Реализованные функции
- Логин пользователя
- Домашняя страница
- Множественное обновление и загрузка страниц, переключение меню на страницах
- Мой
- Мои следы — mui использует h5 + местоположение мобильного телефона, чтобы показать конкретное местоположение, 3D-карта
- Страницы, связанные с доставкой еды Meituan (основное использование фреймворка mint ui)
- Подробная страница
- Отдельная демонстрация товаров
## Наконец
- Если вам нравится, обязательно поставьте звезду! (Спасибо!)
- Если у вас есть вопросы или проблемы, пожалуйста, отправьте их в lssues, я отвечу онлайн.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )