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

项目启动准备

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

typescript 复制代码
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
html 复制代码
npm install less -D
  • css生效
相关推荐
哆啦A梦15886 分钟前
点击Top切换数据
前端·javascript·vue.js
程序猿追30 分钟前
Vue组件化开发
前端·html
艾德金的溪1 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长1 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH1 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴1 小时前
Android Studio新手开发第二十六天
android·前端·android studio
JH30732 小时前
B/S架构、HTTP协议与Web服务器详解
前端·http·架构
yi碗汤园2 小时前
【超详细】C#自定义工具类-StringHelper
开发语言·前端·unity·c#·游戏引擎
麦麦大数据2 小时前
D027 v2 vue+django+neo4j 基于知识图谱红楼梦问答系统 (新增问关系功能;新增知识节点和关系管理功能,neo4j增删改查功能)
vue.js·django·问答系统·知识图谱·neo4j·图谱管理·neo4j增删改查
Kevin Wang7273 小时前
解除chrome中http无法录音问题,权限
前端·chrome