快速上手

    Lin UI提供两种安装方法，满足不同开发者的需求。如果您需要使用安装，请确保您已经在本机安装了npm。

    打开小程序的项目根目录，执行下面的命令。

    此时，会生成一个package.json文件，命令行里会以交互的形式让你填一些项目的介绍信息，你可以耐心填完，当然也可以忽略，全部按回车键来快速完成项目初始化。

    注意事项

    • 1.执行npm init进行初始化，此时会生成一个package.json文件，如果不进行npm init，在构建npm的时候会报一个错误：没有找到 node_modules 目录
    • 2.不建议使用cnpm，这样会带来一些未知的错误。如果网络情况不佳，可以使用下面的命令行更换为淘宝源。
    1. npm config set registry https://registry.npm.taobao.org

    接着，继续执行下面的命令。

    1. npm install lin-ui

    执行成功后，会在根目录里生成项目依赖文件夹 node_modules/lin-ui （小程序IDE的目录结构里不会显示此文件夹）。然后用小程序官方IDE打开我们的小程序项目，找到 工具 选项，点击下拉选中 构建npm ，等待构建完成即可。

    出现上图所示的结果后，可以看到小程序IDE工具的目录结构里多出了一个文件夹 miniprogram_npm（之后所有通过 npm 引入的组件和 js 库都会出现在这里），打开后可以看到 lin-ui 文件夹，也就是我们所需要的组件。

    直接通过git下载 Lin UI 源代码，并将 dist 目录（Lin-UI 组件库）拷贝到自己的项目中。

      使用前，确保该组件已经在你的项目目录结构里。以icon组件为例，只需要在使用页面的json文件中引入icon对应的自定义组件即可。组件路径：path/to/${组件名称}/index

      TIP

      例如：npm安装： 源码安装：/dist/icon/index

      然后在wxml中直接使用该组件。

      1. <l-icon name="add"> </l-icon>

      同时，可以通过对 components.json 进行配置，来编译生成相对应的组件。为满足自定义的需求，首先我们要去下载 Lin UI 源码。

      1. git clone https://github.com/TaleLin/lin-ui.git

      安装相关依赖

      1. npm install

      以下是一些最常用的通用变量，所有样式变量可以在这里找到。

      • 组件样式变量找到根目录，打开config/style/_base.less文件
      • 主题色更改 同样打开根目录，打开config/style/_theme.less文件，看到文件中定义了一个变量 @theme-color ，如果有主题色修改的需求，更改它即可。
      1. // 主题色
      3. @theme-color            : #2c61b4;                      // 主题色

      其他更改完成后，在Lin UI下的根目录里打开终端执行如下所示命令

      1. npm run build

      根目录下的 dist 文件夹即是编译后的自定义组件。

      例如只需要 和 loading 两个组件，那么首先删除根目录下dist 文件夹里的组件文件，然后在component.json填入需要的组件名，如下所示代码，

      1. {
      2.     "button",
      3.     "loading"
      4.   ]
      5. }

      配置完成后，在 Lin UI 下的根目录里打开终端执行

      此时dist文件夹下面会生成button和loading两个组件。

      1. ├── dist
      2. │   └── button.                             // button组件
      3. │    ├── index.wxml                         // 组件wxml文件
      4. │    ├── index.wxss                         // 组件wxss文件
      5. │    ├── index.json                         // 组件json文件
      6. │    └── index.js                           // 组件js文件

      根目录下的 dist 文件即是编译后的自定义组件，使用时将他拷贝到自己的项目里即可。