Awesome
D2 Advance
Advanced, colorful front-end integration practice. be inspired by D2Admin π§
Preview π https://d2.pub/d2-advance/preview
Public Repositories: Github | η δΊ (mirror)
Goal
- Less is more
- Dark mode π
- Responsive π» π±
- Lightweight and faster β‘οΈ
Integration
- β‘οΈ 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
Demo
- Admin
src/views/admin
: An elegant dashboard (IN PROGRESS) - Space
src/views/space
: An personal workspace (IN PROGRESS) - ...more. welcome to your issues
Getting Started
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
Custom env variables
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
Customize configuration
See Vite Configuration Reference.
License
MIT Β© CNine