Inkline - Nuxt 模块

Inkline 的 Nuxt 模块，直观的 UI 组件库，为您构建高质量、可访问且可定制的 Vue.js 设计系统奠定基础。

Inkline 由 @alexgrozav 编写和维护。

主页 · 文档 · Storybook · Playground · Issue Tracker

安装

1. 创建项目

使用下面的 nuxi CLI 命令或使用 Nuxt.js 指南创建一个新的 Nuxt.js 应用程序，并按照安装向导提供的说明进行操作。

npx nuxi init my-nuxt-app

cd my-nuxt-app

npm install

2. 安装 Inkline 和依赖项

安装并保存 Inkline 和 Inkline Nuxt 3 模块作为项目依赖项。

npm install --save @inkline/inkline @inkline/nuxt

Inkline 使用 Sass 预处理和编译其 CSS 文件。您需要将其作为开发依赖项安装，以便编译样式表。

npm install --save-dev sass

3. 配置您的项目

打开您的 nuxt.config.ts 或 nuxt.config.js 文件，并配置您的应用程序以使用 Inkline。

import { defineNuxtConfig } from 'nuxt';

export default defineNuxtConfig({
    modules: [
        '@inkline/nuxt'
    ],
    inkline: {
        // Plugin options (optional)
    }
});

属性	类型	描述	默认值
inkline.css	布尔值	启用或禁用自动添加 Inkline 的样式表。	true
inkline.sassVariables	字符串	SCSS 变量的路径，用于在 Inkline 的样式表之前预先添加。
inkline.global	布尔值	注册全局可用的组件。这将禁用 tree-shaking。	true

4. 配置您的设计

接下来，打开您的 app.vue 文件，并添加一个包含以下内容的 style 块。了解有关设计系统的更多信息。

<style lang="scss">
:root {
    --color--primary--h: 195deg;
    --color--primary--s: 77%;
    --color--primary--l: 39%;
}
</style>

5. 享受使用 Inkline

干得漂亮！您现在可以开始使用 Inkline 提供的所有功能了。

故障排除

在 ../my-nuxt-app/node_modules/@nuxt/kit/package.json 中未定义 "exports"
创建一个名为 scripts/patch.js 的补丁文件并运行它。

const fs = require('fs');
const path = require('path');

const target = path.resolve(__dirname, '../node_modules/@nuxt/kit/package.json');
const contents = fs.readFileSync(target);
const replaced = contents.toString().replace(
    '"import": "./lib/index.mjs"', 
    '"import": "./lib/index.mjs", "require": "./lib/index.mjs"'
);

fs.writeFileSync(target, replaced);

node scripts/patch.js

或者，将其作为 postinstall 脚本添加到您的 package.json 中。

类型 '{ inkline: {...}; }' 的参数不可分配给类型 'NuxtConfig' 的参数
创建一个名为 nuxt-schema-shim.d.ts 的文件并添加以下内容

import type { PluginConfig } from '@inkline/inkline';

declare module '@nuxt/schema' {
  interface NuxtConfig {
    inkline?: PluginConfig;
  }
  interface NuxtOptions {
    inkline?: PluginConfig; 
  }
}