Build a Simple Commercial Website Front‑End in One Hour with Vue and iView

Hello everyone, I'm the UED "draft king" returning after more than half a year; don't worry, it's still better than Uncle Fu's "Will we ever see Hunter's Dark Continent?".

Often you encounter conversations like the one shown below.

When you meet such people, it proves you are truly skilled!

Now back to the main topic: in today's fast‑moving front‑end landscape, can you deliver a website front‑end in an afternoon? Let's start from zero and build a simple website front‑end.

To complete a website you typically go through these steps:

Requirement → Interaction → Design → Front‑end Development ↔ Back‑end Development → Verification/Testing → Deploy to server

We will focus on the Front‑end Development part.

Requirement

A commercial site for product showcase with four main pages. Sketch it on paper.

Interaction

Basic interaction logic:

Navigation bar: routes for all pages, enabling quick jumps.

Home page banner: quick link to showcase cases.

Service: simple business introduction.

About us: contact information or a submission form.

Design

Without a designer we simply pick a component library: iView . Thanks to the iView team for the great library. Interested readers can visit https://www.iviewui.com.

Front‑end Development

We need to decide on a rapid development framework. The experienced choice is the Vue full‑stack + webpack.

Work environment:

Mac OS

Node.js (keywords for solving access issues in China: nvm, nrm, npm.taobao.org)

Simple editor: Atom or VS Code

vue‑cli

Create a project directory:

Open a terminal in that directory and run vue init webpack .. Follow the prompts (Y/n, enter your name, etc.).

Then install dependencies: npm i After installation finishes, run the development server: npm run dev You will see the website effect.

Now the basic environment is ready. Open the folder in your editor and continue with the video tutorial.

The tutorial was recorded while first encountering the third‑party framework (iView), so I constantly refer to documentation.

No design involvement; the page elements are imagined.

Due to time limits, only the home page, overall page framework, and routing were recorded; the actual recording took about one hour, sped up to roughly 30 minutes.

Watch the full video if the quality is insufficient: https://v.qq.com/x/page/d0520woipc8.html

Summary

With the abundance of third‑party UI and JavaScript libraries, even a front‑end engineer new to a framework can set up a basic page from scratch within an hour. In theory, a skilled team can complete an entire website in three days, though in practice many hours are spent adjusting requirements and designs.