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 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; 
  }
}