移動開發(fā)跨平臺前端【免費下載鏈接】vue-native-coreVue Native is a framework to build cross platform native mobile apps using JavaScript項目地址https://gitcode.com/gh_mirrors/vu/vue-native-core點擊查看免費下載導(dǎo)讀本文圍繞 Vue Native 框架的核心用法展開它以 Vue.js 的語法為入口、以 React Native 的底層能力為引擎讓開發(fā)者用一套 JavaScript 代碼同時產(chǎn)出 iOS 與 Android 原生應(yīng)用。讀完本文你將掌握 Vue Native CLI 的安裝與項目初始化、在既有 React Native/Expo 工程中手動接入 Vue Native 的完整流程、可用組件范圍以及從倉庫源碼層面理解“Vue 模板如何被編譯并交給 React Native 執(zhí)行”的底層原理。需要說明的是本倉庫已在 README 中標注為“已棄用、不再維護”文中所有命令與配置均以當前倉庫實際內(nèi)容為準。Vue Native 是什么Vue Native 是一個使用 JavaScript 構(gòu)建跨平臺原生移動應(yīng)用的框架。它的定位非常清晰它是 React Native API 之上的一層封裝wrapper因此凡是 React Native 能做到的事Vue Native 也都能做到。正如倉庫根目錄 README.md 所描述Vue Native 帶來的核心價值有兩點Vue.js 的簡潔性可以使用熟悉的 HTML 與 CSS 語法在單文件組件SFC中增量式地構(gòu)建用戶界面。與 React Native 的無縫互操作開箱即可用 Vue.js 語法使用 React Native 的核心組件同時覆蓋 iOS 和 Android 兩個平臺。換句話說Vue Native 并不重新發(fā)明一套原生渲染引擎而是把 Vue 的響應(yīng)式、模板語法、組件體系“翻譯”到 React Native 的運行時之上。這一點從倉庫的目錄結(jié)構(gòu)中可以直觀看到src/core是標準的 Vue 2 內(nèi)核instance、observer、vdom、compiler 等src/platforms/vue-native則是專門面向 React Native 平臺的適配層與 Vue 2 官方倉庫中platforms/web、platforms/weex的架構(gòu)思路一脈相承。安裝與項目初始化安裝 Vue Native CLIVue Native 官方提供 CLI 工具用于生成項目全局安裝命令為$ npm install vue-native-cli -g使用 CLI 之前本機還必須全局安裝以下兩個工具之一expo-cli基于 Expo 工具鏈創(chuàng)建和管理項目。react-native-cliReact Native 官方/社區(qū) CLI。Vue Native CLI 本身并不直接生成原生工程而是包裝wrapsexpo-cli 與 react-native-cli先調(diào)用底層 CLI 生成工程骨架再自動安裝并配置來自vue-native-core的依賴最終產(chǎn)出一個配置完整的單頁應(yīng)用SPA項目。這正是 README.md 中“Project setup with Vue Native CLI”一節(jié)的機制描述。生成一個新項目CLI 用法極其簡單只需一條命令$ vue-native init projectName執(zhí)行后CLI 會為你搭建好 Vue Native 工程包括依賴安裝與 Metro 打包器的vue擴展名識別等配置無需手工干預(yù)。倉庫自身的構(gòu)建與校驗?zāi)_本如果你希望從源碼層面了解這個框架本身是如何被構(gòu)建與驗證的可以查看倉庫根目錄的 package.json。它定義了一套完整的工程化腳本npm run lint使用 ESLint 檢查src與scripts目錄。npm run flow執(zhí)行 Flow 類型檢查倉庫源碼大量使用flow注解。npm run test:unit基于 Jest 運行單元測試測試用例位于tests/unit 目錄。npm test依次執(zhí)行 lint、flow 與單元測試的完整校驗鏈路。npm run build通過scripts/build.js產(chǎn)出構(gòu)建產(chǎn)物。npm run release通過scripts/release.sh執(zhí)行發(fā)布流程。此外倉庫通過 husky 配置了pre-commit鉤子自動執(zhí)行npm run lint:fix見 scripts/git-hooks/pre-commit保證提交代碼風格一致。在已有 React Native / Expo 項目中集成 Vue NativeREADME 明確指出把 Vue Native 集成進一個已存在的 React Native 項目是可行的具體步驟記錄在倉庫根目錄的 converting-react-native-project.md 中這些步驟同樣適用于“從零手動搭建”一個 Vue Native 項目不借助 CLI。雖然 Vue Native CLI 是官方推薦的新建項目方式但理解手動集成流程能讓你清楚掌握 Vue Native 與 React Native 之間的每一個銜接點也更便于排查問題。第一步安裝依賴包Vue Native 由多個 npm 包協(xié)作組成運行時依賴有兩個vue-native-core核心運行時庫提供創(chuàng)建 Vue Native 組件所需的核心能力其 package.json 位于 packages/vue-native-core/package.json當前版本 0.3.1并聲明react 16.3.0為 peerDependency。vue-native-helper運行時輔助庫提供編譯產(chǎn)物所需的平臺指令與渲染輔助函數(shù)。開發(fā)期還需要一個額外的包來把.vue組件文件轉(zhuǎn)譯成 JSvue-native-scripts編譯與轉(zhuǎn)換 Vue 組件為 React Native 代碼。在你的項目目錄中執(zhí)行$ npm install --save vue-native-core vue-native-helper $ npm install --save-dev vue-native-scripts三個包在倉庫中分別對應(yīng) packages/vue-native-core、packages/vue-native-helper 與 packages/vue-native-scripts 目錄。第二步配置 Metro 打包器React Native 使用 Metro bundler 生成應(yīng)用包app bundleMetro 通過metro.config.js進行配置。在項目根目錄創(chuàng)建或修改metro.config.js加入以下內(nèi)容const { getDefaultConfig } require(metro-config); module.exports (async () { const { resolver: { sourceExts } } await getDefaultConfig(); return { transformer: { babelTransformerPath: require.resolve(./vueTransformerPlugin.js), getTransformOptions: async () ({ transform: { experimentalImportSupport: false, inlineRequires: false, }, }) }, resolver: { sourceExts: [...sourceExts, vue] } }; })();這段配置有兩個關(guān)鍵點resolver.sourceExts把vue追加到默認的可解析擴展名列表中使 Metro 能夠識別.vue文件。transformer.babelTransformerPath指向自定義的轉(zhuǎn)譯器插件vueTransformerPlugin.js讓.vue文件在打包前先經(jīng)過 Vue Native 的編譯管線。Expo 用戶特別注意Expo 項目不走項目根目錄的metro.config.js而是通過app.json中的packagerOpts聲明打包器選項。必須修改app.json讓.vue文件被識別{ expo: { sdkVersion: 34.0.0, platforms: [ ios, android, web ], ... packagerOpts: { sourceExts: [js, json, ts, tsx, vue], config: metro.config.js } } }這里在sourceExts數(shù)組中顯式加入了vue同時通過config字段指向metro.config.js注意文檔中此處的 sdkVersion 數(shù)值以當前倉庫示例為準實際使用時請?zhí)鎿Q為你自己的 Expo SDK 版本。第三步創(chuàng)建 vueTransformerPlugin.jsbabelTransformerPath指向的vueTransformerPlugin.js需要創(chuàng)建在項目根目錄內(nèi)容如下const vueNativeScripts require(vue-native-scripts); const upstreamTransformer require(metro-react-native-babel-transformer); const vueExtensions [vue]; // -- Add other extensions if needed. module.exports.transform function ({ src, filename, options }) { if (vueExtensions.some(ext filename.endsWith(. ext))) { return vueNativeScripts.transform({ src, filename, options }); } return upstreamTransformer.transform({ src, filename, options }); };這個文件的職責是按文件擴展名分流以.vue結(jié)尾的文件交給vue-native-scripts的transform處理其余 JS 文件繼續(xù)走 React Native 默認的 Babel 轉(zhuǎn)譯器。不同 React Native 版本的上游轉(zhuǎn)譯器差異上游轉(zhuǎn)譯器upstreamTransformer的引入路徑隨 React Native 版本而變化。倉庫源碼 src/platforms/vue-native/scripts/transformerPlugin.js 中按 RN 小版本做了精確的分支處理它讀取react-native/package.json中的版本號并取minor值判斷RN ≥ 0.59metro-react-native-babel-transformer當前推薦路徑RN 0.56 – 0.58metro/src/reactNativeTransformerRN 0.52 – 0.55metro/src/transformerRN 0.47 – 0.51metro-bundler/src/transformerRN 0.46metro-bundler/build/transformerRN ≤ 0.45react-native/packager/transformer以兼容方式包裝也就是說vueTransformerPlugin.js中upstreamTransformer的引入路徑應(yīng)當與你使用的 React Native 版本匹配README 提到 Vue Native 不再支持 0.59 之前的舊版本因此新項目直接使用metro-react-native-babel-transformer即可。另外src/platforms/vue-native/scripts/transformerPlugin.js 的transform函數(shù)還做了兩件值得注意的事兼容 RN ≥ 0.46 的傳參方式當src是對象即{ src, filename, options }打包傳入時先解構(gòu)再分發(fā)給上游轉(zhuǎn)譯器。Source Map 支持先用compileVueToRn即倉庫內(nèi)的reactVueTemplateParser把.vue源碼編譯為 JS 輸出若編譯產(chǎn)物帶mappings則通過source-map的SourceMapConsumer與babel-traverse把生成的 Babel AST 的行號回映射到.vue源碼的行號見函數(shù)sourceMapAstInPlace從而保證.vue文件中的錯誤能定位到原始模板位置。第四步導(dǎo)入.vue組件配置完成后在 React Native 應(yīng)用中即可像導(dǎo)入普通模塊一樣導(dǎo)入 Vue 組件import VueComponent from ./VueComponent.vue只要對應(yīng)目錄下存在VueComponent.vue文件轉(zhuǎn)譯器就會解析它并交給 React Native bundler 繼續(xù)處理。可用的 React Native 組件范圍Vue Native 對組件的接入策略非常省心README.md 明確指出React Native 0.63 及之后的全部核心組件都會被全局注冊在模板中無需 import 與局部注冊即可直接使用。組件的完整清單與用法可參考 React Native 官方的“Components and APIs”文檔。那些曾經(jīng)存在、后來從 React Native 核心中被棄用的組件仍可通過安裝各自的獨立包繼續(xù)使用。例如要使用WebView就安裝react-native-webview包。這一“全局注冊”機制在源碼層面由運行時組件構(gòu)建模塊支撐倉庫 src/platforms/vue-native/runtime/components/index.js 統(tǒng)一導(dǎo)出buildComponent、buildDirective、buildNativeComponent、buildWebTransition、buildWebEmptyComponent、buildWebInputComponent等構(gòu)建函數(shù)它們負責把模板中出現(xiàn)的標簽名映射為 React Native 的原生組件或 Web 兼容組件。源碼結(jié)構(gòu)理解 Vue Native 的編譯與運行鏈路倉庫采用 monorepo 組織核心代碼在src目錄四個發(fā)布包位于 packages 目錄。各包與源碼目錄的對應(yīng)關(guān)系各包 README 均注明“本包為自動生成貢獻代碼請到 src 對應(yīng)目錄”如下發(fā)布包對應(yīng)源碼目錄職責vue-native-coresrc/platforms/vue-native/runtime運行時生命周期、渲染混入、組件/指令構(gòu)建vue-native-helpersrc/platforms/vue-native/runtime/helpers.js平臺指令、渲染輔助函數(shù)render helpers與組件構(gòu)建導(dǎo)出vue-native-scriptssrc/platforms/vue-native/scripts/index.js暴露compileVueToRn與transform供 Metro 轉(zhuǎn)譯器調(diào)用vue-native-template-compilersrc/platforms/vue-native/compiler/index.js模板編譯同時導(dǎo)出 web 與 native 兩套編譯入口模板編譯的雙平臺設(shè)計src/platforms/vue-native/compiler/index.js 只是簡單的聚合導(dǎo)出export * from ./web與export * from ./native真正的編譯邏輯分兩條線native 編譯器src/platforms/vue-native/compiler/native.js調(diào)用 Vue 內(nèi)核的parse與processAttrs解析模板得到 AST然后交給NativeRenderGenerator生成 render 代碼與 import 代碼。它默認開啟preserveWhitespace: false并在遍歷 AST 時處理render-prop/render-prop-fn這類渲染屬性插槽語法——這些屬性會被提升為父組件的 props同時從子節(jié)點樹中移除。生成 render 代碼后還會做“多余逗號清理”并把 render props 所需但 import 中缺失的模塊補進vue-native-helper的 import 語句。web 編譯器src/platforms/vue-native/compiler/web.js面向 Web 平臺渲染同樣先parse再交給WebRenderGenerator生成代碼空模板時直接輸出export default () null。與之對應(yīng)的代碼生成器位于 src/platforms/vue-native/compiler/codegen 目錄其中NativeRenderGenerator、WebRenderGenerator與BaseGenerator共同構(gòu)成了“Vue 模板 → React Native 可執(zhí)行代碼”的核心翻譯層。運行時組裝src/platforms/vue-native/index.js 是整個平臺的入口從./runtime/index引入 Vue 實例并掛載observer擴展Vue.observer observer。src/platforms/vue-native/runtime/index.js 則通過lifeCycleMixin(Vue)與renderMixin(Vue)把生命周期與渲染邏輯混入 Vue 構(gòu)造函數(shù)。也就是說Vue Native 并不是一份獨立的 Vue 分支而是在 Vue 2 內(nèi)核src/core之上疊加 React Native 平臺適配這也是它能“用 Vue 的思維寫 React Native 應(yīng)用”的根本原因。維護狀態(tài)與使用須知最后必須強調(diào)本項目的當前狀態(tài)README.md 開頭以醒目標識聲明“此項目已棄用deprecated不再維護”。因此本文所有命令與配置來自當前倉庫的快照內(nèi)容如vue-native-core版本 0.3.1僅供學(xué)習(xí)參考與既有項目遷移理解新項目的技術(shù)選型請務(wù)必結(jié)合自身場景另行評估不要基于此文檔作為生產(chǎn)選型的唯一依據(jù)倉庫采用 MIT 許可見根目錄 LICENSE允許自由使用與修改README 的“Credits”一節(jié)特別致謝了 react-vue 項目作者指出 Vue Native 的大部分工作來源于 react-vue——這解釋了其“Vue 模板 → React 運行時”編譯思路的歷史淵源。小結(jié)回顧整篇文章Vue Native 的實踐路徑可以概括為三條一是用vue-native-cli init projectName一鍵生成工程二是在既有 React Native/Expo 項目中通過“安裝三件套依賴 Metro 配置 自定義轉(zhuǎn)譯插件 import.vue文件”手動接入三是從源碼層面理解“Vue 內(nèi)核 vue-native 平臺適配層”的編譯與運行架構(gòu)。無論你是在閱讀歷史代碼、遷移舊項目還是研究“Vue 語法如何映射到 React Native 原生組件”這類跨框架編譯思路當前倉庫的 README.md 與 converting-react-native-project.md 都是最直接的入口文檔。贊分享移動開發(fā)跨平臺前端【免費下載鏈接】vue-native-coreVue Native is a framework to build cross platform native mobile apps using JavaScript項目地址https://gitcode.com/gh_mirrors/vu/vue-native-core點擊查看免費下載相關(guān)推薦React Native Firebase 集成指南從零開始構(gòu)建跨平臺應(yīng)用React Native Firebase 集成指南從零開始構(gòu)建跨平臺應(yīng)用 前言 React Native Firebase 是 React Native 生移動開發(fā)后端CDSAPIPython訪問哥白尼氣候數(shù)據(jù)存儲庫的官方APICDSAPIPython訪問哥白尼氣候數(shù)據(jù)存儲庫的官方API CDSAPI是歐洲中期天氣預(yù)報中心ECMWF開發(fā)的開源Python庫專門用于訪問哥白尼氣候前端Web框架React Native Community CLI 終極指南從零開始構(gòu)建跨平臺應(yīng)用React Native Community CLI 終極指南從零開始構(gòu)建跨平臺應(yīng)用 React Native Community CLI 是構(gòu)建跨平臺移動應(yīng)上一篇csvkit與Python擴展csvpy實現(xiàn)自定義數(shù)據(jù)處理功能下一篇用 Vue 與 Zig 構(gòu)建原生桌面應(yīng)用Native SDK Vue 示例完整實戰(zhàn)指南創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考