In the previous section, we implemented dynamic routing and rendered the data of the navigation bar. In order to further match the page and UI, in this section, we implemented simplified css writing based on less, which will be described in the next section Implement menu click jump function https://mp.csdn.net/mp_blog/creation/editor/128360465
1. Basic work
1. On the official website of element, find the custom color part of the NavMenu navigation menu
Open the code and find the properties selected as shown in the figure
According to the official documentation, you can introduce relevant attributes into this project according to the UI diagram for style modification
Here we reference background-color; text-color; active-text-color
After importing, open the page as follows:
In order to eliminate the side bar and make the left navigation bar cover the entire view, you can first find the specified object on the operation question and modify the style. If the page effect is consistent with the UI effect after modification, you can perform CSS style in the style part Revise
2. Introduce less
In actual project development, less is often used on the basis of css to modify the style. The following describes how to introduce and write less in this project, and open the official website of less . .com) ], you can check the writing specification of less
1. Introduce less into the project [also find the version number of installing less on the npm official website], the installation command is as follows
npm i [email protected]
Install the less parser [It is recommended to test the installation from a small version, for example, start from version 5.0.0 to see if the installation is successful, if not, upgrade gradually, because directly upgrading to the highest version of the less parser will conflict with less], install The command is as follows:
npm i [email protected]
The installation was successful, check in the package.json file
Then you can write the following code in the style and write it
<style lang="less" scoped>
</style>
Note that to modify the style of App.vue, change the global adaptation
