从0-1搭建一个web项目vue3+vite+ts+element-plus(脚手架分析)

本章分析从0-1的搭建脚手架依赖

ObJack-Admin一款基于 Vue3.3、TypeScript、Vite3、Pinia、Element-Plus 开源的后台管理框架。在一定程度上节省您的开发效率。另外本项目还封装了一些常用组件、hooks、指令、动态路由、按钮级别权限控制等功能。感兴趣的小伙伴可以访问源码点个赞 地址

本文主要对packge.json文件进行详解 scripts、dependencies、devDependencies等配置项

1. 创建项目

create vite 项目名称

2. 脚本配置

项目脚本配置详解
在项目的 package.json 文件中，scripts 部分通常包含了各种命令和脚本，用于自动化项目的开发、构建、测试和部署等过程。下面是对一个典型的 scripts 配置的详细解释。

这里我先先看一下scripts的配置项

"scripts": {
   
   
    "dev": "vite",
    "serve": "vite",
    "build:dev": "vue-tsc && vite build --mode development",
    "build:test": "vue-tsc && vite build --mode test",
    "build:pro": "vue-tsc && vite build --mode production",
    "type:check": "vue-tsc --noEmit --skipLibCheck",
    "preview": "npm run build:dev && vite preview",
    "lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
    "lint:prettier": "prettier --write \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",
    "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
    "lint:lint-staged": "lint-staged",
    "prepare": "husky install",
    "release": "standard-version",
    "commit": "git add -A && czg && git push"
  },

对于以上配置项有些可能不太理解 下面我对配置项进行了一一的解释方便大家在配置的时候进行选择

• 开发环境

"dev":
命令: vite
描述: 使用 vite 启动开发服务器，进入开发模式。

"serve":
命令: vite
描述: 与 "dev" 命令相同，通常用于与其他工具或框架的约定保持一致。

构建
"build:dev":
命令: vue-tsc && vite build --mode development
描述: 先使用 vue-tsc 进行 TypeScript 代码检查，然后使用 vite 进行构建，指定为开发模式。

"build:test":
命令: vue-tsc && vite build --mode test
描述: 与 "build:dev" 类似，但指定为测试模式，可能生成用于测试环境的构建版本。

"build:pro":
命令: vue-tsc && vite build --mode production
描述: 进行生产模式的构建，首先进行 TypeScript 检查，然后生成优化过的构建版本。
类型检查

"type:check":
命令: vue-tsc --noEmit --skipLibCheck
描述: 使用 vue-tsc 进行 TypeScript 类型检查，但不生成输出，并跳过库的类型检查。
预览

"preview":
命令: npm run build:dev && vite preview
描述: 先运行 "build:dev" 命令进行开发模式的构建，然后使用 vite 

preview 命令启动一个预览服务器，以便查看构建后的应用。
代码检查与格式化

"lint:eslint":
命令: eslint --fix --ext .