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