How to find and use website templates?


When we start to DIY our own website, using templates is a good choice, because it can make our website beautiful, smooth, and save time. This article will walk you through the entire process of using a website template:① How to find a wonderful Vue website template? ② How to start website templates and DIY? ③ How to import website template into aother project?

Keywords: website , template , Vue , find , start , build , import.

Find template

Template framework introduction

The mainstream front-end frameworks include React, Vue, Html5, and you can find wonderful and free templates. These frameworks may take time to learn except Html5, but believe me, as long as you hands on, the questions you encounter will definitely be answered by Google. So boldly choose your favorite template, don’t worry too much about what framework it belongs to.

You can go to the templates website to search template. Since I mainly use the Vue framework, it is recommended that you also use Vue, so that you can directly copy my solution code when you encounter the same problem.

You can search Vue templates at As you can see in the screenshot below, there are plenty of free, beautiful, and useful templates out there.

Template examples

Download your favorite template and get started!

Start template

Open the downloaded template (take Vue Now UI Kit as an example) folder and you will see the following directory structure. The following figure only lists the important files, and I have added the necessary text descriptions. The file in the folder explains how to configure and start the website template.

Template directory structure

					## Project setup
npm install

### Compiles and hot-reloads for development
npm run serve

### Compiles and minifies for production
npm run build

### Run your tests
npm run test

### Lints and fixes files
npm run lint

### Run your unit tests
npm run test:unit

### Customize configuration
See [Configuration Reference](

Import temlpate

Modify Vue version

I once tried to modify the template Vue version because of the version conflict of some dependencies. According to the various tutorials on the Internet, I greatly modified the contents of main.js and router.js in the template. Even though I put a lot of time and energy into it, and I do it carefully, there were more and more problems that I had to give up.

So, if you want to modify the Vue version of the project to adapt to a certain dependency to achieve a certain function, I suggest you complete the development of the target function in the appropriate Vue version template, and then build the target function project, import it in the main project, rather than modifying the Vue version directly on the main project.

Build and import steps

1. Build project

					npm run build

2. Move project

After building the project, you will get a dist folder including index.html. Move the dist folder to the public directory of the main project. The directory structure is shown in the figure below.

In the Vue project, dist folder must be move to the public folder to take effect.

Main project public folder structure

3. Import into page

In the pages that needs to use the target function under the \src\page folder of the main project, use the <iframe> tag to import the target function project.

					<!-- src is the target html file in public folder -->
<iframe loading="lazy" src="dist/index.html" frameborder="0" width="100%" height="600px"></iframe>


When we start to DIY a website, we can boldly use free templates, even if it takes some time to learn a new framework, it is worth it. Because compared to the web pages made from 0 by newbies like us, the website template layout is more beautiful and the performance is more stable.

And whether we want to start a new project or import in other projects, we can find detailed documentation. So, go ahead and try it.

However, this article is aimed at application sites with complex functions, if you just want to build a blog, WordPress will be the best choice.

Related articles

Coming soon.

If yuo have any question or need any help 

you can leave a comment or connect me with

Leave a Reply

Your email address will not be published. Required fields are marked *

Chaoxu Wei

Master student at Tongji University (Writer & Blogger)

Job hunting, both part-time and full-time jobs are accepted. Job recommendation please email me, thank you very much!


Edit Template

“There are many people in the world who want to work hard but can’t, and people who work too hard and are exhausted. Please don’t use your efforts only to chase your own victory, please use them to help others.”




Yangpu District, Shanghai