vue3 工程package.json说明

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文件，梳理出来了后续要了解的相关知识有：

1. vite的配置及用法
2. lint的配置及用法
3. @element-plus/icons-vue的配置及用法
4. @highlightjs/vue-plugin的配置及用法
5. @wangeditor的配置及用法
6. axios的配置及用法
7. css-color-function的配置及用法
8. echarts的配置及用法
9. element-plus的配置及用法
10. highlight.js的配置及用法
11. nprogress的配置及用法
12. pinia的配置及用法
13. vue的配置及用法
14. vue-clipboard3的配置及用法
15. vue-echarts的配置及用法
16. vue-router的配置及用法
17. vue3-video-play的配置及用法
18. vuedraggable的配置及用法
19.  @rushstack/eslint-patch的配置及用法
20. @tailwindcss/line-clamp的配置及用法
21. @types/lodash-es的配置及用法
22. @types/nprogress的配置及用法
23. @vitejs/plugin-vue的配置及用法
24. @vitejs/plugin-vue-jsx的配置及用法
25. @vue/eslint-config-prettier的配置及用法
26. @vue/eslint-config-typescript的配置及用法
27. @vue/tsconfig的配置及用法
28. autoprefixer的配置及用法
29. consola的配置及用法
30. eslint的配置及用法
31. eslint-plugin-vue的配置及用法
32. execa的配置及用法
33. fs-extra的配置及用法
34. postcss的配置及用法
35. prettier的配置及用法
36. sass的配置及用法
37. tailwindcss的配置及用法
38. typescript的配置及用法
39. unplugin-auto-import的配置及用法
40. unplugin-vue-components的配置及用法
41. vite的配置及用法
42. vite-plugin-style-import的配置及用法
43. vite-plugin-svg-icons的配置及用法
44. vite-plugin-vue-setup-extend的配置及用法
45. vue-tsc的配置及用法