# 规范

# 目录结构

# 组件库

  1. 当编写组件库时，推荐使用lerna管理项目，拆分各个组件为单独的目录

    -- button
	-- index.js // 入口文件
	-- style // 样式目录，用于按需加载时通过`babel-import-plugin`自动引入

# 运行时

# 数学

  1. Big.js

# 时间

  1. day.js

# UI

# 框架

  1. vue3使用element plus、vant。Naive UI也是一个不错的选择

# element-plus

element-plus对自定义属性支持不友好

# 图标

# xicons (opens new window)

包含 vicons（vue3），ricons（react），sicons（svg）和 v2icons(vue2)。

整合自 fluentui-system-icons (opens new window)、ionicons (opens new window)、ant-design-icons (opens new window)、material-design-icons (opens new window)、Font-Awesome (opens new window) tabler-icons (opens new window) 和 carbon (opens new window) 的 SVG Vue/React 组件。

同时 xicons 提供了一些图标工具组件来自定义图标的颜色和尺寸。

# 自适应

  1. postcss-px-to-viewport (opens new window)

# DX

# ngrok

本地网页部署到公网，提供快速查看的能力

# Vue

# utils库

  1. Vueuse

# 目标

  1. vue 代码中 template、script 代码按照 eslint 规范提示报错，style 部分由 stylelint 提示报错
  2. 格式化时自动修复（默认按键 shift+alt+f）
  3. 支持提交代码时进行校验，如果有报错不能通过提交

# 安装 vscode 插件

  • vetur（vue 代码格式化）
  • eslint（js 代码检查）
  • prettier（代码格式化）
  • stylelint（css/less/scss 校验）

eslint 和 prettier 有重叠部分，eslint 更侧重于代码质量，prettier 更侧重与代码格式

# vscode 工作空间设置

文件->首选项->设置->工作区设置->点击右上角的花括号图标,覆盖设置

{
   "vetur.format.defaultFormatter.html": "none",
    "vetur.format.defaultFormatter.css": "none",
    "vetur.format.defaultFormatter.js": "none",
    "vetur.format.defaultFormatter.less": "none",
    "vetur.format.defaultFormatter.postcss": "none",
    "vetur.format.defaultFormatter.scss": "none",
    "vetur.format.defaultFormatter.stylus": "none",
    "vetur.format.defaultFormatter.ts": "none",
    "vetur.validation.template": false,
    "vetur.validation.style": false,
    "eslint.autoFixOnSave": true, // 取消保存时自动修复
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      {
        "language": "vue",
        "autoFix": true
      }
    ],
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "scss.validate": false,
    "prettier.disableLanguages": [],
    "prettier.eslintIntegration": true,
    "prettier.printWidth": 120,
    "prettier.singleQuote": true,
    "prettier.semi": false
}

Tips: 格式化按键默认是shift+alt+f,如果格式化不能自动修复错误，查看一下是否按键被占用。文件>首选项>键盘快捷方式>搜索 shift alt f,删除格式化文档之外的按键绑定

# 创建项目

  • vue create projectname

  • 选择 Manually select features

  • 用空格勾选 Babel、CSS Pre-processors、Linter/Formatter,回车

  • Sass/SCSS

  • ESLint with error prevention only

  • Lint on save

  • In dedicated config files

  • 选择是否以此配置当作以后的默认设置，选 N

    tips: 需要 vue-cli3,编写此文档时 vue-cli 版本 3.3.0

# 安装 npm 依赖包

npm install --save-dev eslint eslint-config-prettier eslint-config-standard eslint-plugin-vue eslint-plugin-import eslint-plugin-node eslint-plugin-prettier eslint-plugin-promise eslint-plugin-standard husky lint-staged prettier stylelint stylelint-config-recommended-scss stylelint-scss

  1. 安装完毕后，package.json 文件应该如下所示

    如果安装后不能正常进行格式化和校验，请对应此 package.json 查看是否缺少包或者包版本过低导致

{
  "name": "lint",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint --no-fix",
    "lint:fix": "vue-cli-service lint"
  },
  "gitHooks": {
    // @vue/cli-service自动安装yorkie(fork自husky)
    "pre-commit": "lint-staged" // 配置提交前校验
  },
  "lint-staged": {
    "*.{js,vue}": "eslint",
    "*.{html,vue,css,sass,scss}": "stylelint"
  },
  "dependencies": {
    "vue": "^2.5.21"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.3.0",
    "@vue/cli-plugin-eslint": "^3.3.0",
    "@vue/cli-service": "^3.3.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.12.0",
    "eslint-config-prettier": "^3.5.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-node": "^8.0.1",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^5.0.0-beta.6",
    "lint-staged": "^8.1.0",
    "node-sass": "^4.9.0",
    "prettier": "^1.15.3",
    "sass-loader": "^7.0.1",
    "stylelint": "^9.10.0",
    "stylelint-config-recommended-scss": "^3.2.0",
    "stylelint-scss": "^3.5.1",
    "vue-template-compiler": "^2.5.21"
  }
}
  1. 如果不是使用 vue-cli3 创建的项目需要额外在 package.json 中配置：
  "husky": {
  "hooks": {
  "pre-commit": "lint-staged"
  }
  },

并去掉 package.json 中的 gitHooks

# .eslintrc.js

项目根目录创建.eslintrc.js文件:

module.exports = {
  root: true, // 此项是用来告诉eslint找当前配置文件不能往父级查找
  extends: [
    "standard",
    "plugin:vue/recommended",
    "prettier",
    "prettier/standard",
    "prettier/vue",
  ],
  globals: {
    // 这里填入你的项目需要的全局变量
    // 这里值为 false 表示这个全局变量不允许被重新赋值，比如：
    //
    // Vue: false
  },
  // 此项是用来提供插件的，插件名称省略了eslint-plugin-*
  plugins: ["standard", "vue", "prettier"],
  // 这里填入你的项目需要的个性化配置
  rules: {
    "prettier/prettier": [
      "error",
      { semi: false, singleQuote: true, printWidth: 120 },
    ],
    "vue/html-self-closing": [
      "error",
      {
        html: {
          void: "any",
        },
      },
    ],
    "vue/name-property-casing": "off",
    "vue/attribute-hyphenation": "off",
    "vue/require-prop-type-constructor": "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-descending-specificity": "null",
  },
  // 此项是用来指定javaScript语言类型和风格
  parserOptions: {
    sourceType: "module", // sourceType用来指定js导入的方式，默认是script，如果代码是在ECMASCRIPT中的模块使用module
    ecmaFeatures: {
      jsx: true,
    },
  },
  // 此项指定环境的全局变量，使用 env 关键字指定你想启用的环境，并设置它们为 true
  env: {
    es6: true,
    node: true,
  },
};

# .stylelintrc

{
  "extends": "stylelint-config-recommended-scss",
  "rules": {
      "no-descending-specificity":null
  }
}

# 命令行指令

  1. npm run serve 在线运行
  2. npm run build 打包命令
  3. npm run lint 用 eslint 检查所有代码错误
  4. npm run lint:fix 修复所有可 fix 的 eslint 错误

# 参考文章

使用 ESLint、Prettier 优化代码 (opens new window) 你没看过的 Vue 项目代码检查+格式化教程 (opens new window)
使用 ESLint ＆ Prettier 美化 Vue 代码 (opens new window)
使用 ESLint+Prettier 来统一前端代码风格 (opens new window)

# Do Not Use

  1. view ui：维护不积极，bug较多，功能不完善。