Abstract
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 https://vuejs.org/ecosystem/themes.html. 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 README.md 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](https://cli.vuejs.org/config/).
Readme.md contens
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>
Summarize
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 weichaoxu1998@gmail.com
