快速上手

介绍

fant-mini支持通过npm和uni_moduls两种方式安装，通过本章节你可以了解到 fant-mini 的安装方法和基本使用姿势。

uni_modules

安装

FANT-MINI 支持 uni_modules 规范，故我们推荐使用 uni_modules 的方式引入，方便更新。

在src目录下创建uni_modules文件夹并将fant-mini解压到uni_modules中，结构如下:

- uni_modules
- - - fant-mini 

下载地址：fant-mini@1.0.10

Tips: 如果需要使用Toast和Modal组件，则需要安装mp-html以支持富文本功能。

配置

1. 引入组件

import Vue from 'vue'
import App from './App.vue'
import fantMini from '@/uni_modules/fant-mini'

Vue.use(fantMini)

Vue.config.productionTip = false

new App({}).$mount()

2. 引入fant-mini的主题文件

在uni.scss中引入theme.scss。

/* uni.scss */
@import "@/uni_modules/fant-mini/libs/css/theme.scss";

3. 安装sass（如果项目中已经安装sass或者node-sass则此步骤可以忽略）

fant-mini使用scss作为css预编译器，故需在项目中引入，否则无法运行。

# 安装sass
yarn add sass -D  
# 安装sass-loader
yarn add sass-loader -D

4. 引入fant-mini的iconfont

在App.vue中引入iconfont相关文件。

/* App.vue */
<style>
@import '@/uni_modules/fant-mini/libs/iconfont/iconfont.css';
</style>

5. 使用

完成前四步之后就可以开始使用fant-mini了。fant-mini的组件支持easycom规范，故可以直接在.vue中使用，无需在页面内import，也不需要在components内声明，即可在任意页面使用。值得注意的是，uni-app平台不支持全局挂载组件，故Loading、Toast、Modal、DatePicker等组件仍需在SFC中显式使用，例如:

<hd-loading id="hd-loading"></hd-loading>

NPM

安装

yarn add fant-mini

npm install fant-mini

配置

1. 引入fant-mini

在main.ts中新增代码

import Vue from 'vue'
import App from './App.vue'
// 引入fant-mini
import fantMini from 'fant-mini'
Vue.use(fantMini)

Vue.config.productionTip = false

new App({}).$mount()

2. 引入fant-mini的主题文件

在uni.scss中引入theme.scss。

/* uni.scss */
@import "fant-mini/libs/css/theme.scss";

3. 安装sass（如果项目中已经安装sass或者node-sass则此步骤可以忽略）

fant-mini使用scss作为css预编译器，故需在项目中引入，否则无法运行。

# 安装sass
yarn add sass -D  
# 安装sass-loader
yarn add sass-loader -D

4. 引入fant-mini的iconfont

在App.vue中引入iconfont相关文件。

/* App.vue */
<style>
@import 'fant-mini/libs/iconfont/iconfont.css';
</style>

5. Vue-Cli配置

在vue-cli模式的项目，还需要在项目根目录的vue.config.js文件中进行如下配置：

// vue.config.js
module.exports = {
  transpileDependencies: ['fant-mini']
}

6. 配置easycom模式

修改src目录下的pages.json:

  // pages.json
{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^hd-(.*)": "fant-mini/components/hd-$1/hd-$1.vue",
      "^mp-(.*)": "fant-mini/components/mp-$1/mp-$1.vue"
    }
	}
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}