Слияние кода завершено, страница обновится автоматически
Когда я начал изучать Vue, искал практический исходный код о Vue, но большинство из них были простыми демонстрациями и не помогали изучить Vue. Большинство демонстраций представляют собой интерфейсные страницы, такие как взаимодействие с музыкальным проигрывателем, которое оказалось не таким сложным, как ожидалось. Но в реальной работе мы часто сталкиваемся с проектами, связанными с деньгами, такими как страница корзины покупок. Такие проекты сложны и включают в себя регистрацию, вход, информацию о пользователе и так далее. Никто никогда не писал подобный проект на Vue и не публиковал его на GitHub. Поэтому я написал его, надеюсь, он вам поможет.
Этот функциональный проект практичен, но часто скучен, без музыкального проигрывателя, который был бы великолепен. Долгое время я думал, что приложение Elm — хороший материал. Во-первых, оно сложное, и открытая платформа доставки сложнее, чем типичный проект. Во-вторых, вы не заскучаете, увидев так много красивой еды.
Но почему именно приложение Elm, а не Baidu App или Meituan App? Причина проста: макет Elm самый красивый и удобный среди трёх приложений.
В этом проекте 45 страниц, включая регистрацию, вход в систему, отображение товаров, корзину покупок, заказ и так далее. Это полный процесс. Средний корпоративный проект не такой сложный, поэтому, если вы полностью поймёте этот проект, я уверен, что вы сможете справиться с большинством одностраничных приложений в другой компании. Даже если они более сложные, они не будут намного выше этого.
Проект был сделан в свободное время, на самом деле он был написан несколько лет назад, и с годами затраченное время кажется немного долгим. На проект ушло более двух месяцев от начала до конца. Теперь он завершён, выполняются некоторые оптимизации производительности для добавления подробных аннотаций.
Кроме того, проект не связан с видео Elm на веб-сайте imooc, и в том проекте всего одна страница. После просмотра официальной документации Vue я написал этот проект напрямую, не ссылаясь ни на какой код, поэтому, пожалуйста, не путайте их.
Примечание: Этот проект является исключительно личным. Если вы хотите заказать, пожалуйста, выберите официальный клиент Elm.
vue2 + vuex + vue-router + webpack + ES6/7 + fetch + sass + flex + svg
Примечание: В этом проекте используется множество свойств, таких как ES6/7, поэтому требуется узел 6.0.0+.
git clone https://github.com/bailicangdu/vue2-elm.git
cd vue2-elm
npm install
npm run dev
У этого проекта есть поддерживающая фоновая система. Если вы хотите её разработать, вы можете скачать соответствующую бэкенд-систему. Бэкенд-система.
Команда запуска бэкенд-системы: npm run local. Если вы занимаетесь только фронтенд-разработкой, проигнорируйте это примечание.
Если это поможет вам, вы можете нажать «Звёздочка» в правом верхнем углу, чтобы поддержать, спасибо. ^_^
Может быть, вы могли бы «подписаться» на меня, я сделаю больше интересных проектов.
Среда разработки: macOS 10.12.3 Chrome 56 nodejs 6.10.0
Спасибо 辰妹子 @bailichen, @iceRao, за помощь в завершении проекта, спасибо🌹
Если у вас есть какие-либо вопросы, вы можете опубликовать вопрос в разделе Issues, и если вы найдёте какое-то решение или какое-то улучшение, пожалуйста, отправьте запрос на изменение. 👍
Коммуникационная группа [https://gitter.im/vue2-elm/Lobby?utm_source=share-link&utm_medium=link&utm_campaign=share-link]
Рекомендую открытый исходный проект о react и redux. Адрес
Рекомендую другую демонстрацию о vue2 и vuex, она простая и подходит для новичков. Адрес
По некоторым причинам предыдущие интерфейсы не могли быть использованы, это приводило к сбою проекта. Новая бэкенд-система построена на nodejs. Адрес бэкенд-системы. Она может согласовываться с официальным веб-сайтом. И предоставляет соответствующую систему управления фоном
Нажмите здесь (предварительный просмотр в Chrome) Мобильный телефон может сканировать QR-код, изображённый ниже
<img ### Страница поиска
.
├── build // webpack config file
├── config // package path
├── elm // online project file,can access if put them one the server
├── screenshots // screenshot
├── src // source directory
├── components // components
├── common // common components
├── alertTip.vue // popup components
├── buyCart.vue // cart components
├── computeTime.vue // countdown components
├── loading.vue // the animation component when page is initialized
├── mixin.js // mixinf components(inculde：directive-loading more，make picture address)
├── ratingStar.vue // the five rating star component about comment
└── shoplist.vue // the resturant list common component of msite and shop page
├── footer
└── footGuide.vue // footer common component
└── header
└── head.vue // header common component
├── config // basic configuration
├── env.js // environment switch configuration
├── fetch.js // git data
├── mUtils.js // common function about js
└── rem.js // px transform rem
├── images // public picture
└── page
├── balance
│ ├── balance.vue // balance page
│ └── children
│ └── detail.vue // balance detail page
├── benefit
│ ├── benefit.vue // benefit pahe
│ └── children
│ ├── commend.vue // recommend prize
│ ├── coupon.vue // coupon introduction
│ ├── exchange.vue // exchange benefit
│ ├── hbDescription.vue // benefit descripting
│ └── hbHistory.vue // benefit's history
├── city
│ └── city.vue // local city page
├── confirmOrder
│ ├── children
│ ├── children
│ ├── addAddress.vue // add address page
│ └── children
│ └── searchAddress.vue // search address page
│ ├── chooseAddress.vue // choose address page
│ ├── invoice.vue // choose invoice page
│ ├── payment.vue // pay page
│ ├── remark.vue // order remark page
│ └── userValidation.vue // user validation page
│ └── confirmOrder.vue // confirm order page
├── download
│ └── download.vue Скачать приложение
| | |
| :-- |:--|
| *| find* |
| | *find.vue* | // страница поиска
| *| food* |
| | *food.vue* | // страница фильтра и сортировки продуктов
| *| forget* |
| | *forget.vue* | // забыть пароль, изменить пароль
| *| home* |
| | *home.vue* | // индексная страница
| *| login* |
| | *login.vue* | // страница входа и регистрации
| *| msite* |
| | *msite.vue* | // страница списка продавцов
| *| order* |
| | *children* |
| | | *orderDetail.vue* | // страница с деталями заказа
| | *order.vue* | // страница со списком заказов
| *| points* |
| | *points.vue* | // страница точек
| | *detail.vue* | // страница с подробностями о точках
| *| profile* |
| | *profile.vue* | // профиль пользователя
| | *children* |
| | | *address.vue* | // адресная страница
| | | *add.vue* | // страница добавления адреса
| | | *search address page* |
| | | *addDetail.vue* |
| | *info.vue* | // информация об аккаунте
| | *setusername.vue* | // сброс пароля
| *| search* |
| | *search.vue* | // страница поиска
| *| service* |
| | *service.vue* | // центр обслуживания
| | *questionDetail.vue* | // детали вопроса
| *| shop* |
| | *shop.vue* | // страница фильтров магазина
| | *children* |
| | | *foodDetail.vue* | // деталь продукта
| | | *shopSafe.vue* | // проверка безопасности магазина
| | | *shopDetail.vue* | // детали магазина
| *| vipcard* |
| | *vipcard.vue* | // обработка VIP-карт
| | *children* |
| | | *invoiceRecord.vue* | // запись счёта
| | | *useCart.vue* | // использование карты
| | | *vipDescription.vue* | // описание VIP
| *| plugins* |
| *| router* |
| | *router.js* | // конфигурация роутера
| *| service* |
| | *getData.js* | // файл унифицированного развёртывания для получения данных и унифицированное управление интерфейсами
| | *tempdata* | // временные данные для разработки
| *| store* |
| | *action.js* | // конфигурация действий
| | *getters.js* | // конфигурация геттеров
| | *index.js* | // использование Vuex, новый магазин
| | *modules* |
| | *mutation-types.js* | // создание констант для мутаций
| | *mutations.js* | // конфигурация мутаций
| *| style* |
| | *common.scss* | // общий CSS
| | *mixin.scss* | // конфигурационный файл CSS
| | *swiper.min.css* | // CSS Swiper
| *| App.vue* | // файл точки входа JavaScript
| *| main.js* | // основной файл JavaScript для загрузки компонентов
| *favicon.ico* | // иконка
| *index.html* | // файл точки входа HTML
56 каталогов, 203 файла
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )