Preparación del inicio del proyecto.
Cree un proyecto (use la herramienta de compilación Vite para crear una plantilla de proyecto)
npm init vue@latest
- Después de crear el proyecto, simplemente instale npm
Introducción al catálogo
Instalación de complementos
- Eche un vistazo a los complementos recomendados por vscode
- Instale complementos recomendados para una mejor detección de tipos
Crear alias
Instrucciones de compilación
Configuración del proyecto
Configurar icono y título
Configurar alias del proyecto
Configurar ts.config.json
Compruebe si el complemento vscode está configurado
Configurar las especificaciones del código del proyecto
Configuración del editor integrado
- Ayuda a mantener un estilo de codificación coherente para varios desarrolladores que trabajan en el mismo proyecto en diferentes editores IDE.
- Vscode necesita instalar un complemento: EditorConfig para VS Code
biblioteca de herramientas más bonita
- Una poderosa herramienta de formato de código que también puede eliminar líneas en blanco.
- Cuando cree este proyecto, se le preguntará si desea instalarlo. De lo contrario, también puede instalarlo usted mismo siguiendo el comando.
- 1. Instalación
npm install prettier
- 2. Configuración
- 3. También puede configurar .prettlerignore para ignorar archivos (la instalación anterior se ha completado)
- 4. Pruebe si Prettler es efectivo, guárdelo y descubra que las líneas en blanco no se eliminan.
- 5. Configure un script en package.json (no necesita usar este método, es más fácil a continuación)
"prettier":"prettier --write", pero la operación es problemática y no siempre se puede ejecutar npm de forma más bonita- 6. Utilice el complemento vscode
- 7. Verifique la configuración primero
- 8. Método 1, Ctrl +p, haga clic en lo siguiente para formatearlo una vez
- 9. Pero si quieres configurarlo y guardarlo, puedes formatearlo.
10. Tiene efecto, por lo que puedes guardarlo y optimizarlo según el estilo más bonito.
Configuración de detección de ESLint
- Se utiliza para detectar código irregular y dar consejos o advertencias.
- Para resolver el conflicto entre ellos.
- Se instalará esta solución (si está habilitada al crear el proyecto, no es necesario configurarla aquí)
npm install eslint-pluugin-prettier eslint-config-prettier -D
Restablecer estilo CSS
- normalizar.css
- restablecer.css
npm install normalize.css
Pasos: Dentro de main.ts
import 'normalize.css'
Paso 1, crea una nueva carpeta css
Paso 2: Importar index.less a main.ts
Paso 3: Úselo directamente, si no se reconoce menos, importe menos.
- Si le indica que no se puede encontrar menos, importe menos.
npm install less -D
- CSS entra en vigor
