Skip to content

fhnb16/Market-Vue

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

55 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Market-Vue

Vue 3.2.47 Vue CLI 5.0.8 Vuex 4.1.0 vue-timer-hook 1.0.66

ИЖС Маркет, верстка + vue

Test website with latest build

Image Video
Preview image
preview.mp4

Figma with design


1. Preparing

  1. Install Git and node.js enviroment.
  2. Clone repository to folder or download and unpack zip.
  3. Open terminal, go to repository folder (example: cd Z:\\Git\Market\market-test).
  4. Install Vue Cli with command npm install -g @vue/[email protected].
  5. Install dependences with npm install --legacy-peer-deps.
  6. Place file data.json from src/assets/api to webserver. Place .htaccess in same place if data.json and website not at same webserver to prevent CORS security errors.
  7. Change path to your data.json file in file src/store/index.js.
  8. Type npm run serve to build and run local server, now you can visit website with url: 127.0.0.1:8080 or localhost:8080.
  9. You may also build project to distribute (upload to webserver) with command npm run build.

2. Features

  1. Fetch data from json url.
  2. View stories with navigation, viewed state and animated timer progressbar, autoplay, images and videos, covered full screen or center and contain image.
  3. Modal window with contacts (or another content)
  4. Separated to components
  5. Store data in Vuex
  6. Can be pinned on ios home screen (PWA)
  7. Stories can contain image or video
  8. Compact stories view on desktop/tablet
  9. Wow, ArtLebedev font))0

3. data.json structure

{
  "appTitle": "ИЖС маркет", // app title
  "stories": [ // array of objects
    {
      "iconPreviewImage": "", // story icon preview image
      "iconText": "Стройка через приложение", // text string on story icon
      "storyText": "Стройка через приложение", // text string on top of story
      "storyMedia": "", // video or image file url
      "storyBackground": "#dcbef0", // background color/gradient/image src('')
      "storyMediaPoster": "", url ti video poster image (shows before video loaded)
      "storyMediaType": "image", // video/image, image by default
      "storyMediaFit": "contain", // contain - fit all image/video in center, cover - zoom image/video in center to fill all display width/height
      "storyShowSeconds": 0, // how long story is shown, 0 or empty is 5 seconds
      "buttonText": "Перейти", // button text
      "buttonAction": "#",
      "storyViewed": false
    },
  ],
  "mainPageButton": {
    "buttonText": "Есть смета? Пришлите ее нам и сделаем еще выгоднее", // main page button text
    "buttonAction": "#"
  },
  "sections": [ // array of objects
    {
      "sectionImage": "", // section image
      "sectionText": "Выбрать дом", // section text
      "buttonText": "Выбрать дом", // section button text
      "buttonAction": "#"
    },
  ]
}

fhnb16