仲灏小栈
仲灏
2022-10-13
目录

vue项目实例演示

# vue2

  • npm init

    • ➜  vue-template git:(vue2-tpl) ✗ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (vue-template) 
version: (1.0.0) 
description: vue2 template
entry point: (index.js) 
test command: 
git repository: (https://github.com/izhaong/vue-template.git) 
keywords: vue2 template tpl
author: izhaong
license: (ISC) 
About to write to /Users/izhaong/izhaong/Project_me/vue-template/package.json:

{
  "name": "vue-template",
  "version": "1.0.0",
  "description": "vue2 template",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/izhaong/vue-template.git"
  },
  "keywords": [
    "vue2",
    "template",
    "tpl"
  ],
  "author": "izhaong",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/izhaong/vue-template/issues"
  },
  "homepage": "https://github.com/izhaong/vue-template#readme"
}


Is this OK? (yes)
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49

    • npm init @eslint/config

      • ➜  vue-template git:(vue2-tpl) ✗ npm init @eslint/config
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · vue
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JavaScript
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest eslint@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · yarn
Installing eslint-plugin-vue@latest, eslint@latest
yarn add v1.22.19
info No lockfile found.
...
✨  Done in 1.97s.
A config file was generated, but the config file itself may not follow your linting rules.
Successfully created .eslintrc.js file in /Users/izhaong/izhaong/Project_me/vue-template
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
  • vue-template
├─.eslintrc.js
├─package.json
└yarn.lock
    1
    2
    3
    4

  • 修改.eslintrc.js

    •     "env": {
        "node": true
    },
		"extends": [
        "eslint:recommended",
        "plugin:vue/recommended"
    ],
      1
      2
      3
      4
      5
      6
      7
      • "plugin:vue/essential" ... base, 加上防止错误或意外行为的规则。
      • "plugin:vue/strongly-recommended" ... 以上，加上规则，大大提高了代码的可读性和/或开发体验。
      • "plugin:vue/recommended" ...以上，加上执行主观社区默认值的规则，以确保一致性。

  • 添加.eslintignore

    • public
dist
node_modules
build

src/assets
src/static
      1
      2
      3
      4
      5
      6
      7

  • 编辑.vscode/setting.json 对eslint做配置

    • {
  "vetur.validation.template": false,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ]
}
      1
      2
      3
      4
      5
      6
      7
      8

    • 最后加上脚本

      •   "scripts": {
    "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
    "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx,.vue --format=pretty ./src ",
  }
        1
        2
        3
        4

  • 安装prettier

    • yarn add --dev --exact prettier

    • ➜  vue-template git:(vue2-tpl) ✗ yarn add --dev --exact prettier
yarn add v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ prettier@2.7.1
info All dependencies
└─ prettier@2.7.1
✨  Done in 0.68s.
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14

    • echo {}> prettier.config.js

      • module.exports = {
  printWidth: 180,
  semi: true,
  vueIndentScriptAndStyle: true,
  singleQuote: true,
  trailingComma: 'all',
  proseWrap: 'never',
  htmlWhitespaceSensitivity: 'strict',
  endOfLine: 'auto',
};
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11

    • 添加.pretterignore

      • # Ignore artifacts:
build
coverage
        1
        2
        3

  • 处理eslint和prettier冲突问题

    • yarn add eslint-config-prettier -D

    • .eslintrc.js

      •     "extends": [
        "eslint:recommended",
        "plugin:vue/recommended",
        "prettier"
    ],
        1
        2
        3
        4
        5

    • 加上script

      •   "scripts": {
    "lint:prettier": "prettier -c --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\" --end-of-line auto"
  }
        1
        2
        3

  • 添加stylelint

    • yarn add stylelint stylelint-config-standard -D

    • 添加.stylelintignore

      • /dist/*
/public/*
public/*
        1
        2
        3

    • 添加vue style 配置

      • yarn add postcss-html stylelint-config-recommended-vue -D

    • 添加stylelint.config.js

      • /*
 * @Author: 仲灏<izhaong@outlook.com>🌶🌶🌶
 * @Date: 2022-10-14 13:55:22
 * @LastEditTime: 2022-10-14 14:31:15
 * @LastEditors: 仲灏<izhaong@outlook.com>🌶🌶🌶
 * @Description:
 * @FilePath: /vue-template/stylelint.config.js
 */
module.exports = {
  extends: ["stylelint-config-standard", "stylelint-config-prettier"],
  overrides: [
    {
      files: ["*.vue", "**/*.vue"],
      extends: ["stylelint-config-recommended-vue"],
      rules: {
        "unit-allowed-list": ["em", "rem", "s"],
        "selector-pseudo-class-no-unknown": [
          true,
          {
            ignorePseudoClasses: ["deep", "global"],
          },
        ],
        "selector-pseudo-element-no-unknown": [
          true,
          {
            ignorePseudoElements: ["v-deep", "v-global", "v-slotted"],
          },
        ],
      },
    },
  ],
  rules: {
    "selector-class-pattern": null,
    "selector-pseudo-class-no-unknown": [
      true,
      {
        ignorePseudoClasses: ["global"],
      },
    ],
    "selector-pseudo-element-no-unknown": [
      true,
      {
        ignorePseudoElements: ["v-deep"],
      },
    ],
    "at-rule-no-unknown": [
      true,
      {
        ignoreAtRules: [
          "tailwind",
          "apply",
          "variants",
          "responsive",
          "screen",
          "function",
          "if",
          "each",
          "include",
          "mixin",
        ],
      },
    ],
    "no-empty-source": null,
    "named-grid-areas-no-invalid": null,
    "unicode-bom": "never",
    "no-descending-specificity": null,
    "font-family-no-missing-generic-family-keyword": null,
    "declaration-colon-space-after": "always-single-line",
    "declaration-colon-space-before": "never",
    // 'declaration-block-trailing-semicolon': 'always',
    "rule-empty-line-before": [
      "always",
      {
        ignore: ["after-comment", "first-nested"],
      },
    ],
    "unit-no-unknown": [true, { ignoreUnits: ["rpx"] }],
    "order/order": [
      [
        "dollar-variables",
        "custom-properties",
        "at-rules",
        "declarations",
        {
          type: "at-rule",
          name: "supports",
        },
        {
          type: "at-rule",
          name: "media",
        },
        "rules",
      ],
      { severity: "warning" },
    ],
  },
  ignoreFiles: ["**/*.js", "**/*.jsx", "**/*.tsx", "**/*.ts"],
};
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        28
        29
        30
        31
        32
        33
        34
        35
        36
        37
        38
        39
        40
        41
        42
        43
        44
        45
        46
        47
        48
        49
        50
        51
        52
        53
        54
        55
        56
        57
        58
        59
        60
        61
        62
        63
        64
        65
        66
        67
        68
        69
        70
        71
        72
        73
        74
        75
        76
        77
        78
        79
        80
        81
        82
        83
        84
        85
        86
        87
        88
        89
        90
        91
        92
        93
        94
        95
        96
        97
        98
        99

  • Git hooks

    • 安装husky (opens new window) and lint-staged (opens new window):

      • yarn add --dev husky lint-staged
npx husky install
npm set-script prepare "husky install"
npx husky add .husky/pre-commit "npx lint-staged"
        1
        2
        3
        4

    • 配置 package.json

      •   "lint-staged": {
    "*.{js,ts,vue}": "eslint --fix",
    "*.{json,yml,css,scss}": "prettier --write"
  }
        1
        2
        3
        4

    • commit msg 校验

      • yarn add cz-git @commitlint/cli @commitlint/config-conventional -D

      • 配置package.json

        •   "config": {
    "commitizen": {
      "path": "node_modules/cz-git",
			"useEmoji": true
    }
  }
          1
          2
          3
          4
          5
          6

      • 增加自定义配置文件 commitment.config.js

        • const fs = require('fs')
const path = require('path')
const { execSync } = require('child_process')

const scopes = fs
  .readdirSync(path.resolve(__dirname, 'src'), { withFileTypes: true })
  .filter((dirent) => dirent.isDirectory())
  .map((dirent) => dirent.name.replace(/s$/, ''))

// precomputed scope
const scopeComplete = execSync('git status --porcelain || true')
  .toString()
  .trim()
  .split('\n')
  .find((r) => ~r.indexOf('M  src'))
  ?.replace(/(\/)/g, '%%')
  ?.match(/src%%((\w|-)*)/)?.[1]
  ?.replace(/s$/, '')

/** @type {import('cz-git').UserConfig} */
module.exports = {
  ignores: [(commit) => commit.includes('init')],
  extends: ['@commitlint/config-conventional'],
  rules: {
    'body-leading-blank': [2, 'always'],
    'footer-leading-blank': [1, 'always'],
    'header-max-length': [2, 'always', 108],
    'subject-empty': [2, 'never'],
    'type-empty': [2, 'never'],
    'subject-case': [0],
    'type-enum': [2, 'always', ['feat', 'fix', 'perf', 'style', 'docs', 'test', 'refactor', 'build', 'ci', 'chore', 'revert', 'wip', 'workflow', 'types', 'release']]
  },
  prompt: {
    /** @use `yarn commit :f` */
    alias: {
      f: 'docs: fix typos',
      r: 'docs: update README',
      s: 'style: update code format',
      b: 'build: bump dependencies',
      c: 'chore: update config'
    },
    customScopesAlign: !scopeComplete ? 'top' : 'bottom',
    defaultScope: scopeComplete,
    scopes: [...scopes, 'mock'],
    allowEmptyIssuePrefixs: false,
    allowCustomIssuePrefixs: false,

    // English
    typesAppend: [
      { value: 'wip', name: 'wip:      work in process' },
      { value: 'workflow', name: 'workflow: workflow improvements' },
      { value: 'types', name: 'types:    type definition file changes' }
    ],

    // 中英文对照版
    messages: {
      type: '选择你要提交的类型 :',
      scope: '选择一个提交范围 (可选):',
      customScope: '请输入自定义的提交范围 :',
      subject: '填写简短精炼的变更描述 :\n',
      body: '填写更加详细的变更描述 (可选)。使用 "|" 换行 :\n',
      breaking: '列举非兼容性重大的变更 (可选)。使用 "|" 换行 :\n',
      footerPrefixsSelect: '选择关联issue前缀 (可选):',
      customFooterPrefixs: '输入自定义issue前缀 :',
      footer: '列举关联issue (可选) 例如: #31, #I3244 :\n',
      confirmCommit: '是否提交或修改commit ?'
    },
    types: [
      { value: 'feat', name: 'feat:     新增功能' },
      { value: 'fix', name: 'fix:      修复缺陷' },
      { value: 'docs', name: 'docs:     文档变更' },
      { value: 'style', name: 'style:    代码格式' },
      { value: 'refactor', name: 'refactor: 代码重构' },
      { value: 'perf', name: 'perf:     性能优化' },
      { value: 'test', name: 'test:     添加疏漏测试或已有测试改动' },
      { value: 'build', name: 'build:    构建流程、外部依赖变更 (如升级 npm 包、修改打包配置等)' },
      { value: 'ci', name: 'ci:       修改 CI 配置、脚本' },
      { value: 'revert', name: 'revert:   回滚 commit' },
      { value: 'chore', name: 'chore:    对构建过程或辅助工具和库的更改 (不影响源文件、测试用例)' },
      { value: 'wip', name: 'wip:      正在开发中' },
      { value: 'workflow', name: 'workflow: 工作流程改进' },
      { value: 'types', name: 'types:    类型定义文件修改' }
    ],
    emptyScopesAlias: 'empty:      不填写',
    customScopesAlias: 'custom:     自定义'
  }
}
          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          15
          16
          17
          18
          19
          20
          21
          22
          23
          24
          25
          26
          27
          28
          29
          30
          31
          32
          33
          34
          35
          36
          37
          38
          39
          40
          41
          42
          43
          44
          45
          46
          47
          48
          49
          50
          51
          52
          53
          54
          55
          56
          57
          58
          59
          60
          61
          62
          63
          64
          65
          66
          67
          68
          69
          70
          71
          72
          73
          74
          75
          76
          77
          78
          79
          80
          81
          82
          83
          84
          85
          86
          87
          88

        • 加上git husky

          • yarn add -D czg

          • 加上script

            • "scripts": {
   "commit": "czg"
}
              1
              2
              3

      • 增加 conventional-changelog-cli脚本自动生成changelog

        • yarn add conventional-changelog-cli -D

        • 添加脚本

          • "scripts": {
      "log": "conventional-changelog -p angular -i CHANGELOG.md -s"
}
            1
            2
            3

    • 最后package.json 可能有点乱了， 使用 sort-package-json整理下

      • yarn add sort-package-json -D
      • npx sort-package-json
上次更新: 2022/10/26, 16:57:52
jest测试

←

最近更新
01
vim日常使用记录
04-02
02
滑动窗口最大值
04-02
03
有效的字母异位词
04-02
更多文章>
Theme by Vdoing | Copyright © 2021-2025 izhaong | github | 蜀ICP备2021031194号