TaleLin / lin-ui-cli

为 LinUI 提供按需加载,快速生成项目模板等功能

Home Page:https://doc.mini.talelin.com/cli/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

介绍

Lin UI CLI 是一款针对于 微信小程序 以及 Lin UI 的脚手架,通过 Lin UI CLI 可以快速搭建一套带有 按需加载 功能和 Lin UI 组件库的项目模板。

为什么使用脚手架?

  1. 可以按需加载组件,去掉项目中未使用的组件,减少小程序包的体积
  2. 自带 LinUI 组件库,无需再单独安装
  3. 快速生成主题色配置文件,自定义主题色
  4. 自动安装项目依赖,自动构建 npm LinUI 依赖

快速上手

创建项目

执行以下命令可以快速创建一个基于 Lin UI CLI 的项目:

# 推荐
npm install lin-ui-cli -g
lin-ui-cli create lin-ui-demo

or

npx lin-ui-cli create lin-ui-demo

创建命令时会有如下选项:

  1. name
  2. version
  3. description
  4. 是否开启按需加载 (默认为 yes
  5. 请输入需要安装的 LinUI 版本(默认为最新版)

当进行完以上操作后,即可等待项目创建完成。

当项目创建完成后,会返回如下提示语句:

Successfully created project lin-ui-demo, directory name is lin-ui-demo

创建项目截图: height=300

项目工程截图:

height=300

  • 项目创建完成后会自动安装依赖,以及自动构建 LinUI 的 npm 依赖,无需任何手动操作。
  • 如果您想实现自动按需加载,还需进行下一步操作
  • 当然,您也可以手动执行按需加载命令,在项目根目录运行 npx lin-ui-cli load 命令即可。

微信开发者工具设置

开启自定义处理命令: 这是比较重要的一步,需手动在微信开发者工具的 本地设置 里启用自定义处理命令

height=500

接下来我们引入一个 Button 组件,并执行上传操作,看看 Lin UI CLI 会带来什么效果。 在 app.json 文件加入一下代码:

"usingComponents": {
  "l-button": "/miniprogram_npm/lin-ui/button/index"
},

执行编译操作:

每次执行编译操作时,都会执行按需加载命令,当然,您也可以在根目录执行 npx lin-ui-cli load 命令来实现按需加载!!

height=100

执行上传操作后,您将看到一些无用组件没有被上传:

height=300 height=300

About

为 LinUI 提供按需加载,快速生成项目模板等功能

https://doc.mini.talelin.com/cli/


Languages

Language:JavaScript 56.5%Language:TypeScript 43.5%