[使用 Weex 和 Vue 開發原生應用] 1 如何配置開發環境

時間 2019-11-06

標籤使用 weex vue 開發原生應用如何配置開發環境简体版

原文原文鏈接

系列文章的目錄在 ? 這裏css

開始以前

每一個項目開始以前，都會先講怎麼搭環境，Weex 和 Vue 都講了。其實一個框架推出以後，「怎麼配置開發環境」這類文章會比較多，每一個人寫的都不同，最好的方式是去看官方文檔。我這裏若是詳細寫的話，確定和官方文檔 80% 內容都同樣。html

《Weex 快速上手》前端
《Vue.js 介紹》vue

因此我就不講怎麼搭環境了！文章標題是騙人的！ ?java

由於有現成的項目能夠參考（weex-hackernews），能夠直接「授之以魚」。不過，我會根據不一樣的需求，幫你找到「授之以漁」的那些文章。android

其實這些技巧與 Weex 和 Vue 都沒多大關係的，在 突飛猛進 的前端環境裏，學習怎麼配「最早進」的開發環境是個繞不過的坎。我這裏只講與 Weex 和 Vue 有關的。ios

學習 Weex + Vue

如今有機會在生產環境中使用 Weex + Vue 的應該寥寥無幾，你們應該都是抱着一份好奇的心態想看看 Weex + Vue 能折騰出什麼花樣。git

若是你只是想學習 Weex 和 Vue，那就不比大費周章的搭建什麼 Android 、iOS 環境，直接在 dotwe.org 上寫例子，使用 Weex Playground App 掃描二維碼就能夠查看頁面了。Weex 從 0.9.5 纔開始支持 Vue，使用以前請確保 SDK 版本正確。github

用 Weex Playground App 掃描這個連接中的二維碼能夠獲取 WeexSDK 的版本。（建議提 issue 以前都能提供環境信息）chrome

除此以外，我還有一個倉庫，weex-vue-examples，裏邊包含了各類單頁的小例子，幾乎涵蓋了全部 Weex 組件、模塊，也用到了不少 Vue 2.x 的特性。能夠也能夠直接將代碼複製到 dotwe.org 上運行。

進一步學習 Weex + Vue

若是你不知足於使用在線網站寫代碼，想在本地寫一些更復雜的例子（有沒有發現 dotwe 上無法寫多文件的例子），很好，給你推薦兩個工具：weex-toolkit 和 weex-pack。

爲何是兩個工具？由於解決的問題不同，目前這兩個工具也正在考慮合併，把 weex-pack 合進 weex-toolkit，只保留 weex 命令。

一樣，我也不寫具體的使用方法了，各自的項目文檔上都有，我講一下這兩個工具的特色和差異。

若是你們有詳細的使用經驗，歡迎貢獻出來，精力有限，歡迎好心人幫我填坑。。。?

使用 weex-toolkit

安裝完 weex-toolkit 以後，它生成了 weex 命令，是個工具集，用法是 weex <command> [options]。它主要有三個功能：

初始化項目。
編譯 .we 和 .vue 文件。
調試代碼。

對我來講，用的最多的就是 調試代碼。weex debug 能夠會啓動一個 server 而且彈開一個調試頁面，上邊有個二維碼；用 Weex Playground App 掃描這個二維碼就能夠用 chrome 開發者工具調試真機了。

對於項目的初始化，你們能夠用各自最喜歡的工具來搭，官方標配是 Webpack + weex-loader ，其餘的，像啓動本地服務、eslint、postcss、自動化測試這些東西均可以自行配置的，和其餘標準的前端項目同樣。

至於編譯，仍是建議使用 dotwe.org 或者本地配個工程編譯源碼，由於命令行工具更新慢，又比較難定製。

使用 weex-pack

weex-pack 最初存在的目的就是爲了方便你們打包 Android 和 iOS 應用，是解決原生開發的一些問題的。它也能初始化項目，不過生成的項目裏除了 Web 工程之外，還有 Android 和 iOS 。

雖然可以直接生成好 Android 和 iOS 工程，可是若是你機器上什麼環境也沒配，也是運行不起來的。

運行 Android 至少得裝 java 和 Andorid SDK，建議使用 Android Studio，生成的安卓工程是基於 Android Studio 的；運行 iOS 得用 Mac，依賴管理使用 CocoaPods，再稍微配置一下 Xcode 便可。這方面的教程網上比較多了，我也不專業，我就不誤人子弟了。