Vue project template – Css specification

preface

There are many CSS specifications for projects, CSS selectors, CSS naming, CSS preprocessing (LESS), component libraries, and so on.

The project is:

  • Component library: element-plus –> 1.0-beta.9
  • CSS preprocessing: less -> 4.1.1
  • Plug-in: Stylelint automatic detection

Install the less

Execute command:

npm install -g less
Copy the code

Vue3.0 has less installed. You can use it by adding lang=’less’ to the style tag.

Code:

Page:

The installation element – the UI

Installation command:

npm install element-plus --save
Copy the code

Package. The json file

The main ts file

HelloWorid.vue

page

Install stylelint

This installation: stylelint-config-recommended and ## stylelint-config-standard, no stylelint installed.

Execute command:

npm install stylelint-config-recommended stylelint-config-standard
Copy the code

The root directory creates the stylelint.config.js file

Vscode installs stylelint and prettier-code formatter, and vscode file settings.json

[less] is the CSS preprocessor language for automatic detection. This project uses less. If sASS is used, change to [sass].

To implement automatic detection, copy the rule in stylelint.config.js to the stylelint.config in Settings. Json of vscode

Save to automatically repair

Package. The json file