特性

使用Labrador框架可以使微信開發者工具支持加載海量NPM包

支持ES6/7標準代碼，使用async/await能夠有效避免回調地獄

組件重用，對微信小程序框架進行了二次封裝，實現了組件重用和嵌套

自動化測試，非常容易編寫單元測試腳本，不經任何額外配置即可自動化測試

使用Editor Config及ESLint標準化代碼風格，方便團隊協作

安裝

首先您的系統中安裝Node.js和npm v3 下載Node.js，然后運行下面的命令將全局安裝Labrador命令行工具。

npm install -g labrador-cli

初始化項目

mkdir demo           # 新建目錄
cd demo              # 跳轉目錄
npm init             # 初始化npm包
labrador init        # 初始化labrador項目

項目目錄結構

demo                 # 項目根目錄├── .labrador        # Labrador項目配置文件├── .babelrc         # babel配置文件├── .editorconfig    # Editor Config├── .eslintignore    # ESLint 忽略配置├── .eslintrc        # ESLint 語法檢查配置├── package.json
├── dist/            # 目標目錄├── node_modules/
└── src/             # 源碼目錄
    ├── app.js
    ├── app.json
    ├── app.less
    ├── components/  # 通用組件目錄
    ├── pages/       # 頁面目錄
    └── utils/

注意 dist目錄中的所有文件是由labrador命令編譯生成，請勿直接修改

配置開發工具

項目初始化后使用WebStorm或Sublime等你習慣的IDE打開項目根目錄。然后打開 微信web開發者工具 新建項目，本地開發目錄選擇 dist 目標目錄。

開發流程

在WebStorm或Sublime等IDE中編輯 src 目錄下的源碼，然后在項目根目錄中運行labrador build 命令構建項目，然后在微信web開發者工具 的調試界面中點擊左側菜單的 重啟 按鈕即可查看效果。

我們在開發中， 微信web開發者工具 僅僅用來做調試和預覽，不要在 微信web開發者工具 的編輯界面修改代碼。

微信web開發者工具 會偶爾出錯，表現為點擊 重啟 按鈕沒有反應，調試控制臺輸出大量的無法require文件的錯誤，編輯界面中代碼文件不顯示。這是因為 labrador build 命令會更新整個 dist 目錄，而 微信web開發者工具 在監測代碼改變時會出現異常，遇到這種情況只需要關掉 微信web開發者工具 再啟動即可。

我們還可以使用 labrador watch 命令來監控 src 目錄下的代碼，當發生改變后自動構建，不用每一次編輯代碼后手動運行labrador build 。

所以最佳的姿勢是：

在項目中運行 labrador watch

在WebStorm中編碼，保存

切換到 微信web開發者工具 中調試、預覽

再回到WebStorm中編碼

以上就是微信小程序組件化開發框架Labrador的特性安裝步驟的詳細內容，更多請關注php中文網其它相關文章！