Precautions for using iview in native code

Recently, the company is working on a project. The framework used is iview. During the use process, colleagues encountered some problems. These problems are not a problem for some students, but there will always be students who need it, in order to help students who are not very good at it. I found the problem and organized it as follows:

Download the vue, iview.min.js, iview.css package and import it:
(Note: You can also use the tail link for reference, but in this case, when there is suddenly no Internet, there will be problems with the page style, so I think the most Fortunately, download the compressed file and quote it in the project. If you need to use the icon, you must download the fonts file and place it in the same folder as iview.css, but you don’t need to include it in the html code)

<link rel="stylesheet" type="text/css" href="../../css/iview.css">
<script type="text/javascript" src="../../js/vue.min.js"></script>
<script type="text/javascript" src="../../js/iview.min.js"></script>

Focus:

Many students were not careful and did not

pay attention to the prompts of its documentation, which caused some problems: we must pay attention to this sentence, there are many components that cannot be used in the native html mode.
There is no prompt for this sentence in the documents of some components, and they cannot be used. Then I will do some sorting of the components. The following contents are all components that need special use in non-template/render mode:
1. Button i-button
2. Icon: the
text directly after the icon will not display the text content: <Icon type="ios-checkmark" />文字
you can modify it as follows: <Icon type="ios-checkmark"></Icon>文字
3. Grid: 4. Navigation menu: 5. Tab page: 6. Drop-down menu: 7. Breadcrumbs: 8. Anchor point: 9. Input box: 10. Switch: 11. Form: 11. Selector: 12. Date and time: The above are not all special components, but basically it can be seen that there are mainly two forms: one is i-** (Such as: i-table), the other is word splitting (such as: Date-picker)i-col
i-menu
tabs tab-pane
dropdown-menu dropdown-item
Breadcrumb-item
Anchor-link
i-input
i-switch
i-table
i-select i-option
Date-picker Time-picker