# npm

vitejs -> router -> UI(ant-design-vue) -> store -> locales

# @vitejs/plugin-vue-jsx

Provides Vue 3 JSX & TSX support with HMR.

build\vite\plugin\index.ts
export function createVitePlugins vueJsx()

vite.config.ts

  plugins: createVitePlugins(viteEnv, isBuild),

# vue-types

Prop type definitions for Vue.js.

src\utils\propTypes.ts

# vue-router

yarn add vue-router@next

yarn.lock

ant-design-vue@^2.2.2:
  dependencies:
    lodash "^4.17.21"
    lodash-es "^4.17.15"
    moment "^2.27.0"
    omit.js "^2.0.0"

# ant-design-vue

yarn add ant-design-vue@next

# pinia

Intuitive, type safe and flexible Store for Vue Pinia Dev

src\store\modules\app.ts

yarn add pinia@next

main.ts

import { setupStore } from '/@/store';
async function bootstrap() {
  // Configure store
  setupStore(app);
}

src\store\index.ts

import type { App } from 'vue';
import { createPinia } from 'pinia';

const store = createPinia();

export function setupStore(app: App<Element>) {
  app.use(store);
}

export { store };

src\AppProvider.vue (For App.vue)

import { useAppStore } from '/@/store/modules/app';
export default defineComponent({
    setup(props, { slots }) {
        const appStore = useAppStore();

src\store\modules\app.ts

import { defineStore } from 'pinia';

export const useAppStore = defineStore({
  id: 'app',
});

# @vueuse/core

https://github.com/JacobHsu/vueuse-docs

useTitle
src\hooks\web\useTitle.ts

# lodash-es

The Lodash library exported as ES modules. Lodash TS版
隨 ant-design-vue 安裝 但type檢查要另外安裝 @types/lodash-es
ES Modules 是用于处理模块的 ECMAScript 标准。

src\utils\cache\persistent.ts

src\store\modules\app.ts

import { Persistent } from '/@/utils/cache/persistent';
 projectConfig: Persistent.getLocal(PROJ_CFG_KEY),

lodash

src\components\Dropdown\src\Dropdown.vue

import { omit } from 'lodash-es';  // Could not find a declaration file for module 'lodash-es'

yarn add @types/lodash-es -D

# @types/node

This package contains type definitions for Node.js

vite.config.ts

resolve(process.cwd(), '.', dir);

Uncaught ReferenceError: COLOR_PLUGIN_OUTPUT_FILE_NAME is not defined

src\logics\theme\dark.ts

import { darkCssIsReady, loadDarkThemeCss } from 'vite-plugin-theme/es/client';

tsconfig.json

  "compilerOptions": {
    ...
    "typeRoots": ["./node_modules/@types/", "./types"],

# crypto-js

JavaScript library of crypto standards.

src\utils\cipher.ts

src\utils\cache\storageCache.ts

import type { EncryptionParams } from '/@/utils/cipher';
import { AesEncryption } from '/@/utils/cipher';

yarn add crypto-js
yarn add @types/crypto-js -D

# vue-i18n

Cannot find module 'vue-i18n' or its corresponding type declarations.

yarn add vue-i18n@next

vite.config.ts

  return {
    base: VITE_PUBLIC_PATH,
    root,
    resolve: {
      alias: [
        {
          find: 'vue-i18n',
          replacement: 'vue-i18n/dist/vue-i18n.cjs.js',
        },

# commitizen

yarn add commitizen -D

commitizen@^4.0.3, commitizen@^4.2.4: dependencies: inquirer "6.5.2"

inquirer

A collection of common interactive command line user interfaces.

# @iconify/iconify

vite.config.ts

    // The vite plugin used by the project. The quantity is large, so it is separately extracted and managed
    plugins: createVitePlugins(viteEnv, isBuild),

    optimizeDeps: {
      // @iconify/iconify: The dependency is dynamically and virtually loaded by @purge-icons/generated, so it needs to be specified explicitly
      include: [
        '@iconify/iconify',
        'ant-design-vue/es/locale/zh_CN',
        'moment/dist/locale/zh-cn',
        'ant-design-vue/es/locale/en_US',
        'moment/dist/locale/eu',
      ],
      exclude: ['vue-demi', 'consolidate'],
    },

@purge-icons/generated

yarn add @purge-icons/generated -D

src\components\Icon\src\Icon.vue

import Iconify from '@purge-icons/generated';

# axios

src\utils\http\axios\index.ts import type { AxiosResponse } from 'axios';

# http-server

http-server is a simple, zero-configuration command-line http server.

yarn add http-server

http-server@^0.12.3: dependencies: union "~0.5.0"

union@~0.5.0: dependencies: qs "^6.4.0"

qs

A querystring parsing and stringifying library with some added security.

"devDependencies": { "@types/qs": "^6.9.7",

yarn add @types/qs -D

# resize-observer-polyfill

A polyfill for the Resize Observer API.

yarn add resize-observer-polyfill

utils\event\index.ts

import ResizeObserver from 'resize-observer-polyfill';

# zxcvbn-ts

zxcvbn is a password strength estimator inspired by password crackers.

yarn add @zxcvbn-ts/core

src\components\StrengthMeter\src\StrengthMeter.vue

import { zxcvbn } from '@zxcvbn-ts/core';

# qrcode

QR code/2d barcode generator.

yarn add qrcodeyarn add @types/qrcode -D

src\components\Qrcode\src\Qrcode.vue

import { toDataURL } from 'qrcode';

# nprogress

Slim progress bars

yarn add nprogress

src\router\guard\index.ts

# tailwindcss

yarn add tailwindcss postcss -D

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

src\main.ts

import '/@/design/tailwind.css';

src\design\tailwind.css

/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;

autoprefixer

PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use.

yarn add autoprefixer -D

# path-to-regexp

https://www.npmjs.com/package/path-to-regexp

yarn add path-to-regexp

src\router\menus\index.ts