package.json配置了解。
/*
* 对项目或者模块包的描述，里面包含许多元信息。比如项目名称，项目版本，项目执行入口文件等等。
* npm install 命令会根据这个文件下载所有依赖模块。
*/
{
"name": "ms",//项目（模块）名称
"version": "0.0.1",//版本
"author": "pottry
"description": "前端开发框架",//项目（模块）描述
"homepage": "",//首页
"license": "MIT",
"scripts": { //执行 npm 脚本命令简写
"start": "vite", //vite 开发环境启动
"preview": "vite preview --port 9001", //预览
"build": "vite build && node scripts/release.mjs", //构建打包
"type-check": "vue-tsc --noEmit", //类型检查
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore" //代码风格检查
},
"dependencies": { //项目依赖。在编码阶段和呈现页面阶段都需要的，npm install -S 保存位置
//Element Plus 提供的一套常用的图标集合，参看：https://element-plus.gitee.io/zh-CN/component/icon.html#%E5%9B%BE%E6%A0%87%E9%9B%86%E5%90%88
"@element-plus/icons-vue": "^2.0.6",
//一些日志预览，还有文件的预览，需要进行代码高亮显示的插件，参看：https://www.npmjs.com/package/@highlightjs/vue-plugin?activeTab=readme
"@highlightjs/vue-plugin": "^2.1.0",
//富文本编辑器，参看：https://www.wangeditor.com/v5/for-frame.html#vue3
"@wangeditor/editor": "^5.1.12",
"@wangeditor/editor-for-vue": "^5.1.12",
//基于pormise的网络请求，参看：https://www.axios-http.cn/docs/intro
"axios": "^0.27.2",
//一个解析器和转换器，用于Tab Atkins提出的CSS颜色函数，参看：https://www.npmjs.com/package/css-color-function
"css-color-function": "^1.3.3",
//百度图表组件，参看:https://echarts.apache.org/handbook/zh/
"echarts": "^5.3.3",
//elemetUI框架，https://element-plus.gitee.io/zh-CN/guide/installation.html
"element-plus": "^2.2.9",
//突出js是用JavaScript编写的语法高亮，参看：https://www.npmjs.com/package/highlight.js
"highlight.js": "^11.6.0",
//ajax请求进度条，参看：https://www.npmjs.com/package/nprogress
"nprogress": "^0.2.0",
//直观、类型安全、灵活的vue存储，参看：https://www.npmjs.com/package/pinia
"pinia": "^2.0.14",
//用于构建现代web UI的渐进式JavaScript框架，参看：github.com/vuejs/core
"vue": "^3.2.37",
//vue3剪切板，参看：https://www.npmjs.com/package/vue-clipboard3
"vue-clipboard3": "^2.0.0",
//vue for echarts，参看：https://www.npmjs.com/package/vue-echarts
"vue-echarts": "^6.2.3",
//路由，参看：https://github.com/vuejs/router#readme
"vue-router": "^4.0.16",
//适用于 Vue3 的 hls.js 播放器组件 | 并且支持 MP4/WebM/Ogg 格式 配置强大，参看：https://www.npmjs.com/package/vue3-video-play
"vue3-video-play": "^1.3.1-beta.6",
//vue3拖拉组件，参看：https://github.com/SortableJS/vue.draggable.next
"vuedraggable": "^4.1.0"
},
"devDependencies": {//开发依赖。仅仅在写代码过程中需要使用,比如css预处理器、vue-cli脚手架、eslint之类。npm install -D 保存位置
"@rushstack/eslint-patch": "^1.1.0",
//一个插件，它提供了在固定行数之后可视化截断文本的实用程序,参看：https://www.npmjs.com/package/@tailwindcss/line-clamp
"@tailwindcss/line-clamp": "^0.4.2",
//This package contains type definitions for lodash-es,是es6下的实用工具库，降低 array、number、objects、string 等等的使用难度等，参看：https://lodash.com/
"@types/lodash-es": "^4.17.6",
//nodejs
"@types/node": "^16.11.41",
//This package contains type definitions for NProgress
"@types/nprogress": "^0.2.0",
//提供 Vue 3 单文件组件支持，参看：https://vitejs.cn/plugins/
"@vitejs/plugin-vue": "^3.0.0",
//提供 Vue 3 JSX 支持（通过 专用的 Babel 转换插件）。参看：https://vitejs.cn/plugins/
"@vitejs/plugin-vue-jsx": "^2.0.0",
//
"@vue/eslint-config-prettier": "^7.0.0",
"@vue/eslint-config-typescript": "^11.0.0",
//TSConfigs for Vue projects to extend. 参看：https://www.npmjs.com/package/@vue/tsconfig
"@vue/tsconfig": "^0.1.3",
//PostCSS插件，用于解析CSS并使用Can I Use中的值向CSS添加前缀。参看：https://www.npmjs.com/package/autoprefixer
"autoprefixer": "^10.4.7",
//好用的打印输出,console.success等带颜色，参看：https://www.npmjs.com/package/consola
"consola": "^2.15.3",
//ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。参看：https://www.npmjs.com/package/eslint
"eslint": "^8.5.0",
//vue官方ESLint插件，参看：https://github.com/vuejs/eslint-plugin-vue
"eslint-plugin-vue": "^9.0.0",
//调用操作系统接口，参看:https://github.com/sindresorhus/execa
"execa": "^6.1.0",
//node中文件操作的替代品。参看：https://www.npmjs.com/package/fs-extra
"fs-extra": "^10.1.0",
//PostCSS 是一个允许使用 JS 插件转换样式的工具。 这些插件可以检查（lint）你的 CSS，支持 CSS Variables 和 Mixins， 编译尚未被浏览器广泛支持的先进的 CSS 语法，内联图片，以及其它很多优秀的功能。参看：https://github.com/postcss/postcss/blob/HEAD/docs/README-cn.md
"postcss": "^8.4.14",
"prettier": "^2.5.1",
//将脚本转换为css的工具
"sass": "^1.53.0",
//css编程语言，功能优先方案，参看：https://www.tailwindcss.cn/docs/utility-first
"tailwindcss": "^3.0.24",
//ts超集编程语言，参看：https://www.npmjs.com/package/typescript
"typescript": "~4.7.4",
"unplugin-auto-import": "^0.9.2",
"unplugin-vue-components": "^0.19.9",
//新一代前端工具，参看：https://github.com/vitejs/vite
"vite": "^3.0.0",
//由于 vite 本身已按需导入了组件库，因此仅样式不是按需导入的，因此只需按需导入样式即可。参看：https://github.com/vbenjs/vite-plugin-style-import/blob/main/README.zh_CN.md
"vite-plugin-style-import": "^2.0.0",
//生成svg雪碧图（精灵图），参看：https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/README.zh_CN.md
"vite-plugin-svg-icons": "^2.0.1",
//使vue脚本对setup语法支持name属性，参看：https://github.com/vbenjs/vite-plugin-vue-setup-extend
"vite-plugin-vue-setup-extend": "^0.4.0",
//Vue 3命令行类型检查工具基于IDE插件Volar。参看：https://www.npmjs.com/package/vue-tsc
"vue-tsc": "^0.38.1"
}
}
插件版本控制说明：
插件名称：“1.1.0”：表示安装1.1.0版本插件名称："~1.1.0"：表示安装1.1.x的最新版本（不低于1.1.0）也就是说安装时不改变大版本号和次要版本号。插件名称："^1.1.0"：表示安装1.1.0及以上的版本，但是不安装2.0.0，也就是说安装时不改变大版本号。
通过整理package.json文件，梳理出来了后续要了解的相关知识有：
vite的配置及用法lint的配置及用法@element-plus/icons-vue的配置及用法@highlightjs/vue-plugin的配置及用法@wangeditor的配置及用法axios的配置及用法css-color-function的配置及用法echarts的配置及用法element-plus的配置及用法highlight.js的配置及用法nprogress的配置及用法pinia的配置及用法vue的配置及用法vue-clipboard3的配置及用法vue-echarts的配置及用法vue-router的配置及用法vue3-video-play的配置及用法vuedraggable的配置及用法 @rushstack/eslint-patch的配置及用法@tailwindcss/line-clamp的配置及用法@types/lodash-es的配置及用法@types/nprogress的配置及用法@vitejs/plugin-vue的配置及用法@vitejs/plugin-vue-jsx的配置及用法@vue/eslint-config-prettier的配置及用法@vue/eslint-config-typescript的配置及用法@vue/tsconfig的配置及用法autoprefixer的配置及用法consola的配置及用法eslint的配置及用法eslint-plugin-vue的配置及用法execa的配置及用法fs-extra的配置及用法postcss的配置及用法prettier的配置及用法sass的配置及用法tailwindcss的配置及用法typescript的配置及用法unplugin-auto-import的配置及用法unplugin-vue-components的配置及用法vite的配置及用法vite-plugin-style-import的配置及用法vite-plugin-svg-icons的配置及用法vite-plugin-vue-setup-extend的配置及用法vue-tsc的配置及用法
发表评论