Nuxt实战(1)-项目初始化与配置

pnpm add -D eslint @nuxt/eslint-config

module.exports = {
  root: true,
  env: {
    browser: true, // 支持浏览器环境的检测
    es2021: true,  // 支持 ES2021 语法的检测
    node: true     // 支持 Node 环境的检测
  },
  extends: ['@nuxt/eslint-config'],
  overrides: [],
  parserOptions: {
    ecmaVersion: 'latest', // 使用最新的 ECMAScript 版本
    sourceType: 'module'   // 文件是 ES6 模块规范
  },
  plugins: ['vue'],
  rules: {
    'camelcase': 2,                    // 驼峰命名
    'indent': [2, 2],                  // 缩进 2 个空格
    'semi': [2, 'never'],              // 禁用行尾分号
    'quotes': ['error', 'single'],     // 强制使用单引号
    'no-debugger': 2,                  // 不能使用 debugger
    'no-empty': 2,                     // 块语句中的内容不能为空
    'no-extra-parens': 2,              // 禁止非必要的括号
    'no-extra-semi': 2,                // 禁止多余的分号
    'comma-dangle': [2, 'never'],      // 键值对最后一个不能有逗号
    'spaced-comment': ['error', 'always'] // 注释必须有空格
  }
}

{
  "editor.codeActionsOnSave": {
    "source.fixAll": false,
    "source.fixAll.eslint": true
  }
}

pnpm add stylelint @nuxtjs/stylelint-module stylelint-config-standard stylelint-order stylelint-config-recommended-vue -D

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/stylelint-module'
  ]
})

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-recommended-vue' // 确保放在最后
  ],
  plugins: ['stylelint-order'],
  rules: {
    'color-hex-case': 'upper',           // 颜色指定大写
    'block-no-empty': true,              // 禁止空块
    'color-hex-length': 'long',          // 颜色 6 位长度
    'selector-type-no-unknown': [true, {
      ignoreTypes: []
    }],
    'selector-pseudo-element-no-unknown': [true, {
      ignorePseudoElements: ['v-deep']
    }],
    'no-descending-specificity': null,
    'at-rule-no-unknown': null,
    'comment-no-empty': true,
    'shorthand-property-no-redundant-values': true,
    'value-no-vendor-prefix': true,
    'property-no-vendor-prefix': true,
    'number-leading-zero': 'never',
    'no-empty-first-line': true,
    // CSS 属性排序
    'order/properties-order': [
      'position', 'top', 'right', 'bottom', 'left', 'z-index',
      'display', 'justify-content', 'align-items',
      'float', 'clear', 'overflow', 'overflow-x', 'overflow-y',
      'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
      'border', 'border-style', 'border-width', 'border-color',
      'border-radius', 'padding', 'padding-top', 'padding-right',
      'padding-bottom', 'padding-left', 'width', 'min-width', 'max-width',
      'height', 'min-height', 'max-height', 'font-size', 'font-family',
      'font-weight', 'text-align', 'text-justify', 'text-indent',
      'text-overflow', 'text-decoration', 'white-space', 'color',
      'background', 'background-position', 'background-repeat',
      'background-size', 'background-color', 'background-clip',
      'opacity', 'filter', 'list-style', 'outline', 'visibility',
      'box-shadow', 'text-shadow', 'resize', 'transition'
    ]
  }
}

{
  "scripts": {
    "lint:style": "stylelint src/**/*.{css,less,vue} --fix"
  }
}

pnpm add husky -D

pnpm exec husky init

pnpm add lint-staged -D

{
  "scripts": {
    "pre-commit": "lint-staged"
  }
}

{
  "lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}

npm run pre-commit

pnpm add @commitlint/config-conventional @commitlint/cli -D

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [2, 'always', [
      'build',    // 编译相关的修改
      'feat',     // 新功能
      'fix',      // 修补 bug
      'docs',     // 文档修改
      'style',    // 代码格式修改
      'refactor', // 重构
      'perf',     // 性能优化
      'test',     // 测试用例修改
      'revert',   // 代码回滚
      'ci',       // 持续集成修改
      'config',   // 配置修改
      'chore'     // 其他改动
    ]],
    'type-empty': [2, 'never'],        // type 不能为空
    'type-case': [0, 'always', 'lower-case'],
    'scope-empty': [0],
    'scope-case': [0],
    'subject-empty': [2, 'never'],     // subject 不能为空
    'subject-case': [0],
    'subject-full-stop': [0, 'never', '.'],
    'header-max-length': [2, 'always', 72], // header 最长 72 字符
    'body-leading-blank': [0],
    'footer-leading-blank': [0, 'always']
  }
}

{
  "scripts": {
    "commitlint": "commitlint --config commitlint.config.cjs -e -V"
  }
}

npx husky add .husky/commit-msg

npm run commitlint

pnpm add release-it @release-it/conventional-changelog -D

{
  "plugins": {
    "@release-it/conventional-changelog": {
      "preset": {
        "name": "conventionalcommits",
        "types": [
          { "type": "feat", "section": "✨ Features | 新功能" },
          { "type": "fix", "section": "🐛 Bug Fixes | Bug 修复" },
          { "type": "chore", "section": "🔧 Chores | 其他更新" },
          { "type": "docs", "section": "📚 Documentation | 文档" },
          { "type": "style", "section": "💄 Styles | 风格" },
          { "type": "refactor", "section": "♻️ Code Refactoring | 代码重构" },
          { "type": "perf", "section": "⚡ Performance Improvements | 性能优化" },
          { "type": "test", "section": "✅ Tests | 测试" },
          { "type": "revert", "section": "⏪ Reverts | 回退" },
          { "type": "build", "section": "🏗️ Build System | 构建" },
          { "type": "ci", "section": "👷 Continuous Integration | CI 配置" },
          { "type": "config", "section": "🔧 CONFIG | 配置" }
        ]
      },
      "infile": "CHANGELOG.md",
      "ignoreRecommendedBump": true,
      "strictSemVer": true
    }
  },
  "git": {
    "commitMessage": "chore: Release v${version}"
  },
  "github": {
    "release": true,
    "draft": false
  }
}

{
  "scripts": {
    "release": "release-it"
  }
}

pnpm add @nuxt/ui

export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})

<template>
  <div class="w-screen h-screen flex justify-around items-center">
    <UButton>Button</UButton>
    <UBreadcrumb :links="links" />
    <Icon
      name="uil:github"
      size="48"
    />
  </div>
</template>
 
<script setup lang="ts">
const links = [
  {
    label: '首页',
    icon: 'i-heroicons-home'
  },
  {
    label: '导航',
    icon: 'i-heroicons-nav'
  }
]
</script>

pnpm add @iconify-json/heroicons

pnpm add -D vue-tsc@^1 typescript

export default defineNuxtConfig({
  // 构建时启动类型检查
  typescript: {
    typeCheck: true
  }
})