@lx-frontend/theme-preview

A development tool to preview library theme.

Usage no npm install needed!

<script type="module">
  import lxFrontendThemePreview from 'https://cdn.skypack.dev/@lx-frontend/theme-preview';
</script>

README

主题库配置

安装预览工具

npm install -D theme-preview

预览工具初始化

在项目根目录下，运行以下命令：

init-preview

该步骤实现两个操作：

  1. 在根目录先创建了preview.config.js配置文件
  2. 创建了preview文件夹，以及预览主题所需的HTML模板文件

其中，第二步所创建的文件结构是可选的，开发者可按照自己的需要创建所需文件，只需要在preview.config.js配置中修改相关路径即可。

预览文件配置

  1. 静态资源配置。将demo展示所需的静态资源放在preview/static目录下，比如，字体文件，图片等。demo示例和HTML模板中可直接通过/static/path/to/source的方式获取资源。
  2. HTML模板文件preview/index.html。该文件用来挂载demo实例。 · 引入任意的样式文件 · 引入库文件，如vue、element-ui、cvux等 · 如有需要，使用script标签自定义逻辑。 · 引入/static/index.css，该文件由组件样式经编译后生成。

配置preview.config.js

根据预览文件配置，修改根目录下preview.config.js配置文件。

启动

在package.json中配置以下命令

"script": {
  "dev": "preview"
}

然后，运行npm run dev即可启动