vue3 工程package.json说明

package.json配置了解。

/** 对项目或者模块包的描述，里面包含许多元信息。比如项目名称，项目版本，项目执行入口文件等等。* npm install 命令会根据这个文件下载所有依赖模块。
*/{"name": "ms",//项目（模块）名称 "version": "0.0.1",//版本"author": "pottry<xxxx>",//作者"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的配置及用法

vue3 工程package.json说明相关推荐

node工程中package.json文件作用是什么？里面的^尖括号和~波浪号是什么意思？
1.package.json文件的作用是什么? package.json是包的说明文件,主要有以下3个作用: (1)相当于你本地项目的一个文档说明. (2)允许你指定你项目中所使用的node包的版本. ...
《微信小程序-进阶篇》package.json版本说明及各类版本符号详解（一）
大家好,这是小程序系列的第十一篇文章,在这一个阶段,我们的目标是由简单入手,逐渐的可以较为深入的了解组件化开发,并且实践积累一些后续项目也就是原神资料站中用得着的组件: 1.<微信小程序-基础 ...
node.js 中的package.json文件怎么创建？
最近在用webstorm和nodejs做一些东西,老是各种混乱,今天上午创建一个新的项目,结果发现,npm init之后,并没有出现package.json,并没有太明确他的功能的小姑娘表示十分的惊慌 ...
给nodejs应用的package.json添加Redis服务的依赖
我之前有个nodejs应用,部署到SAP云平台上之后没法正常运行,我通过SAP云平台的Logs功能查看运行日志: 发现一行错误信息:Cannot find module 'redis': c:\Cod ...
package.json 详解
当我们创建一个 Node 项目时, 需要创建一个 package.json 文件,描述这个项目所需要的各种模块,以及项目的配置信息(比如名称.版本.许可证等元数据). 你可以在命令行使用 npm he ...
uniapp ios原生插件开发之插件包格式(package.json)
文章目录一.前言二.插件包格式介绍 2.1 package.json 2.2 iOS 插件包配置 plugins integrateType 依赖资源文件 resources embedSwift ...
package.json 中的波浪号（~）和插入符号（^）有什么区别？
问题描述: 在我升级到最新的稳定版 node 和 npm 后,我尝试了 npm install moment --save.它使用插入符号 ^ 前缀将条目保存在 package.json 中.以前,它 ...
vue cli3 热更新保存时自动刷新页面内容 + 分离环境变量.env package.json配置
前几天ts+vue3.0+view-design撸了一个项目,然后总感觉哪里不对劲,今天终于醒悟了原来是热更新没开在vue.config.js中配置以下选项 const IS_PRO = ['pro ...
npm package.json文件中的依赖关系，devDependencies和peerDependencies之间有什么区别？
本文翻译自:What's the difference between dependencies, devDependencies and peerDependencies in npm packag ...

vue3 工程package.json说明

package.json配置了解。

插件版本控制说明：

通过整理package.json文件，梳理出来了后续要了解的相关知识有：

vue3 工程package.json说明相关推荐

最新文章

热门文章