location-ui

官网地址链接

https://h5-cdn.58.com/git/hrg-fe/zp-tongzhen/location-ui/1x/index.html#/zh-CN/

install

npm i location-ui -S

全局引入

配置 taro 插件 @tarojs/plugin-html

• 首先下载 @tarojs/plugin-html

npm i @tarojs/plugin-html -D

• 在项目中配置

// config/index.js
config = {
  // ...
  plugins: ['@tarojs/plugin-html']
  // 给 sass-loader 传递选项 ！！！！ 按需加载方式必须配置
  sass: {
      data: `@import "location-ui/dist/styles/variables.scss";`,
  }
}

• 配置 375 尺寸

// config/index.js
config = {
  // ...
  designWidth: 375,
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2,
    375: 2 / 1,
  },
};

• npm 使用示例

// app.ts
import { createApp } from "vue";
import LocationUI from "location-ui";
import "location-ui/dist/style.css";
import "./app.scss";

const App = createApp({
  onShow(options) {},
  // 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖
});

App.use(LocationUI);
export default App;

按需引入

• app.ts

import { Button } from "location-ui";
App.use(Button);

• 使用

<location-button>button</location-button>

• 安装 babel-plugin-import

npm install babel-plugin-import --save-dev

• 配置 babel.config.js:

plugins: [
  [
    "import",
    {
      libraryName: "location-ui",
      libraryDirectory: "dist/packages/_es",
      // customName自定义兼容国际化使用
      customName: (name, file) => {
        if (name == "Locale") {
          return "location-ui/dist/packages/locale/lang";
        } else {
          return `location-ui/dist/packages/_es/${name}`;
        }
      },
      style: (name, file) =>
        name.toLowerCase().replace("_es/", "") + "/index.scss",
      camel2DashComponentName: false,
    },
    "location-ui",
  ],
];

安装 css

• 配置 config/index.js

sass: {
    data: `@import "location-ui/dist/styles/variables.scss";`,
  },

预览步骤：

• pnpm i (node 版本 >14.6)
• pnpm run build:taro:vue
• pnpm dev:taro:weapp（如果缺少依赖需要先 cd src/sites/mobile-taro/ && yarn，再返回项目根运行）

开发步骤：

• pnpm run add，执行添加新组件脚本。该脚本会自动生成该组件目录、config.json 内该组件的配置信息等
• pnpm run dev:taro:weapp，执行开发环境预览 taro 小程序文档脚本。该脚本会生成小程序文档路由，打开微信开发者工具预览 dist/miniProgram

官网预览

• pnpm run dev

官网构建

• pnpm run build:site，生成两部分：一部分 PC 网页，另一部分基于 taro 打包成 h5 的预览 iframe