Vue-10.NodeJs自动生成的配置和ant-design-vue集成

.browserslistrc(自动生成的)

> 1%              ## 适用于市场份额大于1%的浏览器
last 2 versions   ## 适用于每个浏览器的最近两个版本
not dead          ## 排除已不再被支持的浏览器
not ie 11         ## 排除Internet Explorer 11

package.json

{
  "name": "my-vue-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "register-service-worker": "^1.7.2",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0",
    "ant-design-vue": "1.7.2",
    "axios": "^0.19.0",
    "echarts": "^5.0.0",
    "enquire.js": "^2.1.6",
    "highlight.js": "^10.5.0",
    "lodash.clonedeep": "^4.5.0",
    "lodash.get": "^4.4.2",
    "lodash.pick": "^4.4.0",
    "md5": "^2.2.1",
    "mockjs2": "1.0.8",
    "moment": "^2.24.0",
    "nprogress": "^0.2.0",
    "store": "^2.0.12",
    "vditor": "^3.7.3",
    "vue-clipboard2": "^0.2.1",
    "vue-container-query": "^0.1.0",
    "vue-copy-to-clipboard": "^1.0.3",
    "v-viewer": "^1.5.1",
    "vue-upload-component": "^2.8.20",
    "sortablejs": "^1.10.2",
    "vue-cropper": "0.4.9",
    "vue-i18n": "^8.17.4",
    "vue-svg-component-runtime": "^1.0.1",
    "vue-grid-layout": "^2.3.12"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-e2e-cypress": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-pwa": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-unit-jest": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "@vue/vue3-jest": "^27.0.0-alpha.1",
    "babel-jest": "^27.0.6",
    "cypress": "^9.7.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "jest": "^27.0.5",
    "less": "^4.0.0",
    "less-loader": "^8.0.0",
    "prettier": "^2.4.1"
  }
}

非常抱歉,我误解了您的需求。以下是针对不同部分生成的四个表格,以便更清晰地解释配置文件中的内容:

1. 项目信息和脚本:

属性 描述
name “my-vue-app” 项目名称
version “0.1.0” 项目版本
private true 私有项目,不发布到公共 npm 仓库
scripts.serve “vue-cli-service serve” 启动开发服务器
scripts.build “vue-cli-service build” 构建生产版本
scripts.test:unit “vue-cli-service test:unit” 运行单元测试
scripts.test:e2e “vue-cli-service test:e2e” 运行端到端测试
scripts.lint “vue-cli-service lint” 代码风格检查

2. 生产依赖项:

依赖项 版本号 描述
core-js “^3.8.3” ECMAScript 标准库,提供 ES6+ 功能的兼容
register-service-worker “^1.7.2” 注册 service worker,用于 PWA
vue “^3.2.13” Vue.js 框架
vue-router “^4.0.3” Vue 路由管理
vuex “^4.0.0” Vue 状态管理
ant-design-vue “1.7.2” Ant Design Vue UI 组件库
axios “^0.19.0” 发起 HTTP 请求的 Promise 基础库
echarts “^5.0.0” 数据可视化库
enquire.js “^2.1.6” 媒体查询库,响应式设计
highlight.js “^10.5.0” 代码语法高亮库
lodash.clonedeep “^4.5.0” Lodash 工具库的深拷贝函数
lodash.get “^4.4.2” Lodash 工具库的获取值函数
lodash.pick “^4.4.0” Lodash 工具库的选取属性函数
md5 “^2.2.1” 计算 MD5 散列值的工具库
mockjs2 “1.0.8” 生成模拟数据的库
moment “^2.24.0” 日期和时间操作库
nprogress “^0.2.0” 页面加载进度条
store “^2.0.12” 轻量级的本地数据存储库
vditor “^3.7.3” Markdown 编辑器库
vue-clipboard2 “^0.2.1” 复制粘贴库
vue-container-query “^0.1.0” 响应式容器查询库
vue-copy-to-clipboard “^1.0.3” 复制到剪贴板库
v-viewer “^1.5.1” 图片查看器库
vue-upload-component “^2.8.20” 文件上传组件库
sortablejs “^1.10.2” 可拖拽排序库
vue-cropper “0.4.9” 图片裁剪库
vue-i18n “^8.17.4” 国际化库
vue-svg-component-runtime “^1.0.1” SVG 组件库
vue-grid-layout “^2.3.12” 网格布局组件库

3. 开发依赖项:

依赖项 版本号 描述
@babel/core “^7.12.16” Babel 核心库,用于转换 ES6+ 语法
@babel/eslint-parser “^7.12.16” Babel 的 ESLint 解析器
@vue/cli-plugin-babel “~5.0.0” Vue CLI Babel 插件
@vue/cli-plugin-e2e-cypress “~5.0.0” Vue CLI Cypress 插件
@vue/cli-plugin-eslint “~5.0.0” Vue CLI ESLint 插件
@vue/cli-plugin-pwa “~5.0.0” Vue CLI PWA 插件
@vue/cli-plugin-router “~5.0.0” Vue CLI 路由插件
@vue/cli-plugin-unit-jest “~5.0.0” Vue CLI 单元测试插件
@vue/cli-plugin-vuex “~5.0.0” Vue CLI Vuex 插件
@vue/cli-service “~5.0.0” Vue CLI 核心服务
@vue/test-utils “^2.0.0-0” Vue 测试工具库
@vue/vue3-jest “^27.0.0-alpha.1” Vue 3 的 Jest 测试工具
babel-jest “^27.0.6” Jest 的 Babel 转换器
cypress “^9.7.0” 端到端测试框架
eslint “^7.32.0” 代码风格检查工具
eslint-config-prettier “^8.3.0” ESLint 配置与 Prettier 配置的兼容
eslint-plugin-prettier “^4.0.0” ESLint 和 Prettier 的集成插件
eslint-plugin-vue “^8.0.3” ESLint 插件,用于处理 Vue 代码
jest “^27.0.5” 测试框架
less “^4.0.0” Less 预处理器
less-loader “^8.0.0” Webpack 的 Less 加载器
prettier “^2.4.1” 代码格式化工具

babel.config.js(ant-design-vue集成)

const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)

const plugins = []
if (IS_PROD) {
  plugins.push('transform-remove-console') // 如果是生产环境,移除 console
}

// 懒加载 ant-design-vue
// 如果您使用按需导入,使用以下代码
plugins.push([
  'import',
  {
    libraryName: 'ant-design-vue',
    libraryDirectory: 'es',
    style: true, // `style: true` 会加载 less 文件
  },
])

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'entry',
        corejs: 3,
      },
    ],
  ],
  plugins,
}

这段代码是一个 Babel 配置文件,用于配置项目的 JavaScript 编译选项。以下是代码中各部分的作用:

  1. 判断是否为生产环境: IS_PROD 常量被用来判断当前环境是否为生产环境(productionprod)。如果是生产环境,则后续的插件配置中会移除掉 console 语句。

  2. 插件列表: plugins 数组用于存储 Babel 插件。初始为空,然后根据环境和需求添加不同的插件。

  3. 移除 console: 如果是生产环境,将一个名为 'transform-remove-console' 的插件添加到 plugins 数组中,以实现在生产环境中移除 console 语句。

  4. 懒加载 ant-design-vue: 将一个 'import' 插件添加到 plugins 数组中,用于按需导入 Ant Design Vue 组件。这个插件会加载相应的模块,并根据配置加载对应的样式(less 文件)。

  5. Babel 配置对象: 这是实际的 Babel 配置对象,包括了预设和插件两个部分。

    • presets: 配置了使用的预设,其中包括了 @vue/cli-plugin-babel/preset@babel/preset-env@vue/cli-plugin-babel/preset 是 Vue CLI 的默认预设,而 @babel/preset-env 则用于根据目标浏览器环境自动选择需要的转换和填充。
    • plugins: 这里使用了之前添加到 plugins 数组中的插件。

通过这份配置文件,您可以自定义项目的 JavaScript 编译过程,根据不同的环境需求应用不同的插件,以及根据预设配置自动适配目标浏览器。这有助于优化代码,提升应用的性能和兼容性。

vue.config.js(ant-design-vue集成)

plugin.config.js

// 引入 webpack-theme-color-replacer 模块
const ThemeColorReplacer = require('webpack-theme-color-replacer')
// 引入 ant-design/colors 中的生成函数
const generate = require('@ant-design/colors/lib/generate').default

// 获取一系列 Ant Design 的颜色变化
const getAntdSerials = (color) => {
  // 淡化(即 less 的 tint)
  const lightens = new Array(9).fill().map((t, i) => {
    return ThemeColorReplacer.varyColor.lighten(color, i / 10)
  })
  // 生成颜色调色板
  const colorPalettes = generate(color)
  // 将颜色转换为 RGB 值
  const rgb = ThemeColorReplacer.varyColor.toNum3(color.replace('#', '')).join(',')
  return lightens.concat(colorPalettes).concat(rgb)
}

// 定义主题颜色替换插件的配置选项
const themePluginOption = {
  fileName: 'css/theme-colors-[contenthash:8].css', // 输出文件名,含 hash 值
  matchColors: getAntdSerials('#1890ff'), // 主色系列为 #1890ff
  // 修改样式选择器,以解决样式覆盖问题
  changeSelector(selector) {
    switch (selector) {
      // 添加选择器的修改规则
      case '.ant-calendar-today .ant-calendar-date':
        return ':not(.ant-calendar-selected-date):not(.ant-calendar-selected-day)' + selector
      case '.ant-btn:focus,.ant-btn:hover':
        return '.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger)'
      case '.ant-btn.active,.ant-btn:active':
        return '.ant-btn.active:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:active:not(.ant-btn-primary):not(.ant-btn-danger)'
      case '.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon':
      case '.ant-steps-item-process .ant-steps-item-icon>.ant-steps-icon':
        return ':not(.ant-steps-item-process)' + selector
      // 添加更多选择器的修改规则
      default:
        return selector
    }
  },
}

// 创建主题颜色替换插件并导出
const createThemeColorReplacerPlugin = () => new ThemeColorReplacer(themePluginOption)

module.exports = createThemeColorReplacerPlugin

这个配置文件是用来实现主题颜色替换功能的。主题颜色替换是一种在 Web 应用中动态更改主题颜色的技术,通常用于使用户能够选择自己喜欢的界面配色。在这份配置文件中,您可以看到一些用于主题颜色替换的相关配置。

具体来说,这个配置文件做了以下几件事情:

  1. 引入了 webpack-theme-color-replacer 模块,该模块用于实现主题颜色替换功能。
  2. 引入了 @ant-design/colors 中的生成函数,用于生成一系列颜色变化,以便在主题中使用。
  3. 定义了一个函数 getAntdSerials,该函数根据传入的颜色生成一系列颜色变化,包括颜色的变浅、颜色调色板以及 RGB 值等。
  4. 定义了主题颜色替换插件的配置选项 themePluginOption,其中包括了输出文件名、匹配的颜色以及修改样式选择器等。
  5. 创建了一个函数 createThemeColorReplacerPlugin,用于创建主题颜色替换插件实例。
  6. 导出了 createThemeColorReplacerPlugin 函数,供其他代码引用。

总的来说,这个配置文件的作用是实现了在应用中动态更改主题颜色的功能,通过插件将指定的颜色替换为用户选择的主题颜色,从而实现个性化的界面配色。这在一些 Web 应用中尤其是基于 Ant Design 的应用中比较常见。

vue.config.js

const path = require('path')
const webpack = require('webpack')
const GitRevisionPlugin = require('git-revision-webpack-plugin')
const GitRevision = new GitRevisionPlugin()
const buildDate = JSON.stringify(new Date().toLocaleString())
const createThemeColorReplacerPlugin = require('./config/plugin.config')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']

function resolve(dir) {
  return path.join(__dirname, dir)
}

// 获取当前 Git 版本哈希值
function getGitHash() {
  try {
    return GitRevision.version()
  } catch (e) {}
  return 'unknown'
}

// 判断是否为生产环境
const isProd = process.env.NODE_ENV === 'production'

// 外部 CDN 资源配置
const assetsCDN = {
  externals: {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
    axios: 'axios',
  },
  css: [],
  js: [
    '//cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.min.js',
    '//cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js',
    '//cdn.jsdelivr.net/npm/[email protected]/dist/vuex.min.js',
    '//cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js',
  ],
}

// Vue 配置对象
const vueConfig = {
  configureWebpack: {
    plugins: [
      // 忽略 moment.js 中的所有本地化文件
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      // 定义全局常量,用于标识应用的版本、Git 哈希值和构建日期
      new webpack.DefinePlugin({
        APP_VERSION: `"${require('./package.json').version}"`,
        GIT_HASH: JSON.stringify(getGitHash()),
        BUILD_DATE: buildDate,
      }),
      // 配置 compression-webpack-plugin 压缩插件
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        // 仅压缩指定文件类型的文件
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        // 文件大小大于 10KB 时才会进行压缩
        threshold: 10240,
        // 压缩比例设置
        minRatio: 0.8,
      }),
    ],
    // 如果是生产环境,则引用外部库,避免打包到项目中
    externals: isProd ? assetsCDN.externals : {},
  },

  chainWebpack: (config) => {
    // 配置路径别名,方便在代码中引用
    config.resolve.alias
      .set('@$', resolve('src'))
      .set('@assets', resolve('src/assets'))
      .set('@views', resolve('src/views'))

    // 处理 SVG 文件,支持内联和外部引用
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
      .oneOf('inline')
      .resourceQuery(/inline/)
      .use('vue-svg-icon-loader')
      .loader('vue-svg-icon-loader')
      .end()
      .end()
      .oneOf('external')
      .use('file-loader')
      .loader('file-loader')
      .options({
        name: 'assets/[name].[hash:8].[ext]',
      })

    // 如果是生产环境,将 CDN 资源添加到 HTML 中
    if (isProd) {
      config.plugin('html').tap((args) => {
        args[0].cdn = assetsCDN
        return args
      })
    }
  },

  css: {
    // 配置 Less 主题
    loaderOptions: {
      less: {
        modifyVars: {
          // 修改 Ant Design 主题颜色
          'primary-color': '#2f54eb',
        },
        javascriptEnabled: true,
      },
    },
  },

  devServer: {
    // 开发服务器端口
    port: 80,
    // 配置代理,将请求转发到后端 API
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: `http://127.0.0.1:8080`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: '',
        },
      },
    },
    disableHostCheck: true, // 解决使用外网映射工具映射时的报错
  },

  // 是否生成生产环境的 Source Map
  productionSourceMap: false,
  lintOnSave: undefined,
  // 指定需要进行 Babel 转译的依赖
  transpileDependencies: ['core-js', 'register-service-worker'],

  // Vue 3 的新特性,开启
  runtimeCompiler: true,
}

// 仅在预览模式下启用插件
if (process.env.VUE_APP_PREVIEW === 'true') {
  console.log('VUE_APP_PREVIEW', true)
  // 添加创建主题颜色替换插件到 webpack 插件中
  vueConfig.configureWebpack.plugins.push(createThemeColorReplacerPlugin())
}

// 导出 Vue 配置对象
module.exports = vueConfig

这段代码是一个 Vue 配置文件,用于配置 Vue 项目的各种构建和开发环境相关的设置。下面是这份配置文件中各部分的作用:

  1. 导入模块和插件: 首先,导入了一些需要用到的模块和插件,包括了路径处理的 path 模块、Webpack 相关的模块、Git 版本信息插件、主题颜色替换插件以及压缩插件。

  2. 路径处理函数: resolve 函数用于生成绝对路径,方便后续配置中的路径设置。

  3. 获取 Git 版本哈希值: getGitHash 函数尝试获取当前 Git 版本的哈希值,用于标识应用的版本。

  4. 判断环境是否为生产环境: 使用 process.env.NODE_ENV 来判断当前环境是否为生产环境。

  5. 外部 CDN 资源配置: 定义了一个对象 assetsCDN,用于配置外部 CDN 资源的引入,包括了 Vue、Vue Router、Vuex 和 Axios。

  6. Vue 配置对象: 这是实际的 Vue 配置对象,包含了一系列配置项。

    • configureWebpack: 配置 Webpack 相关的选项,如插件、外部库引用等。
    • chainWebpack: 使用 Webpack 链式调用方式配置,包括路径别名设置、处理 SVG 文件、CDN 资源引入等。
    • css: 配置 CSS 相关的选项,如 Less 主题修改。
    • devServer: 配置开发服务器相关选项,如端口、代理等。
    • productionSourceMap: 控制是否生成生产环境的 Source Map。
    • lintOnSave: 是否在保存时进行代码检查。
    • transpileDependencies: 指定需要进行 Babel 转译的依赖。
    • runtimeCompiler: 启用 Vue 3 的新特性,运行时编译。
  7. 预览模式插件:process.env.VUE_APP_PREVIEW 设置为 'true' 时,会将创建主题颜色替换插件添加到 Webpack 插件中。

  8. 导出 Vue 配置对象: 将 Vue 配置对象导出,使其在项目中生效。

总的来说,这个配置文件用于配置 Vue 项目的构建、开发环境以及一些特定功能的设置,如主题颜色替换、外部资源引入等。它通过修改配置选项来实现这些功能,以满足项目的需求。

jsconfig.json

针对 JavaScript 的 jsconfig.json 文件,用于配置 JavaScript 项目的基本设置。以下是对这个配置的解释:

{
  "compilerOptions": {
    /* 目标编译版本为 ECMAScript 6 */
    "target": "es6",

    /* 生成模块的代码风格为 ES6 模块规范 */
    "module": "esnext",

    /* 模块解析策略为 Node.js 风格 */
    "moduleResolution": "node",

    /* 模块导入时的基本路径,这里设置为当前目录 */
    "baseUrl": "./",

    /* 模块导入路径的映射,以 @/ 开头的映射到 src/ 目录 */
    "paths": {
      "@/*": ["src/*"]
    },

    /* 包含的 TypeScript 标准库文件,包括最新特性、DOM 相关定义和宿主环境定义 */
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  
  /* 排除的文件或文件夹,不会被编译 */
  "exclude": ["node_modules", "dist"],
  
  /* 包含的文件,会被编译 */
  "include": ["src/**/*"]
}

让我为您解释一下每个配置的作用:

  • "compilerOptions":这是编译器选项的配置部分,用于指定 TypeScript 编译器的行为。

    • "target": "es6":指定生成的 JavaScript 代码的目标版本为 ECMAScript 6,这意味着编译后的代码将使用 ES6 特性。

    • "module": "esnext":指定生成模块的代码风格为 ES6 模块规范,支持 ES6 的模块导入和导出。

    • "moduleResolution": "node":指定模块解析策略为 Node.js 风格,以实现模块的导入解析。

    • "baseUrl": "./":设置模块导入时的基本路径,通常设置为项目根目录。

    • "paths":配置模块导入路径的映射关系,将 @/ 开头的路径映射到 src/ 目录下。

    • "lib":指定要包含在编译中的 TypeScript 标准库文件,包括 ES6 最新特性、DOM 相关定义和宿主环境定义。

  • "exclude":指定要排除的文件或文件夹,这些文件将不会被编译器处理。

  • "include":指定要包含的文件,这些文件将会被编译器处理。

通过配置这些选项,您可以确保 JavaScript 编译器按照指定的规则处理您的代码,并且模块导入路径能够正确地映射到实际的文件路径。

你可能感兴趣的:(Vue,vue.js,javascript,前端)