feat: init project

.browserslistrc

+chrome >= 122

.editorconfig

+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.env.development

+NODE_ENV=development
+BASE_URL=https://baidu.com

.eslintrc.cjs

+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution');
+
+module.exports = {
+  root: true,
+  extends: [
+    'airbnb-base',
+    'plugin:vue/vue3-recommended',
+    'plugin:vue-scoped-css/vue3-recommended',
+    'plugin:tailwindcss/recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier',
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest',
+  },
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue', 'svg'],
+        moduleDirectory: ['node_modules', 'src/'],
+      },
+      alias: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue', 'svg'],
+        map: [['@', './src']],
+      },
+    },
+  },
+  rules: {
+    'tailwindcss/no-custom-classname': 'off',
+    'import/prefer-default-export': 'off',
+    'no-console': 'off',
+    'no-debugger': 'off',
+    'no-plusplus': 'off',
+    'no-shadow': 'off',
+    '@typescript-eslint/no-shadow': 'error',
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': 'error',
+    'vue-scoped-css/enforce-style-type': ['error', { allows: ['plain'] }],
+    'vue/block-order': [
+      'error',
+      {
+        order: ['template', 'script', 'style'],
+      },
+    ],
+    'vue/block-lang': [
+      'error',
+      {
+        script: {
+          lang: 'ts',
+        },
+      },
+    ],
+  },
+};

.gitignore

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+test-results/
+playwright-report/

.prettierrc.json

+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": true,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "all"
+}

.vscode/extensions.json

+{
+  "recommendations": [
+    "Vue.volar",
+    "Vue.vscode-typescript-vue-plugin",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "stylelint.vscode-stylelint",
+    "EditorConfig.EditorConfig",
+    "bradlc.vscode-tailwindcss"
+  ],
+}

README.md

+# 技术栈
+
+列出一些主要的库或工具
+
+- vue3
+- element plus
+- pinia
+- tailwindcss
+- scss
+- lodash-es
+
+    `element-plus`依赖`lodash-es`，因此引入它不会引入太大的额外的体积，并且其中的工具函数也很常用
+
+- vite
+
+lint工具
+
+- eslint
+- stylelint

auto-imports.d.ts

+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+
+}

components.d.ts

+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    CommonHeader: typeof import('./src/components/CommonHeader.vue')['default']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
+    ElCol: typeof import('element-plus/es')['ElCol']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}

env.d.ts

+/// <reference types="vite/client" />

index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package.json

+{
+  "name": "template",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "test:unit": "vitest",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "format": "prettier --write src/"
+  },
+  "dependencies": {
+    "axios": "^1.6.2",
+    "lodash-es": "^4.17.21",
+    "pinia": "^2.1.7",
+    "vue": "^3.3.8",
+    "vue-router": "^4.2.5"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.5.1",
+    "@tsconfig/node18": "^18.2.2",
+    "@types/jsdom": "^21.1.5",
+    "@types/node": "^20.9.2",
+    "@types/qs": "^6.9.10",
+    "@vitejs/plugin-legacy": "^5.0.0",
+    "@vitejs/plugin-vue": "^4.5.0",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "@vue/eslint-config-prettier": "^8.0.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/test-utils": "^2.4.2",
+    "@vue/tsconfig": "^0.4.0",
+    "autoprefixer": "^10.4.16",
+    "browserslist": "^4.22.1",
+    "element-plus": "^2.4.2",
+    "eslint": "^8.54.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-tailwindcss": "^3.13.0",
+    "eslint-plugin-vue": "^9.18.1",
+    "eslint-plugin-vue-scoped-css": "^2.5.1",
+    "jsdom": "^22.1.0",
+    "npm-run-all2": "^6.1.1",
+    "postcss-preset-env": "^9.3.0",
+    "postcss-scss": "^4.0.9",
+    "prettier": "^3.1.0",
+    "sass": "^1.69.5",
+    "stylelint": "^15.11.0",
+    "stylelint-config-rational-order": "^0.1.2",
+    "stylelint-config-recommended-scss": "^13.1.0",
+    "stylelint-config-recommended-vue": "^1.5.0",
+    "stylelint-config-standard": "^34.0.0",
+    "tailwindcss": "^3.3.5",
+    "typescript": "~5.2.2",
+    "unplugin-auto-import": "^0.16.7",
+    "unplugin-vue-components": "^0.25.2",
+    "vite": "^5.0.0",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-stylelint": "^5.2.1",
+    "vitest": "^0.34.6",
+    "vue-tsc": "^1.8.22"
+  }
+}

postcss.config.cjs

+module.exports = {
+  plugins: {
+    'postcss-preset-env': {},
+    tailwindcss: {},
+  },
+};

public/robots.txt

+User-agent: *
+Allow: /
\ No newline at end of file

src/App.vue

+<template>
+  <RouterView />
+</template>
+
+<script setup lang="ts"></script>

src/assets/styles/base.scss

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+

src/assets/styles/main.scss

+@import './base';

src/components/CommonHeader.vue

+<template>
+  <div>{{ title }}</div>
+  <el-button @click="handleClick">button</el-button>
+</template>
+<script lang="ts" setup>
+defineProps<{
+  title: string;
+}>();
+const handleClick = () => {
+  return 'click';
+};
+defineExpose({
+  handleClick,
+});
+</script>

src/components/__tests__/CommonHeader.spec.ts

+import { describe, it, expect } from 'vitest';
+
+import { mount } from '@vue/test-utils';
+import CommonHeader from '../CommonHeader.vue';
+
+describe('CommonHeader click', () => {
+  it('handleClick', () => {
+    const wrapper = mount<typeof CommonHeader>(CommonHeader, { props: { title: 'test' } });
+    expect(wrapper.vm.handleClick()).eq('click');
+  });
+});

src/composable/useRequest.ts

+import { useAppStore } from '@/stores/app.ts';
+import axios from 'axios';
+import type { RequestUrl } from '@/types/api';
+import type { AxiosRequestConfig } from 'axios';
+
+type RequestInstance = ReturnType<typeof axios.create>;
+
+function getCommonConfig(): AxiosRequestConfig {
+  const { BASE_URL } = import.meta.env;
+  return {
+    baseURL: BASE_URL,
+  };
+}
+
+function addInterceptors(instance: RequestInstance) {
+  instance.interceptors.response.use();
+  return instance;
+}
+
+export function createRequest(config: AxiosRequestConfig = {}) {
+  return addInterceptors(axios.create({ ...getCommonConfig(), ...config }));
+}
+
+const requestInstance = createRequest({
+  ...getCommonConfig(),
+});
+
+/**
+ * http请求
+ */
+export function useRequest<T = any>(url: RequestUrl, config: AxiosRequestConfig, isAuth = true) {
+  const appStore = useAppStore();
+
+  const request = () => {
+    return requestInstance.request<T>({
+      url,
+      headers: {
+        Authorization: isAuth ? appStore.token : '',
+      },
+      ...getCommonConfig(),
+      ...config,
+    });
+  };
+
+  return {
+    request,
+  };
+}

src/main.ts

+import './assets/styles/main.scss';
+
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+
+import App from './App.vue';
+import router from './router/index.ts';
+
+const app = createApp(App);
+
+app.use(createPinia());
+app.use(router);
+
+app.mount('#app');

src/router/index.ts

+import { createRouter, createWebHashHistory } from 'vue-router';
+import HomeView from '../views/HomeView.vue';
+
+const router = createRouter({
+  history: createWebHashHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: HomeView,
+    },
+  ],
+});
+
+export default router;

src/stores/app.ts

+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+/**
+ * 应用信息
+ */
+export const useAppStore = defineStore('user', () => {
+  const token = ref('');
+
+  return {
+    token,
+  };
+});

src/types/api.ts

+/**
+ * 请求地址
+ */
+export enum RequestUrl {
+  login = '/login',
+}

src/views/HomeView.vue

+<template>
+  <el-form :model="form" label-width="120px">
+    <el-form-item label="Activity name" class="w-2 px-4">
+      <el-input v-model="form.name" />
+    </el-form-item>
+    <el-form-item label="Activity zone">
+      <el-select v-model="form.region" placeholder="please select your zone">
+        <el-option label="Zone one" value="shanghai" />
+        <el-option label="Zone two" value="beijing" />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="Activity time">
+      <el-col :span="11">
+        <el-date-picker
+          v-model="form.date1"
+          type="date"
+          placeholder="Pick a date"
+          style="width: 100%"
+        />
+      </el-col>
+      <el-col :span="2" class="text-center">
+        <span class="text-gray-500">-</span>
+      </el-col>
+      <el-col :span="11">
+        <el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
+      </el-col>
+    </el-form-item>
+    <el-form-item label="Instant delivery">
+      <el-switch v-model="form.delivery" />
+    </el-form-item>
+    <el-form-item label="Activity type">
+      <el-checkbox-group v-model="form.type">
+        <el-checkbox label="Online activities" name="type" />
+        <el-checkbox label="Promotion activities" name="type" />
+        <el-checkbox label="Offline activities" name="type" />
+        <el-checkbox label="Simple brand exposure" name="type" />
+      </el-checkbox-group>
+    </el-form-item>
+    <el-form-item label="Resources">
+      <el-radio-group v-model="form.resource">
+        <el-radio label="Sponsor" />
+        <el-radio label="Venue" />
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="Activity form">
+      <el-input v-model="form.desc" type="textarea" />
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="onSubmit">Create</el-button>
+      <el-button>Cancel</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+import { reactive } from 'vue';
+import { cloneDeep } from 'lodash-es';
+
+const form = reactive({
+  name: '',
+  region: '',
+  date1: '',
+  date2: '',
+  delivery: false,
+  type: cloneDeep([]),
+  resource: '',
+  desc: '',
+});
+
+const onSubmit = () => {
+  console.log('submit!');
+};
+</script>
+
+<style lang="scss">
+.test-a {
+  position: absolute;
+  top: 1px;
+  display: flex;
+}
+</style>

stylelint.config.cjs

+module.exports = {
+  extends: [
+    'stylelint-config-standard',
+    'stylelint-config-recommended-scss',
+    'stylelint-config-rational-order',
+    'stylelint-config-recommended-vue',
+  ],
+  rules: {
+    'at-rule-no-unknown': [
+      true,
+      {
+        ignoreAtRules: ['tailwind', 'apply', 'variants', 'responsive', 'screen', 'layer'],
+      },
+    ],
+    'no-descending-specificity': null,
+    'media-feature-range-notation': null,
+    'import-notation': null,
+  },
+};

tailwind.config.cjs

+module.exports = {
+  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+};

tsconfig.app.json

+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "composite": true,
+    "baseUrl": ".",
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

tsconfig.json

+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.vitest.json"
+    }
+  ]
+}

tsconfig.node.json

+{
+  "extends": "@tsconfig/node18/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}

tsconfig.vitest.json

+{
+  "extends": "./tsconfig.app.json",
+  "exclude": [],
+  "compilerOptions": {
+    "composite": true,
+    "lib": [],
+    "types": ["node", "jsdom"]
+  }
+}

vite.config.mts

+/* eslint-disable import/no-extraneous-dependencies */
+import { fileURLToPath, URL } from 'node:url';
+
+import { defineConfig, splitVendorChunkPlugin } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+// @ts-ignore
+import eslint from 'vite-plugin-eslint';
+import stylelint from 'vite-plugin-stylelint';
+import AutoImport from 'unplugin-auto-import/vite';
+import Components from 'unplugin-vue-components/vite';
+import legacy from '@vitejs/plugin-legacy';
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueJsx(),
+    eslint({
+      cache: true,
+    }),
+    stylelint({
+      lintInWorker: true,
+      cache: true,
+      cacheLocation: './node_modules/.vite/.stylelintcache',
+    }),
+    AutoImport({
+      resolvers: [ElementPlusResolver()],
+    }),
+    Components({
+      resolvers: [ElementPlusResolver()],
+    }),
+    legacy(),
+    splitVendorChunkPlugin(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+});

vitest.config.mts

+/* eslint-disable import/no-extraneous-dependencies */
+import { fileURLToPath } from 'node:url';
+import { mergeConfig, defineConfig, configDefaults } from 'vitest/config';
+import viteConfig from './vite.config.mts';
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      environment: 'jsdom',
+      exclude: [...configDefaults.exclude, 'e2e/*'],
+      root: fileURLToPath(new URL('./', import.meta.url)),
+      server: {
+        deps: {
+          inline: ['element-plus'],
+        },
+      },
+    },
+  }),
+);