Location-ui NPM

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