【Vue3+Ts】项目启动准备和配置项目代码规范和css样式的重置

项目启动准备

      • 创建项目( 使用Vite 构建工具创建项目模板)
      • 目录介绍
      • 插件安装
      • 创建别名
      • 编译说明
      • 项目配置
          • 配置icon和标题
          • 配置项目别名
          • 配置ts.config.json
          • 检测vscode的插件是否配置
      • 配置项目代码规范
          • 集成editorconfig配置
          • prettier工具库
          • ESLint检测配置
      • CSS样式重置
          • 步骤:main.ts里面
          • 步骤一,新建css文件夹
          • 步骤二,main.ts中导入index.less
          • 步骤三,直接使用,识别不到less,导入less

创建项目( 使用Vite 构建工具创建项目模板)

npm init vue@latest

在这里插入图片描述

  • 创建完项目,npm install 一下即可

目录介绍

在这里插入图片描述

插件安装

  • 看一下vscode推荐的插件

在这里插入图片描述

  • 安装所推荐的插件,为了更好的类型检测
    在这里插入图片描述

创建别名

在这里插入图片描述

编译说明

在这里插入图片描述

项目配置

配置icon和标题

在这里插入图片描述

配置项目别名
配置ts.config.json

在这里插入图片描述

检测vscode的插件是否配置

在这里插入图片描述

配置项目代码规范

集成editorconfig配置
  • 有助于为不同IDE编辑器上处理同一个项目的多个开发人员维护一致的编码风格
  • Vscode需要安装一个插:EditorConfig for VS Code
prettier工具库
  • 一个强大的代码格式化工具,类似空行这些也能删除
  • 这个创建项目的时候有提示你是否安装,若未安装,自己也可按命令安装
  • 1,安装
npm install prettier
  • 2,配置
    在这里插入图片描述
  • 3,也可配置.prettlerignore忽略文件(以上安装的时候都已完成)
  • 4,测试prettler是否生效,保存一下,发现没有删除空行
  • 5,在package.json配置一个scripts(可以不用这个方法,下面更简便)
  • "prettier":"prettier --write",但操作麻烦,不能一直npm run prettier
  • 6,利用vscode插件
    在这里插入图片描述
  • 7,配置先勾选
    在这里插入图片描述
  • 8,方法1,ctrl +p,点击下面这个即可格式化一次
    在这里插入图片描述
  • 9,但想设置一下保存即可格式化
    在这里插入图片描述
    10,生效了,这样就可以保存按prettier风格优化了
ESLint检测配置
  • 用于检测不规范代码,给予提示或警告
    -
  • 为了解决他们之间的冲突
  • 会安装这个解决(如果创建项目的时候开启过,这里就不用配置)
npm install eslint-pluugin-prettier eslint-config-prettier -D

在这里插入图片描述

CSS样式重置

  • normalize.css
  • reset.css
npm install normalize.css
步骤:main.ts里面
import 'normalize.css'
步骤一,新建css文件夹

在这里插入图片描述
在这里插入图片描述

步骤二,main.ts中导入index.less

在这里插入图片描述

步骤三,直接使用,识别不到less,导入less
  • 如果提示less找不到,就导入less
npm install less -D
  • css生效
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/60349.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

transformer实现词性标注

1、self-attention 1.1、self-attention结构图 上图是 Self-Attention 的结构,在计算的时候需要用到矩阵 Q(查询), K(键值), V(值)。在实际中,Self-Attention 接收的是输入(单词的表示向量 x组成的矩阵 X) 或者上一个 Encoder block 的输出。而 Q, K, V…

Hive-启动与操作(2)

🥇🥇【大数据学习记录篇】-持续更新中~🥇🥇 个人主页:beixi 本文章收录于专栏(点击传送):【大数据学习】 💓💓持续更新中,感谢各位前辈朋友们支持…

测试左移——代码审计SonarQube 平台搭建

一、sonarqube代码分析技术体系 1、代码分析工具 IDE 辅助功能 xcode、android studio阿里巴巴 java 开发手册 ide 插件支持 独立的静态分析工具 spotbugs、findbugs、androidlint、scan-build、Checkstyle、FindSecBugspmd 阿里巴巴 java 开发手册 pmd 插件 综合性的代码…

堆,堆排序和TOP—K问题(C语言版)

前言 堆是一种重要的数据结构,堆分为大根堆和小根堆,大根堆堆顶的数据是最大的,小根堆堆顶的数据是最小的,堆在逻辑结构上是一颗完全二叉树,这棵树中如果满足根节点大于左右子树,每个节点都满足这个条件就是…

Rabbitmq的Shovel

Federation 具备的数据转发功能类似, Shovel 够可靠、持续地从一个 Broker 中的队列 ( 作为源端,即source)拉取数据并转发至另一个 Broker 中的交换器 ( 作为目的端,即 destination) 。作为源端的队列和作为目的端的交换器可以同时位于…

【ES5新特性一】 严格模式语法变化、全局的JSON对象、编码和解码的方法

前言 ECMAScript 和 JavaScript 的关系 一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系? 要讲清楚这个问题,需要回顾历史。1996 年 11 月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给标准…

微服务dubbo和nexus

微服务是一种软件开发架构风格,它将一个应用程序拆分成一组小型、独立的服务,每个服务都可以独立部署、管理和扩展。每个服务都可以通过轻量级的通信机制(通常是 HTTP/REST 或消息队列)相互通信。微服务架构追求高内聚、低耦合&am…

系列十五、Spring5编程式事务

一、业务代码 1.1、pom <dependencies><!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java --><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.26<…

Linux--VMware的安装和Centos

一、VMware和Linux的关系 二、VMware的安装 VM_ware桌面虚拟机 最新中文版 软件下载 (weizhen66.cn) VMware-Workstation-Lite-16.2.2-19200509-精简安装注册版.7z - 蓝奏云 如果安装不成功&#xff0c;则设置BIOS 三、在VMware中加入Centos 下载地址&#xff1a; CentOS-…

Linux 忘记密码解决方法

很多朋友经常会忘记Linux系统的root密码&#xff0c;linux系统忘记root密码的情况该怎么办呢&#xff1f;重新安装系统吗&#xff1f;答案是不需要进入单用户模式更改一下root密码即可。 步骤如下&#xff1a; 重启linux系统 3 秒之内要按一下回车&#xff0c;出现如下界面 …

unity-AI自动导航

unity-AI自动导航 给人物导航 一.地形创建 1.首先我们在Hierarchy面板中创建一个地形对象terrian&#xff0c;自行设定地形外貌&#xff0c;此时我们设置一个如下的地形外观。 二.创建导航系统 1.在主人公的Inspector、面板中添加Nav Mesh Agent &#xff08;导航网格代理&…

Linux操作系统--linux概述

1.Linux概述 Linux&#xff0c;全称GNU/Linux&#xff0c;是一种免费使用和自由传播的类UNIX操作系统&#xff08;OS&#xff09;。简单的说就是一种操作系统。在日常中常见的操作系统有一下三种: 2.linux起源和背景 (1).linux的诞生 linux操作系统是由李纳斯托瓦兹&#xf…

C++ 多重继承

所谓多重继承就是一个儿子有好几个爹&#xff0c;然后一个人继承了这几个爹的财产。只需注意构造顺序即可&#xff0c;反正析构的顺序也是一样的。 #include <iostream> #include <string.h> using namespace std;class base_a { public:base_a(const char *str){…

二十、观察者模式

一、什么是观察者模式 观察者&#xff08;Observer&#xff09;模式的定义&#xff1a;指多个对象间存在一对多的依赖关系&#xff0c;当一个对象的状态发生改变时&#xff0c;所有依赖于它的对象都得到通知并被自动更新。这种模式有时又称作发布-订阅模式、模型-视图模式&…

2007-2022年上市公司污染排放数据/2007-2022年上市公司污染排放水平、污染排放量数据

2007-2022年上市公司污染排放数据/2007-2022年上市公司污染排放水平、污染排放量数据 1、时间&#xff1a;2007-2022年 2、指标&#xff1a;证券代码、year、化学需氧量、氨氮排放量、总氮、总磷、水体综合污染当量对数、二氧化硫、氮氧化物、烟尘、空气综合污染当量对数、总…

代码中的3种错误-思考及应对方法

我们聊到了代码中的3中错误。今天我想在具体的代码上讨论如何应对这3中错误。 这段代码很普通&#xff0c;就是在浏览器中自动下载文件&#xff0c;代码如下&#xff1a; const link document.createElement(a) link.href dataUrl link.download output.png link.click()这…

静态类方法的同步

由于在调用静态方法时&#xff0c;对象实例不一定被创建。因此&#xff0c;就不能使用this来同步静态方法&#xff0c;而必须使用Class对象来同步静态方法。代码如下&#xff1a; 通过synchronized块同步静态方法 public class StaticSyncBlock { public static void…

还只是听说过Generator函数?那就来全面了解它吧

Generator函数 基本概念 Generator函数时ES6提供的一种异步编程解决方案&#xff1b; 一、语法上&#xff1a; 可以理解为一个状态机&#xff0c;封装了多个内部状态执行Generator函数会返回一个遍历器对象 二、形式上的特点&#xff1a; function命令和函数名之间有一个…

word表格左侧边线明明有,但却不显示

如题&#xff0c;解决方法&#xff1a; 方案一&#xff1a; 1&#xff09;选中表格 2&#xff09;布局菜单--->自动调整 3&#xff09;自动调整中&#xff0c;选择“根据窗口自动调整表格” 4&#xff09;表格左侧边线就显示出来了。 方案二&#xff1a;把表格粘贴到新…

Kubernetes技术--Kubernetes架构组件以及核心概念

1.Kubernetes集群架构组件 搭建一个Kubernetes环境集群,其架构如下所示: 内容详解: Master:控制节点,指派任务、决策 Node:工作节点,实际干活的。 Master组件内容: