从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 .js,.ts,.vue ./src
描述: 使用 ESLint 对 ./src 目录下的 .js、.ts 和 .vue 文件进行代码风格检查，并尝试自动修复。

"lint:prettier":
命令: prettier --write "src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}"
描述: 使用 Prettier 对指定文件类型进行代码格式化，并直接写入文件。

"lint:stylelint":
命令: stylelint --cache --fix "**/*.{vue,less,postcss,css,scss}" --cache-location node_modules/.cache/stylelint/
描述: 使用 Stylelint 对指定的样式文件进行代码风格检查，并尝试自动修复，同时利用缓存提高性能。

"lint:lint-staged":
命令: lint-staged
描述: 使用 lint-staged 对 Git 暂存区中的文件运行指定的 linters，确保提交的代码符合项目的代码风格要求

Git 钩子与版本管理
"prepare":
命令: husky install
描述: 在 npm install 或 yarn install 时运行，使用 husky 安装 Git 钩子，以便在提交代码之前运行某些检查。

"release":
命令: standard-version
描述: 使用 standard-version 自动化版本管理和 CHANGELOG 的生成，用于发布新版本。

自定义命令
"commit":
命令: git add -A && czg && git push
描述: 一个自定义的提交命令，先添加所有更改，然后使用 czg（可能是 commitizen 的别名或自定义命令）指导用户编写符合规范的 commit message，最后推送更改到远程仓库。

总结：这些脚本配置为项目的开发、构建、测试和发布等各个阶段提供了方便的自动化命令，提高了开发效率。

3. 项目依赖项详解

dependencies：项目依赖。在编码阶段和呈现页面阶段都需要的，也就是说，项目依赖即在开发环境中，又在生产环境中。

 "dependencies": {
    "@element-plus/icons-vue": "^2.1.0",
    "@vueuse/core": "^10.1.0",
    "@wangeditor/editor": "^5.1.23",
    "@wangeditor/editor-for-vue": "^5.1.12",
    "axios": "^1.4.0",
    "dayjs": "^1.11.7",
    "driver.js": "^0.9.8",
    "echarts": "^5.4.1",
    "echarts-liquidfill": "^3.1.0",
    "element-plus": "^2.3.4",
    "js-md5": "^0.7.3",
    "mitt": "^3.0.0",
    "nprogress": "^0.2.0",
    "pinia": "^2.0.35",
    "pinia-plugin-persistedstate": "^3.1.0",
    "print-js": "^1.6.0",
    "qs": "^6.11.1",
    "sortablejs": "^1.15.0",
    "vue": "^3.2.47",
    "vue-i18n": "^9.2.2",
    "vue-router": "^4.1.6",
    "vuedraggable": "^4.1.0"
  },

项目依赖项详解

依赖项列表
@element-plus/icons-vue
版本: ^2.1.0
作用: 提供 Element Plus UI 框架的图标库，用于在 Vue 3 项目中轻松使用各种图标。

@vueuse/core
版本: ^10.1.0
作用: 一个基于 Vue 3 的实用函数和组合式 API 的集合，提供了许多常用的功能，如状态管理、事件监听、动画控制等。

@wangeditor/editor 和 @wangeditor/editor-for-vue
版本: ^5.1.23 和 ^5.1.12
作用: WangEditor 是一款功能强大的富文本编辑器，这两个包分别提供了编辑器的核心功能和 Vue 3 的集成支持。

axios
版本: ^1.4.0
作用: 一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 中发送 HTTP 请求。

dayjs
版本: ^1.11.7
作用: 一个轻量级的 JavaScript 日期处理库，提供了许多方便的方法来解析、验证、操作和显示日期和时间。

driver.js
版本: ^0.9.8
作用: 一个用于创建引导或教程的库，可以帮助用户更好地理解和使用你的应用。

echarts 和 echarts-liquidfill
版本: ^5.4.1 和 ^3.1.0
作用: ECharts 是一个使用 JavaScript 实现的开源可视化库，可以在浏览器中生成各种图表。echarts-liquidfill 是 ECharts 的一个插件，用于创建液态填充图。

element-plus
版本: ^2.3.4
作用: Element Plus 是 Element UI 的 Vue 3 版本，一个基于 Vue 3 的高质量 UI 组件库。

js-md5
版本: ^0.7.3
作用: 一个用于生成 MD5 哈希值的 JavaScript 库。

mitt
版本: ^3.0.0
作用: 一个轻量级的、与事件发射器 API 兼容的事件总线库，用于在 Vue 组件之间传递事件。

nprogress
版本: ^0.2.0
作用: 一个轻量级的进度条库，用于在浏览器顶部显示页面加载进度。

pinia 和 pinia-plugin-persistedstate
版本: ^2.0.35 和 ^3.1.0
作用: Pinia 是 Vue 3 的状态管理库，类似于 Vuex 但更加轻量级和灵活。pinia-plugin-persistedstate 是一个用于 Pinia 的插件，可以将状态持久化到 localStorage 或 sessionStorage。

print-js
版本: ^1.6.0
作用: 一个用于在客户端打印 HTML 内容的 JavaScript 库。

qs
版本: ^6.11.1
作用: 一个用于解析和格式化 URL 查询字符串的库，常用于处理 GET 和 POST 请求的参数。

sortablejs
版本: ^1.15.0
作用: 一个用于列表排序的 JavaScript 库，可以轻松实现拖放排序、搜索和过滤等功能。

vue
版本: ^3.2.47
作用: Vue.js 是一个构建用户界面的渐进式框架，用于构建复杂的单页面应用。这里使用的是 Vue 3 的版本。

vue-i18n
版本: ^9.2.2
作用: Vue.js 的国际化插件，用于实现多语言支持。

vue-router
版本: ^4.1.6
作用: Vue.js 的官方路由管理器，用于构建单页面应用的页面

3. 开发环境依赖

项目依赖配置详解
在前端项目中，devDependencies 是指仅在开发环境中需要的依赖项。它们通常用于支持开发流程，如代码检查、构建、测试等，但不会在生产环境中被包含。以下是对 devDependencies 中各依赖项的详细解释。

"devDependencies": {
    "@commitlint/cli": "^17.4.4",
    "@commitlint/config-conventional": "^17.4.4",
    "@types/js-md5": "^0.7.0",
    "@types/nprogress": "^0.2.0",
    "@types/qs": "^6.9.7",
    "@types/sortablejs": "^1.15.1",
    "@typescript-eslint/eslint-plugin": "^5.55.0",
    "@typescript-eslint/parser": "^5.55.0",
    "@vitejs/plugin-vue": "^4.1.0",
    "@vitejs/plugin-vue-jsx": "^3.0.1",
    "autoprefixer": "^10.4.14",
    "cz-git": "^1.6.1",
    "czg": "^1.6.1",
    "eslint": "^8.36.0",
    "eslint-config-prettier": "^8.7.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.9.0",
    "husky": "^8.0.3",
    "lint-staged": "^13.2.0",
    "postcss": "^8.4.21",
    "postcss-html": "^1.5.0",
    "prettier": "^2.8.4",
    "rollup-plugin-visualizer": "^5.9.0",
    "sass": "^1.62.0",
    "standard-version": "^9.5.0",
    "stylelint": "^15.6.0",
    "stylelint-config-html": "^1.1.0",
    "stylelint-config-recess-order": "^4.0.0",
    "stylelint-config-recommended-scss": "^9.0.1",
    "stylelint-config-recommended-vue": "^1.4.0",
    "stylelint-config-standard": "^30.0.1",
    "stylelint-config-standard-scss": "^7.0.1",
    "typescript": "^5.0.4",
    "unplugin-vue-setup-extend-plus": "^1.0.0",
    "vite": "^4.3.3",
    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-eslint": "^1.8.1",
    "vite-plugin-html": "^3.2.0",
    "vite-plugin-svg-icons": "^2.0.1",
    "vue-tsc": "^1.2.0"
  }

开发依赖详解

@commitlint/cli 和 @commitlint/config-conventional
作用：用于检查 git commit 消息是否符合某种格式规范（这里是 Conventional Commits 格式）。
版本：^17.4.4，表示安装 17.4.4 及以上版本，但不包括 18.0.0。

@types/js-md5, @types/nprogress, @types/qs, @types/sortablejs
作用：TypeScript 的类型定义文件，用于为相应的 JavaScript 库提供类型信息。
版本：各自指定了相应的版本范围。

@typescript-eslint/eslint-plugin 和 @typescript-eslint/parser
作用：在 TypeScript 项目中使用 ESLint 进行代码检查。
版本：^5.55.0，表示安装 5.55.0 及以上版本。

@vitejs/plugin-vue 和 @vitejs/plugin-vue-jsx
作用：为 Vite 提供 Vue 支持的插件，后者还提供了对 Vue JSX 的支持。
版本：^4.1.0 和 ^3.0.1，分别指定了版本范围。

autoprefixer
作用：为 CSS 添加浏览器前缀，确保样式在所有浏览器中都有良好的兼容性。
版本：^10.4.14。

cz-git 和 czg
作用：用于实现自定义的 git commit 消息格式，通常与 commitlint 一起使用。
版本：^1.6.1。

eslint, eslint-config-prettier, eslint-plugin-prettier, eslint-plugin-vue
作用：ESLint 用于代码检查，而相关插件用于与 Prettier 集成、检查 Vue 文件等。
版本：各自指定了相应的版本范围。

husky, lint-staged
作用：husky 用于在 git hooks 中运行脚本，而 lint-staged 用于在 git 暂存的文件上运行 linters。
版本：^8.0.3 和 ^13.2.0。

postcss, postcss-html
作用：PostCSS 是一个用于转换 CSS 的工具，postcss-html 则用于处理 HTML 文件中的样式。
版本：^8.4.21 和 ^1.5.0。

prettier
作用：代码格式化工具，确保团队中的代码风格一致。
版本：^2.8.4。

rollup-plugin-visualizer
作用：Rollup 插件，用于生成项目依赖关系的可视化图表。
版本：^5.9.0。

sass
作用：Sass 是一种 CSS 预处理器，提供了变量、嵌套、混合等功能。
版本：^1.62.0。

standard-version
作用：自动处理版本控制和 CHANGELOG 的工具。
版本：^9.5.0。

stylelint 和相关配置
作用：用于检查 CSS/SCSS/Less 等样式文件的工具，相关配置定义了检查的规则。
版本：各自指定了相应的版本范围。

typescript
作用：TypeScript 是 JavaScript 的一个超集，添加了静态类型、接口等特性。
版本：^5.0.4。

unplugin-vue-setup-extend-plus, vite, vite 相关插件
作用：为 Vite 提供额外的功能支持，如代码压缩、ESLint 集成、处理 HTML 和 SVG 等。
版本：各自指定了相应的版本范围。

vue-tsc
作用：Vue 3 项目的 TypeScript 编译器，基于 TypeScript 和 Vue 的官方编译器插件。
版本：^1.2.0。

总结：这些依赖项共同构成了一个完整的开发环境，涵盖了代码检查、格式化、构建、版本控制等多个方面，为前端项目的开发提供了强大的支持。

如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~！
关注收藏博客 作者会持续更新…