npm package: @ftvs/miniapp
Description: ### 1. 专注大屏设备
Latest version: 1.0.3

## ftv-minapp产品特点

### 1. 专注大屏设备

 `ftv-minapp` 的组件都是多端自适应的，并且是可以全程按键聚焦的。


# 快速开始
> **注意**
> 该组件库仅对`vue3`项目提供支持

## 方式一：使用 uni_modules 安装（推荐）

使用 `uni_modules` 方式安装组件库，可以直接通过插件市场导入，通过右键菜单快速更新组件，不需要引用、注册，直接在页面中使用 `ftv-minapp` 组件。[点击安装 ftv-minapp 组件库](https://ext.dcloud.net.cn/plugin?id=55)

**注意：下载最新的组件目前仅支持 uni_modules ,非 uni_modules 版本最高支持到组件的1.2.10版本**

如不能升级到 `uni_modules` 版本，可以使用 `uni_modules` 安装好对应组件，将组件拷贝到对应目录。

例如需更新 `uni-list`和`uni-badge` ,将 `uni_modules>uni-list>components`和`uni_modules>uni-badege>components`下所有目录拷贝到如下目录即可：

**目录示例**
```json {2,3,4,5,6,7}
┌─components              组件目录
│  ├─ftv-page             page 根元素目录
│  │  └─ftv-page.vue      page 根元素组件文件
│  ├─ftv-focus            focus 聚焦元素目录
│  │  └─ftv-focus.vue     focus 聚焦元素组件文件
│  ├─ftv-scroll         	scroll 可滚动目录
│  │  └─ftv-scroll.vue    scroll 可滚动组件文件
│  └─ //....              更多组件文件
├─pages                   业务页面文件存放的目录
│  ├─index
│  │  └─index.vue         index示例页面
├─main.js                 Vue初始化入口文件
├─App.vue                 应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json           配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json              配置页

```


## 方式二：使用 npm 安装

在 `vue-cli` 项目中可以使用 `npm` 安装 `ftv-minapp` 库 ，或者直接在 `HBuilderX` 项目中使用 `npm` 。（不推荐后一种方式）

> **注意**
> cli 项目默认是不编译 `node_modules` 下的组件的，导致条件编译等功能失效 ，导致组件异常
> 需要在根目录创建 `vue.config.js` 文件 ，增加 `@ftvs/minapp` 包的编译即可正常
> ```javascript
> // vue.config.js
> module.exports = {
> 		transpileDependencies:['@ftvs/minapp']
> }
> ```



**准备 sass**

`vue-cli` 项目请先安装 sass 及 sass-loader，如在 HBuliderX 中使用，可跳过此步。

- 安装 sass
```
 npm i sass -D   或   yarn add sass -D  
```

**安装 ftv-minapp**

```
npm i @ftvs/minapp   或   yarn add @ftvs/minapp `推荐`
```



在 ``script`` 中引用组件：

```javascript
import {ftvPage} from '@ftvs/minapp'
//import ftvPage from '@ftvs/minapp/lib/ftv-page/ftv-page.vue' //也可使用此方式引入组件

```


在 ``template`` 中使用组件： 

```html
<ftv-page>
  <ftv-focus>我可以聚焦</ftv-focus>
</ftv-page>
```
> **注意**
> - `CLI` 引用方式， `H5` 端不支持在 `main.js` 中全局注册组件，如有需求请使用（[easyCom](https://uniapp.dcloud.io/collocation/pages?id=easycom)） 的方式引用组件
> - 使用 npm 安装的组件，默认情况下 babel-loader 会忽略所有 node_modules 中的文件 ，导致条件编译失效，需要通过配置 `vite.config.js` 解决：
> ```javascript
> // 在根目录创建 vite.config.js 文件，并配置如下
> export default defineConfig({
> 	transpileDependencies: ['@ftvs/minapp']
> })
> ```


## 使用 npm + easycom 

使用 `npm` 安装好 `ftv-minapp` 之后，需要配置 `easycom` 规则，让 `npm` 安装的组件支持  `easycom`

打开项目根目录下的 `pages.json` 并添加 `easycom` 节点：

```javascript {8}
// pages.json

{
	"easycom": {
		"autoscan": true,
		"custom": {
			// ftv-minapp 规则如下配置
			"^ftv-(.*)": "@ftvs/miniapp/lib/ftv-$1/ftv-$1.vue"
		}
	},
	
	// 其他内容
	pages:[
		// ...
	]
}

```

### ftv-minapp 已支持的组件列表
|组件名|组件说明|
|---|---|
|ftv-page|[undefined](https://ext.dcloud.net.cn/plugin?name=ftv-page)|
|uni-scss|[辅助样式](https://ext.dcloud.net.cn/plugin?name=uni-scss)|


### 其他

- ftv-minapp 是全端兼容的基于flex布局的、无dom的ui库
- ftv-minapp 是基于uni-ui组件的扩展,支持按键聚焦。


> **注意**
> - `ftv-minapp` 不支持使用 `Vue.use()` 的方式安装



### 贡献代码
在使用 `ftv-minapp` 中，如遇到无法解决的问题，请提 [Issues](https://github.com/dcloudio/ftv-minapp/issues) 给我们，假如您有更好的点子或更好的实现方式，也欢迎给我们提交 [PR](https://github.com/dcloudio/ftv-minapp/pulls)