feat: basic framework by Arco Pro (#2)

Author: lmh-kid

.env.development

@@ -0,0 +1 @@
+VITE_API_BASE_URL= 'http://localhost:8080'

.env.production

@@ -0,0 +1,3 @@
+/*.json
+/*.js
+dist

.eslintignore

@@ -0,0 +1,70 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const path = require('path');
+
+module.exports = {
+  root: true,
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    // Parser that checks the content of the <script> tag
+    parser: '@typescript-eslint/parser',
+    sourceType: 'module',
+    ecmaVersion: 2020,
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    'browser': true,
+    'node': true,
+    'vue/setup-compiler-macros': true,
+  },
+  plugins: ['@typescript-eslint'],
+  extends: [
+    // Airbnb JavaScript Style Guide https://github.com/airbnb/javascript
+    'airbnb-base',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+    'plugin:vue/vue3-recommended',
+    'plugin:prettier/recommended',
+  ],
+  settings: {
+    'import/resolver': {
+      typescript: {
+        project: path.resolve(__dirname, './tsconfig.json'),
+      },
+    },
+  },
+  rules: {
+    'prettier/prettier': 1,
+    // Vue: Recommended rules to be closed or modify
+    'vue/require-default-prop': 0,
+    'vue/singleline-html-element-content-newline': 0,
+    'vue/max-attributes-per-line': 0,
+    // Vue: Add extra rules
+    'vue/custom-event-name-casing': [2, 'camelCase'],
+    'vue/no-v-text': 1,
+    'vue/padding-line-between-blocks': 1,
+    'vue/require-direct-export': 1,
+    'vue/multi-word-component-names': 0,
+    // Allow @ts-ignore comment
+    '@typescript-eslint/ban-ts-comment': 0,
+    '@typescript-eslint/no-unused-vars': 1,
+    '@typescript-eslint/no-empty-function': 1,
+    '@typescript-eslint/no-explicit-any': 0,
+    'import/extensions': [
+      2,
+      'ignorePackages',
+      {
+        js: 'never',
+        jsx: 'never',
+        ts: 'never',
+        tsx: 'never',
+      },
+    ],
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'no-param-reassign': 0,
+    'prefer-regex-literals': 0,
+    'import/no-extraneous-dependencies': 0,
+  },
+};

.eslintrc.js

@@ -0,0 +1,10 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local

.gitignore

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn commitlint --edit $1

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run lint-staged

.husky/pre-commit

@@ -0,0 +1,7 @@
+/dist/*
+.local
+.output.js
+/node_modules/**
+
+**/*.svg
+**/*.sh

.prettierignore

@@ -0,0 +1,9 @@
+module.exports = {
+  tabWidth: 2,
+  semi: true,
+  printWidth: 80,
+  singleQuote: true,
+  quoteProps: 'consistent',
+  htmlWhitespaceSensitivity: 'strict',
+  vueIndentScriptAndStyle: true,
+};

.prettierrc.js

@@ -0,0 +1,29 @@
+module.exports = {
+  extends: [
+    'stylelint-config-standard',
+    'stylelint-config-rational-order',
+    'stylelint-config-prettier',
+  ],
+  defaultSeverity: 'warning',
+  plugins: ['stylelint-order'],
+  rules: {
+    'at-rule-no-unknown': [
+      true,
+      {
+        ignoreAtRules: ['plugin'],
+      },
+    ],
+    'rule-empty-line-before': [
+      'always',
+      {
+        except: ['after-single-line-comment', 'first-nested'],
+      },
+    ],
+    'selector-pseudo-class-no-unknown': [
+      true,
+      {
+        ignorePseudoClasses: ['deep'],
+      },
+    ],
+  },
+};

.stylelintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: ['@vue/babel-plugin-jsx'],
+};

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+};

commitlint.config.js

@@ -0,0 +1,66 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/vue-next/pull/3399
+import '@vue/runtime-core';
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    AAffix: typeof import('@arco-design/web-vue')['Affix'];
+    AAlert: typeof import('@arco-design/web-vue')['Alert'];
+    AAvatar: typeof import('@arco-design/web-vue')['Avatar'];
+    ABadge: typeof import('@arco-design/web-vue')['Badge'];
+    ABreadcrumb: typeof import('@arco-design/web-vue')['Breadcrumb'];
+    ABreadcrumbItem: typeof import('@arco-design/web-vue')['BreadcrumbItem'];
+    AButton: typeof import('@arco-design/web-vue')['Button'];
+    ACard: typeof import('@arco-design/web-vue')['Card'];
+    ACarousel: typeof import('@arco-design/web-vue')['Carousel'];
+    ACarouselItem: typeof import('@arco-design/web-vue')['CarouselItem'];
+    ACheckbox: typeof import('@arco-design/web-vue')['Checkbox'];
+    ACol: typeof import('@arco-design/web-vue')['Col'];
+    AConfigProvider: typeof import('@arco-design/web-vue')['ConfigProvider'];
+    ADivider: typeof import('@arco-design/web-vue')['Divider'];
+    ADoption: typeof import('@arco-design/web-vue')['Doption'];
+    ADrawer: typeof import('@arco-design/web-vue')['Drawer'];
+    ADropdown: typeof import('@arco-design/web-vue')['Dropdown'];
+    AForm: typeof import('@arco-design/web-vue')['Form'];
+    AFormItem: typeof import('@arco-design/web-vue')['FormItem'];
+    AGrid: typeof import('@arco-design/web-vue')['Grid'];
+    AGridItem: typeof import('@arco-design/web-vue')['GridItem'];
+    AInput: typeof import('@arco-design/web-vue')['Input'];
+    AInputNumber: typeof import('@arco-design/web-vue')['InputNumber'];
+    AInputPassword: typeof import('@arco-design/web-vue')['InputPassword'];
+    ALayout: typeof import('@arco-design/web-vue')['Layout'];
+    ALayoutContent: typeof import('@arco-design/web-vue')['LayoutContent'];
+    ALayoutFooter: typeof import('@arco-design/web-vue')['LayoutFooter'];
+    ALayoutSider: typeof import('@arco-design/web-vue')['LayoutSider'];
+    ALink: typeof import('@arco-design/web-vue')['Link'];
+    AList: typeof import('@arco-design/web-vue')['List'];
+    AListItem: typeof import('@arco-design/web-vue')['ListItem'];
+    AListItemMeta: typeof import('@arco-design/web-vue')['ListItemMeta'];
+    AMenu: typeof import('@arco-design/web-vue')['Menu'];
+    AMenuItem: typeof import('@arco-design/web-vue')['MenuItem'];
+    APopover: typeof import('@arco-design/web-vue')['Popover'];
+    ARadio: typeof import('@arco-design/web-vue')['Radio'];
+    ARadioGroup: typeof import('@arco-design/web-vue')['RadioGroup'];
+    AResult: typeof import('@arco-design/web-vue')['Result'];
+    ARow: typeof import('@arco-design/web-vue')['Row'];
+    ASpace: typeof import('@arco-design/web-vue')['Space'];
+    ASpin: typeof import('@arco-design/web-vue')['Spin'];
+    AStatistic: typeof import('@arco-design/web-vue')['Statistic'];
+    ASubMenu: typeof import('@arco-design/web-vue')['SubMenu'];
+    ASwitch: typeof import('@arco-design/web-vue')['Switch'];
+    ATable: typeof import('@arco-design/web-vue')['Table'];
+    ATableColumn: typeof import('@arco-design/web-vue')['TableColumn'];
+    ATabPane: typeof import('@arco-design/web-vue')['TabPane'];
+    ATabs: typeof import('@arco-design/web-vue')['Tabs'];
+    ATag: typeof import('@arco-design/web-vue')['Tag'];
+    ATooltip: typeof import('@arco-design/web-vue')['Tooltip'];
+    ATypographyParagraph: typeof import('@arco-design/web-vue')['TypographyParagraph'];
+    ATypographyText: typeof import('@arco-design/web-vue')['TypographyText'];
+    ATypographyTitle: typeof import('@arco-design/web-vue')['TypographyTitle'];
+    RouterLink: typeof import('vue-router')['RouterLink'];
+    RouterView: typeof import('vue-router')['RouterView'];
+  }
+}
+
+export {};

components.d.ts

@@ -0,0 +1,20 @@
+/* eslint-disable import/no-unresolved */
+/**
+ * If you use the template method for development, you can use the unplugin-vue-components plugin to enable on-demand loading support.
+ * 按需引入
+ * https://github.com/antfu/unplugin-vue-components
+ * https://arco.design/vue/docs/start
+ * Although the Pro project is full of imported components, this plugin will be used by default.
+ * 虽然Pro项目中是全量引入组件，但此插件会默认使用。
+ */
+import Components from 'unplugin-vue-components/vite';
+import { ArcoResolver } from 'unplugin-vue-components/resolvers';
+
+export default function configArcoResolverPlugin() {
+  const arcoResolverPlugin = Components({
+    dirs: [], // Avoid parsing src/components.  避免解析到src/components
+    deep: false,
+    resolvers: [ArcoResolver()],
+  });
+  return arcoResolverPlugin;
+}

config/plugin/arcoResolver.ts

@@ -0,0 +1,34 @@
+/**
+ * Used to package and output gzip. Note that this does not work properly in Vite, the specific reason is still being investigated
+ * gzip压缩
+ * https://github.com/anncwb/vite-plugin-compression
+ */
+import type { Plugin } from 'vite';
+import compressPlugin from 'vite-plugin-compression';
+
+export default function configCompressPlugin(
+  compress: 'gzip' | 'brotli',
+  deleteOriginFile = false
+): Plugin | Plugin[] {
+  const plugins: Plugin[] = [];
+
+  if (compress === 'gzip') {
+    plugins.push(
+      compressPlugin({
+        ext: '.gz',
+        deleteOriginFile,
+      })
+    );
+  }
+
+  if (compress === 'brotli') {
+    plugins.push(
+      compressPlugin({
+        ext: '.br',
+        algorithm: 'brotliCompress',
+        deleteOriginFile,
+      })
+    );
+  }
+  return plugins;
+}

config/plugin/compress.ts

@@ -0,0 +1,37 @@
+/**
+ * Image resource files used to compress the output of the production environment
+ * 图片压缩
+ * https://github.com/anncwb/vite-plugin-imagemin
+ */
+import viteImagemin from 'vite-plugin-imagemin';
+
+export default function configImageminPlugin() {
+  const imageminPlugin = viteImagemin({
+    gifsicle: {
+      optimizationLevel: 7,
+      interlaced: false,
+    },
+    optipng: {
+      optimizationLevel: 7,
+    },
+    mozjpeg: {
+      quality: 20,
+    },
+    pngquant: {
+      quality: [0.8, 0.9],
+      speed: 4,
+    },
+    svgo: {
+      plugins: [
+        {
+          name: 'removeViewBox',
+        },
+        {
+          name: 'removeEmptyAttrs',
+          active: false,
+        },
+      ],
+    },
+  });
+  return imageminPlugin;
+}