政治部共享构成部分图书馆
收集用于 dpa 项目的常用 Vue.js 组件.
内容
所需资源
- 节点.js(见
engines.node在软件包中.json为相容版本) - 包裹
@eslint/js @tailwindcss/typography eslint prettier tailwindcss vue vue-router(见peerDependencies在软件包中.json为相容版本)
开始
-
安装软件包 .
pnpm install @dpa-id-components/dpa-shared-components -
安装对等依赖 .
pnpm install @tailwindcss/typography tailwindcss vue vue-router pnpm install --dev @eslint/js eslint prettier- 需要Tailwind及其插件,因为共享的Tailwind预设使用.
- 需要Vue.js和vue-router,因为共享组件依赖于它们.
- 需要ESLint和Prettier是因为我们希望在项目之间强制实施代码质量上线和格式化.
-
整合了共享的CSS并设置了代码质量通融和代码格式化(见以下各节).
整合共享的尾风预设
引用 CSS 入口处预设的 Tailwind main.css 存档).
@import "@dpa-id-components/dpa-shared-components/tailwindPreset";
@source "../../node_modules/@dpa-id-components/dpa-shared-components";
/* Make sure to adjust the `..` segments to match where the `node_modules` directory is. Tailwind won't produce an error if the path is wrong. */
/* … */
设置代码质量折叠
共享 ESLint 配置于 @dpa-id-components/dpa-shared-components/config/eslint.config.js。将其用作通过ESLint进行代码质量林入的基础配置.
示例 ESLint 配置数字 :
import sharedConfig from "@dpa-id-components/dpa-shared-components/config/eslint.config.js";
import { globalIgnores } from "eslint/config";
export default [
{
files: ["**/*.ts", "**/*.mts", "**/*.vue"],
},
globalIgnores(["**/dist/", "**/coverage/"]),
...sharedConfig,
{
settings: {
"better-tailwindcss": {
// The CSS entry point has to be manually configured in each host project.
entryPoint: "src/assets/main.css",
},
},
},
{
files: ["**/*.vue"],
rules: {
"vue/no-undef-components": [
"error",
{
// Add globally-registered components here:
ignorePatterns: ["i18n-t", "RouterLink", "RouterView"],
},
],
},
},
];
设置代码格式
共享 Pretier 配置于 @dpa-id-components/dpa-shared-components/config/prettier.config.js。将其用作通过Prettier格式化代码的基础配置.
示例 Pretier 配置数字 :
import sharedConfig from "@dpa-id-components/dpa-shared-components/config/prettier.config.js";
/**
* @see https://prettier.io/docs/configuration
* @type {import("prettier").Config}
*/
export default {
...sharedConfig,
};
您还可能想要添加一个 Pretier 忽略文件( 如忽略 Markdown 文件) , 并在您的代码编辑器中设置 Pretier , 在保存时自动格式化 .
使用量
要使用组件,请直接导入其源文件:
import UiButton from "@dpa-id-components/dpa-shared-components/components/UiButton/UiButton.vue";