一、使用場景
使用情景就是不可再修改的QML或者js文件，可定義成模塊，分為如下情況
1、自定義控件
這里的自定義控件可以理解為最小單位控件，不可再修改，與QML的Button、Text等有同樣的地位；不要與能夠修改或者帶邏輯的控件混淆；
2、存放公共變量、函數的JS
如某個JS文件里存放工程所需的公共函數；
3、字體庫等
如FontAwesome。
本文以自定義公共控件為例 。
二、工程准備
1、新建工程，在根目錄下添加專門存放QML文件的文件夾：
Qml
2、Qml文件夾添加資源文件用於管理所有QML文件
qml.qrc
3、資源文件添加前綴
qml
可根據自己需要設置其他名字，也可不添加
4、在Qml文件夾里新增文件夾
WPControls
這個文件夾以后就用於存儲我們所有的公共/自定義控件
5、在WPControls文件夾里添加一些自定義QML控件，注意大寫字母開頭。這里增加了三個：
FaBtn.qml
WpTextInput.qml
ComboboxView.qml
6、在WPControls文件夾里添加文件：qmldir，並輸入模塊信息、控件信息
module WPControls WPFaBtn 1.0 FaBtn.qml WpTextInput 1.0 WpTextInput.qml ComboboxView 1.0 ComboboxView.qml
WPControls：模塊名，必須寫在開頭
WPFaBtn、WpTextInput、ComboboxView：控件名
1.0：版本號
Xxx.qml：對應qml文件
7、通過qml.qrc資源文件將所有自定義QML文件添加到工程
8、設置QML運行時搜索庫路徑
上面的步驟只是將模塊定義好了，但是運行的時候QML是無法找到這個模塊的，所以需要告訴QML去哪里尋找模塊。
可以寫一個單例類做這個事情：
方法就是：獲取運行main.qml的view的engine，通過addImportPath函數，將尋找路徑放進去。
為什么這個路徑是：qrc:/qml呢？
【這個有個重點也是難點，這地方弄錯了會運行時報：xxx模塊沒有安裝】
因為在Qt里一個模塊就是一個文件夾，這里我們的模塊就是WPControls文件夾，我們需要告訴Qt我們的模塊文件夾在哪里，通過第七步的圖可看到，WPControls文件夾的就在qrc:/qml里。
這個"qml"就是我們資源文件的前綴，如果沒有前綴【也就是前綴為：/】，那么這里應該填：qrc:/
9、使用模塊
import QtQuick 2.6 import QtQuick.Window 2.2 import WPControls 1.0 //引入模塊 Rectangle { visible: true width: 640 height: 480 //自定義的控件 WPFaBtn{ } }
9、設置模塊語義高亮
其實前面步驟完成之后，程序是可以正常運行起來了的，但是我們可能看到import模塊時，QtCreator提示沒有找到這個模塊，這個問題單純就是在工程非運行時，Qt不知道這個模塊在哪里，畢竟上面第八步的import函數是寫在cpp中，只有運行才有效。
所以為了解決這個問題，我們打開.pro文件，加入這句話：
# Additional import path used to resolve QML modules in Qt Creator's code model QML_IMPORT_PATH += $$PWD/Qml #support:WPControls
這句話代表，QtCreator高亮語法時，會從當前的Qml文件夾下去查找模塊，如果找到了就不會報錯了。
注意這里的路徑是文件夾路徑，是以源碼路徑為基礎往下查找的地方【PWD就是當前源碼路徑】；
而第八步的import路徑是以資源文件路徑，以qrc開頭。【即使有多個qrc文件，Qt都認為是一個qrc，只通過前綴去區分？】
PS：
1、查看cpp中當前import了的路徑：
QQmlApplicationEngine engine; for(QString path : engine.importPathList()) qDebug() << path;
2、設置單例控件
qml文件開頭：
//XXX.qml
pragma Singleton
qmldir：
singleton XXX 1.0 XXX.qml
js設置單例：https://www.cnblogs.com/judes/p/15672337.html
3、QML找模塊的步驟
import XXX 1.0
①、在addImportPath的路徑和默認路徑里去找XXX文件夾
②、沒找到則報模塊未安裝；
③、找到了則加載XXX文件夾里的qmldir文件，解析里面的實例化內容
這樣理解了，就容易填這個路徑了
4、如果運行沒有問題，並且很確定高亮路徑也沒有問題，但是代碼就是高亮失敗，可以嘗試重啟下QtCreator
5、如果XXX是一個文件夾，並且是一個模塊【里面有個qmldir】，如果里面有個a.qml，那么這個a.qml是不能import XXX 1.0的，運行時會報找不到文件
6、
qmldir: 用於組織自定義的QML插件
.qmltypes：qml插件的解釋文件，用於QtCreator語法高亮。可通過Qt提供的工具qmlplugindump自動生成
QML_IMPORT_PATH: 導入插件路徑，以支持插件的語法高亮。個人理解是如果純QML文件的擴展，沒有封裝到C++中，則直接導入路徑，即可支持語法高亮，如果有C++封裝，則需要通過.qmltypes支持高亮。
addImportPath: 添加import尋址目錄，c++代碼里添加，沒有前兩項，只是QtCreator不能高亮，沒有這種，則插件無法使用