Advanced, colorful front-end integration practice. be inspired by D2Admin 🧗

Preview 👉 https://d2.pub/d2-advance/preview

Public Repositories: Github | 码云 (mirror)

• Less is more
• Dark mode 🌛
• Responsive 💻 📱
• Lightweight and faster ⚡️

• ⚡️ Vite, be faster than webpack.
• 🖖 Vue3 ecosystem: vue、vue-router、vuex
• Tailwind CSS class utils: Windi CSS
• Typescript support: volar、vue-tsc
• IconPark resource with @icon-park/vue-next
• HTTP local mock: miragejs
• HTTP request: axios
• ESLint extends prettier and vue config
• Git commit prompted: commitizen/cz-cli
• Lint git commit message: commitlint
• Lint git staged files: lint-staged
• Git custom hooks: husky
• Jest for unit test with @testing-library/vue (TODO)
• New version and changelog generation: standard-version
• Build with gzip and brotli output: vite-plugin-compression
• Visualize bundle: rollup-plugin-visualizer

• Admin src/views/admin: An elegant dashboard (IN PROGRESS)
• Space src/views/space: An personal workspace (IN PROGRESS)
• ...more. welcome to your issues

Requirements

• Git
• NodeJS 12+
• VSCode (optional, recommended)

# setup
yarn install

# start dev server
yarn serve

# production build
yarn build

# build with `report.html`
yarn build:report

# locally preview production build
yarn preview

# check and auto fix code by eslint
yarn lint
yarn lint --fix

# check type
yarn type

# git commit by commitizen
yarn commit

# take a release commit by standard-version
yarn release

# unit test by jest
yarn test:unit

type in global.d.ts:

// ...
interface CustomEnvVariables {
  VITE_BASE_URL: string;
  VITE_HTTP_MOCK?: 'on' | 'off'; // is build with mock
  VITE_SOURCE_MAP?: 'on' | 'off'; // is output .map
  VITE_GZIP?: 'on' | 'off'; // is output .gz
  VITE_BROTLI?: 'on' | 'off'; // is output .br

  VITE_API_BASE_URL: string;
  // ... more here and start with 'VITE_'
}

default values in .env:

VITE_BASE_URL=./
VITE_HTTP_MOCK=on
VITE_SOURCE_MAP=off
VITE_GZIP=on
VITE_BROTLI=on

VITE_API_BASE_URL=/api

See Vite Configuration Reference.

MIT © CNine