学校网站建设的背景,wordpress 知识库主题,承德网站制作加盟,做网站图片无法显示的原因项目启动准备 创建项目#xff08; 使用Vite 构建工具创建项目模板#xff09;目录介绍插件安装创建别名编译说明项目配置配置icon和标题配置项目别名配置ts.config.json检测vscode的插件是否配置 配置项目代码规范集成editorconfig配置prettier工具库ESLint检测配置 CSS样式… 项目启动准备 创建项目 使用Vite 构建工具创建项目模板目录介绍插件安装创建别名编译说明项目配置配置icon和标题配置项目别名配置ts.config.json检测vscode的插件是否配置 配置项目代码规范集成editorconfig配置prettier工具库ESLint检测配置 CSS样式重置步骤main.ts里面步骤一新建css文件夹步骤二main.ts中导入index.less步骤三直接使用识别不到less导入less 创建项目 使用Vite 构建工具创建项目模板
npm init vuelatest创建完项目npm install 一下即可
目录介绍 插件安装
看一下vscode推荐的插件 安装所推荐的插件为了更好的类型检测
创建别名 编译说明 项目配置
配置icon和标题 配置项目别名
配置ts.config.json 检测vscode的插件是否配置 配置项目代码规范
集成editorconfig配置
有助于为不同IDE编辑器上处理同一个项目的多个开发人员维护一致的编码风格Vscode需要安装一个插:EditorConfig for VS Code
prettier工具库
一个强大的代码格式化工具类似空行这些也能删除这个创建项目的时候有提示你是否安装若未安装自己也可按命令安装1安装
npm install prettier2配置 3也可配置.prettlerignore忽略文件以上安装的时候都已完成4测试prettler是否生效保存一下发现没有删除空行5在package.json配置一个scripts可以不用这个方法下面更简便prettier:prettier --write但操作麻烦不能一直npm run prettier6利用vscode插件 7配置先勾选 8方法1ctrl p点击下面这个即可格式化一次 9但想设置一下保存即可格式化 10生效了这样就可以保存按prettier风格优化了
ESLint检测配置
用于检测不规范代码给予提示或警告 为了解决他们之间的冲突会安装这个解决如果创建项目的时候开启过这里就不用配置
npm install eslint-pluugin-prettier eslint-config-prettier -DCSS样式重置
normalize.cssreset.css
npm install normalize.css步骤main.ts里面
import normalize.css步骤一新建css文件夹 步骤二main.ts中导入index.less 步骤三直接使用识别不到less导入less
如果提示less找不到就导入less
npm install less -Dcss生效
