Table of contents
First of all, I would like to declare that I am not a very powerful boss. I just want to provide some simple suggestions to those who want to get into Vuetify. That is the purpose of this article. In fact, I just know how to use it. I haven’t studied it too deeply. I wrote such a complicated project, so if you think I’m talking about relying on the defense, please raise your mouth, just the upper right corner, thank you very much !
This article will share some of my insights and perceptions about the use of Vuetify. There will be screenshots from official documents, but it does not mean copying and pasting. I will have my own opinions, so friends, please rest assured.
Here is a link to the official documentation: Vuetify documentation for Vue2 , Vuetify documentation for Vue3
This article will use Vue2 documents to explain ( v2 documents and v3 documents are used to refer to Vue2's Vuetify documents and Vue3's vuetify documents respectively ), and the v2 documents have complete Chinese documents, which is very friendly, and if You can use the Vue2 version of Vuetify, and Vue3 is no problem.
As of the release date of this article , the v3 document has no Chinese document , it is all in English, and the v3 document is still being updated, since it is still being continuously updated, it means that there are many components that should have been in the v2 document It has not been rewritten into the v3 version. For example, the v2 version has a skeleton screen component, which is not currently in the v3 document. I wrote a project before and used the Vue3+Vue3 version of vuetify. At that time, it was a headache because of this. So I can only use this skeleton screen. So a piece of advice for you is: If you want to use it at present, it is best to use Vuetify of Vue2. After all, all its components are complete and there are Chinese documents.
Why is it said to be the best vue component library? According to the official statement is:
The following is a comparison of various mainstream frameworks:
It can be seen that Vuetify has a fast update cycle and long-term support for documents. Among them, I personally think that the most awesome is the Treeshaking (that is, tree shaking, or it can also be called tree shaking) function. I can tell you that you may not have heard of this. Friends of the concept explain that the function of Treeshaking is to automatically remove the components or other things that you have imported but not used when the project is packaged. This is very good for controlling the size of the project package.
Well, that's all for the preface, and then we can start the topic.
Install Vuetify
You can use the following command to create a vuetify project, and the project structure will automatically help you arrange it:
vue create my-appIf you already have a project and want to introduce vuetify, you can do it like this:
vue add vuetifydocument structure
The structure of the document is mainly as shown in the figure above. Don’t worry about UI components, APIs, and instructions. Let’s focus on the three parts in the red box first. First, let’s take a look at the quick start:
quick start
In fact, what you really need to read may only be the "Installation" section, and you can simply browse the rest without any burden. This is followed by the "Features" section:
characteristic
Okay, you will find that there are a lot of things you need to see, right? Don’t worry, let’s look at them one by one:
| barrier free | This is an inclusive practice for the disabled, so that disabled groups can also use it, but generally speaking, your project should not use this, so it can basically be ignored |
| two-way | That is, you can make your website support left-to-right (LTR) language layout and right-to-left (RTL) language layout, but generally speaking, websites are from left to right, so this part you basically ignore |
| responsive display | This part is to set the responsive layout of your website. The component can automatically adjust the layout according to the size of the screen. All you have to do is set the style corresponding to a certain breakpoint. First, a breakpoint table will be provided for you:  , which lists a series of default sizes, which you can use directly. As for how to use it, it will be mentioned later. At the same time, you can also customize the breakpoint you want, please refer to the documentation for details. |
| global configuration | I have not used the global configuration to set anything for the time being, but the official website does not give too many configuration items, only the content in the figure below:
|
| icon font | You can set the icon library you want to use here, please refer to the documentation for how to configure it. My personal suggestion is: it is not recommended to use these icon libraries . You can let the company design or find an icon and use it yourself. Why? Because the disadvantage of using the icon library is that it will increase the package size to a certain length, because there are many icons that you can’t use, but as long as you use one of the icons, the entire icon file will be packaged. It's a pit, the icon I found doesn't have these problems. |
| International multilingual | I believe that you may have used it before. It is i18n, which is used to switch between various languages. For details, please refer to the document |
| layout | Vuetify provides some preset layouts for you to use, but generally speaking, we don't use them, because the design drawings generally do not match the preset layouts. In fact, there are only two layout components, v-app component and v-main component, which will be mentioned later, so don’t worry. |
| preset | You can modify the day and night themes you want here, as well as custom colors, icon libraries, breakpoints, etc., not listed one by one, please refer to the documentation for details |
| SASS variables | It is some global default styles, you can override them, and it is easy to understand from the documentation. If you don't know sass, it is recommended to learn sass first. The estimated learning time is about half an hour. The link is here: sass Chinese documentation |
| program roll | That is, you can use the api provided by vuetify to control the scrolling of the scroll bar in a programmatic way (that is, to control scrolling through the functions provided by vuetify) |
| theme | Here you can control the presentation of some styles of different themes, for example, you can set the styles of dark mode and light mode |
| tree shake | Vuetify will import the required components on demand, and finally make the package size smaller. This function has been enabled by default, and it will automatically shake the tree. |
Styling and animation
Write here first, next time I have time to continue to update. . .