I have basically finished learning a package of front-end technologies before. In addition to react and uniapp, which I need to learn if I want to make the front-end big, I have also learned basic Vue-related things. I originally wanted to do a back-end project in Silicon Valley, but the tool library it uses is really I’m too old, so I jumped directly to the step of building my own website. Considering that I want to build a commercial project by myself, I will design it into three parts. One is the process of conception and coding, the second is solving the problems encountered in the process, and the third is It’s about thinking about performance optimization. I haven't decided on the back-end selection yet. For the time being, I will still use python and its tool library that I am familiar with. I plan to use flask, but it is really impossible to migrate to django.
First is the page reference. If you want to make a fully functional website selling shoes as an example, you must refine it step by step, otherwise you will be overwhelmed by the heavy tasks. First, simplify the data. In order to simplify the data, we will not consider the background management system first. We will use about 10 static items divided into three categories, color, price, and brand. Then first complete the static page. Even the login and registration pages can be ignored. , when it comes to writing pages, we can refer to the ready-made code first, and then keep the style consistent throughout the website.
First, the latest ts+vue3+pinia technology selection is used. The navigation bar is completed with simple icons and login registration. Now use vite to initialize the project. Yarn create vite command, create the folder and then cd to enter it, and then yarn installs the dependencies. Add -open after the yarn directive in package.json so that the browser can be opened automatically every time without having to click again. Daily error report cannot find module "./App.vue" or its corresponding type declaration. ts(2307), according to Baidu’s results, just add the statement to the env.d.ts file.
declare module “*.vue” { import type { DefineComponent } from “vue”; const vueComponent: DefineComponent<{}, {}, any>;
export default vueComponent;
}
According to the concept, the main body is a navigation bar. For the sake of simplicity, login and registration buttons are added. In the middle, a list is returned based on recommendations or your own clicks. Use a paginator below the list to refer to the layout of Nike's official website.
Try to use the ready-made styles of ElementPlus here and write less styles. First use the automatic import function of ElementPlus. First install the plug-in and use the automatic import. If you encounter
a style that you don’t understand how to write, refer to other people’s code. You can see that even simple The navigation bar cannot be laid out according to your own ideas if you don't use floating. I have to say that when you actually start the project, you need to write many layouts by yourself. It will be very tedious at the beginning, so you can only stick to it. I try to use iconfont for icons. Try to mock the data yourself in the early stage of the interface, which can simplify the pressure from the server.
The icon I expected is on the left, login and registration are on the right, separated by | in the middle to make it more beautiful. I set it to lightblue according to my favorite color scheme, but the font seems to be misaligned. I found that it doesn't work well by setting line-height.
OK Well, the small navigation bar is quite troublesome, so I’ll write a separate article.