vue3-vant4-mobile

Stargazers over time

Vue3 Vant4 Mobile Vue3.4``Vite5``Vant4``Pinia``TypeScript``UnoCSS Dark Mode Mock // API <keep-alive> NavBar``TabBar Layout Axios``useECharts``IconSvg

antfu antfu/eslint-config Eslint cz-git lint-staged``simple-git-hooks Git

https://vvmobile.xiangshu233.cn/

admin123456

test123456

• Vite - Vite
• Vue3 - Vue3
• Vant4 - vant4
• Pinia - Pinia
• TypeScript - TypeScript
• Vue-Router-Next - Vue-Router
• ECharts5 - Echarts
• Iconify - IconSvg
• Postcss-Mobile-Forever - px viewport
• Lodash-es - JS
• UnoCSS - CSS UnoCSS
• Mock.js - Mockjs
• ES6+ - ES6

Icon

unocss icon Icon

• <prefix><collection>-<icon>
• <prefix><collection>:<icon>

<!-- A basic anchor icon from Phosphor icons -->
<div class="i-ph-anchor-simple-thin" />
<!-- An orange alarm from Material Design Icons -->
<div class="i:mdi:alarm" />

icon name class

[!WARNING] i-xxx icones icon name i-

https://unocss.dev/presets/icons#icons-preset

PnpmNode.js Git

• pnpm>=8.15.4
• Node.js 20.x ^20.9.0 || >=21.7.1

VS Code

IDE VS Code

• UnoCSS - UnoCSS
• Volar - Vue
• TypeScript Vue Plugin (Volar) - TypeScript Vue
• ESLint -
• DotENV - .env
• Error Lens -
• EditorConfig for VS Code - IDE
• File Nesting Updater - VS Code
• Pretty TypeScript Errors - VSCode TypeScript
• Todo Tree - TODOFIXME
• Trailing Spaces -

VS Code Eslint

VS Code ESLint extension

.vscode/settings.json

{
  // Enable the ESlint flat config support
  "eslint.experimental.useFlatConfig": true,

  // Disable the default formatter, use eslint instead
  "prettier.enable": false,
  "editor.formatOnSave": false,

  // Auto fix
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },

  // Silent the stylistic rules in you IDE, but still auto fix them
  "eslint.rules.customizations": [
    { "rule": "style/*", "severity": "off" },
    { "rule": "format/*", "severity": "off" },
    { "rule": "*-indent", "severity": "off" },
    { "rule": "*-spacing", "severity": "off" },
    { "rule": "*-spaces", "severity": "off" },
    { "rule": "*-order", "severity": "off" },
    { "rule": "*-dangle", "severity": "off" },
    { "rule": "*-newline", "severity": "off" },
    { "rule": "*quotes", "severity": "off" },
    { "rule": "*semi", "severity": "off" }
  ],

  // Enable eslint for all supported languages
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html",
    "markdown",
    "json",
    "jsonc",
    "yaml",
    "toml"
  ]
}

# 
git clone https://github.com/xiangshu233/vue3-vant4-mobile.git

# 
cd vue3-vant4-mobile
pnpm install

# 
pnpm dev

# 
pnpm build

Git

vue (Angular)

• feat
• fix /BUG
• style
• perf /
• refactor
• revert
• test
• docs /
• chore /
• workflow
• ci
• types
• wip

[!TIP]

---

()

() commitlint + commitizen + cz-git +

[!IMPORTANT] clone pnpm install git hooks

# Update ./git/hooks
npx simple-git-hooks

simple-git-hooks git hooks cz-git commitlint commitizen

[!IMPORTANT]

# Global install commitizen CLI
npm install -g commitizen

commitizen Commitlint git add cz cz-git CLI git commit Git Hook

simple-git-hooks husky Git Git hooks

simple-git-hooks:

• : simple-git-hooks Git
• :
  • Gi
  • Git
  • : Git

husky:

• : husky Git
• :
  • Git
  • Git
  • linters
  • : Git

// package.json
{
  "simple-git-hooks": {
    //  eslint --fix
    "pre-commit": "pnpm lint-staged",
    // 
    "commit-msg": "npx --no-install commitlint --edit $1"
  },

  "lint-staged": {
    "*": "eslint --fix"
  }
}

Chrome 80+

, IE

IE	Edge	Firefox	Chrome	Safari
not support	last 2 versions	last 2 versions	last 2 versions	last 2 versions

@xiangshu233

LICENSE

MIT