vuejson解析（vue解析url参数）

## Vue.json 解析：构建 Vue 项目的配置文件### 1. 简介Vue.json 是 Vue CLI 项目中的一个重要配置文件，用于定义项目的配置选项，例如构建目标、依赖项、插件等等。它基于 JSON 格式，方便开发者以结构化的方式管理项目配置。### 2. Vue.json 的作用Vue.json 文件主要负责以下几方面：

依赖管理:

定义项目依赖的包及其版本号。

构建目标:

设定构建目标，例如生产环境、开发环境等。

插件配置:

配置需要使用的插件以及其配置选项。

自定义配置:

允许开发者添加自定义配置选项，用于满足项目特定需求。### 3. Vue.json 结构Vue.json 通常包含以下几个主要的字段：

dependencies:

定义项目所依赖的包，例如 Vue.js、Vue Router 等。

devDependencies:

定义项目开发过程中所需的依赖，例如 Babel、Webpack 等。

scripts:

定义项目常用的命令，例如 "serve"、"build"、"lint" 等。

browserslist:

定义项目支持的浏览器列表。

plugins:

定义项目使用的插件，例如 eslint、babel-loader 等。

lintOnSave:

设定是否在保存时进行代码检查。

publicPath:

定义构建后项目的公共路径。

outputDir:

定义构建后项目的输出目录。

transpileDependencies:

定义需要被 Babel 转译的依赖项。

... ### 4. 示例：Vue.json 文件解析```json {"name": "vue-project","version": "1.0.0","description": "A Vue.js project","author": "Your Name","private": true,"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"},"dependencies": {"vue": "^3.2.31","vue-router": "^4.1.6"},"devDependencies": {"@vue/cli-plugin-babel": "~5.0.0","@vue/cli-service": "~5.0.0","@vue/compiler-sfc": "^3.2.31","babel-core": "^7.0.0","babel-loader": "^8.2.5","eslint": "^8.15.0","eslint-plugin-vue": "^9.4.1","sass": "^1.57.1","sass-loader": "^13.0.2","vue-template-compiler": "^2.6.14"},"browserslist": ["> 1%","last 2 versions","not dead"] } ```

name, version, description, author:

基本项目信息

private:

设置为 `true` 表示该项目是一个私有项目。

scripts:

定义了三个常用的命令，分别是启动开发服务器、打包项目、代码检查。

dependencies:

定义了项目依赖的两个包，分别是 Vue.js 和 Vue Router。

devDependencies:

定义了项目开发过程中所需的依赖，例如 Babel、Webpack 等。

browserslist:

定义了项目支持的浏览器列表，包括市场份额超过 1% 的浏览器、最近两个版本浏览器和非过时浏览器。### 5. 修改 Vue.json开发者可以使用文本编辑器直接修改 Vue.json 文件，或者使用 Vue CLI 提供的命令行工具进行修改。例如，使用 `vue add ` 命令可以添加一个新的插件，使用 `vue config.js` 命令可以配置项目中的自定义选项。### 6. 小结Vue.json 文件是 Vue CLI 项目中重要的配置文件，开发者需要了解其结构和用途，并根据项目需求进行配置。 通过合理使用 Vue.json，开发者可以有效地管理项目依赖、构建目标、插件配置和自定义选项，提升项目开发效率。

Vue.json 解析：构建 Vue 项目的配置文件

1. 简介Vue.json 是 Vue CLI 项目中的一个重要配置文件，用于定义项目的配置选项，例如构建目标、依赖项、插件等等。它基于 JSON 格式，方便开发者以结构化的方式管理项目配置。

2. Vue.json 的作用Vue.json 文件主要负责以下几方面：* **依赖管理:** 定义项目依赖的包及其版本号。 * **构建目标:** 设定构建目标，例如生产环境、开发环境等。 * **插件配置:** 配置需要使用的插件以及其配置选项。 * **自定义配置:** 允许开发者添加自定义配置选项，用于满足项目特定需求。

3. Vue.json 结构Vue.json 通常包含以下几个主要的字段：* **dependencies:** 定义项目所依赖的包，例如 Vue.js、Vue Router 等。 * **devDependencies:** 定义项目开发过程中所需的依赖，例如 Babel、Webpack 等。 * **scripts:** 定义项目常用的命令，例如 "serve"、"build"、"lint" 等。 * **browserslist:** 定义项目支持的浏览器列表。 * **plugins:** 定义项目使用的插件，例如 eslint、babel-loader 等。 * **lintOnSave:** 设定是否在保存时进行代码检查。 * **publicPath:** 定义构建后项目的公共路径。 * **outputDir:** 定义构建后项目的输出目录。 * **transpileDependencies:** 定义需要被 Babel 转译的依赖项。 * ...

4. 示例：Vue.json 文件解析```json {"name": "vue-project","version": "1.0.0","description": "A Vue.js project","author": "Your Name","private": true,"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"},"dependencies": {"vue": "^3.2.31","vue-router": "^4.1.6"},"devDependencies": {"@vue/cli-plugin-babel": "~5.0.0","@vue/cli-service": "~5.0.0","@vue/compiler-sfc": "^3.2.31","babel-core": "^7.0.0","babel-loader": "^8.2.5","eslint": "^8.15.0","eslint-plugin-vue": "^9.4.1","sass": "^1.57.1","sass-loader": "^13.0.2","vue-template-compiler": "^2.6.14"},"browserslist": ["> 1%","last 2 versions","not dead"] } ```* **name, version, description, author:** 基本项目信息 * **private:** 设置为 `true` 表示该项目是一个私有项目。 * **scripts:** 定义了三个常用的命令，分别是启动开发服务器、打包项目、代码检查。 * **dependencies:** 定义了项目依赖的两个包，分别是 Vue.js 和 Vue Router。 * **devDependencies:** 定义了项目开发过程中所需的依赖，例如 Babel、Webpack 等。 * **browserslist:** 定义了项目支持的浏览器列表，包括市场份额超过 1% 的浏览器、最近两个版本浏览器和非过时浏览器。

5. 修改 Vue.json开发者可以使用文本编辑器直接修改 Vue.json 文件，或者使用 Vue CLI 提供的命令行工具进行修改。例如，使用 `vue add ` 命令可以添加一个新的插件，使用 `vue config.js` 命令可以配置项目中的自定义选项。

6. 小结Vue.json 文件是 Vue CLI 项目中重要的配置文件，开发者需要了解其结构和用途，并根据项目需求进行配置。 通过合理使用 Vue.json，开发者可以有效地管理项目依赖、构建目标、插件配置和自定义选项，提升项目开发效率。