本篇文章給大家談?wù)劵趘ue3.0小程序開(kāi)發(fā)框架，以及vuejs 小程序?qū)?yīng)的知識(shí)點(diǎn)，希望對(duì)各位有所幫助，不要忘了收藏本站喔。

本文目錄一覽：

• 1、vue小程序分類(lèi)
• 2、使用vue3+ typeScript 開(kāi)發(fā)小程序
• 3、推薦兩個(gè)微信小程序開(kāi)發(fā)框架
• 4、前端Vue.js框架是什么？
• 5、微信小程序框架解析
• 6、基于Vue3+TS+ElementPlus+Qiankun構(gòu)建微應(yīng)用項(xiàng)目

vue小程序分類(lèi)

Vue小程序分類(lèi)如下：

1.mpvue

2.uni-app

3.megalo

以上都是Vue開(kāi)發(fā)小程序的框架。

使用vue3+ typeScript 開(kāi)發(fā)小程序

要求是使用 vue3 + typescript 進(jìn)行開(kāi)發(fā)小程序和H5的跨端應(yīng)用

在 uniapp 和 taro 這兩個(gè)之中進(jìn)行選擇 在參了官方和社區(qū)示例后最終選擇了 taro 。原因在于 uniapp 目前對(duì)于 vue3 的支持尚不完全比如說(shuō)暫不支持 setup 語(yǔ)法糖對(duì)于h5的支持比較差 沒(méi)有支持 vue3 的 ui 框架等等。

node.js

注意tarojs的版本 建議使用 taro 3.0.24 以上的版本

由于引用 node_modules 的模塊，默認(rèn)不會(huì)編譯，所以需要額外給 H5 配置 esnextModules ，在 taro 項(xiàng)目的 config/index.js 中新增如下配置項(xiàng)：

如果出現(xiàn)類(lèi)似 Could not find module View in @tarojs/components 的問(wèn)題，請(qǐng)?jiān)谶M(jìn)行如下設(shè)置：

詳情請(qǐng)參考

推薦兩個(gè)微信小程序開(kāi)發(fā)框架

下面是最近了解的，開(kāi)發(fā)者使用較多的框架：

1. WePY

WePY屬騰訊系，是一款組件化的開(kāi)發(fā)框架，比原生小程序的開(kāi)發(fā)模式更接近于MVVM ，它類(lèi)Vue的開(kāi)發(fā)風(fēng)格，讓Vue開(kāi)發(fā)者很容易上手。

Github地址:

官網(wǎng)地址：

2. mpvue

mpvue 是美團(tuán)點(diǎn)評(píng)開(kāi)源的一個(gè)使用Vue.js開(kāi)發(fā)小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實(shí)現(xiàn)，使其可以運(yùn)行在小程序環(huán)境中，從而為小程序開(kāi)發(fā)引入了整套 Vue.js 開(kāi)發(fā)體驗(yàn)。

Github：

官網(wǎng)：

前端Vue.js框架是什么？

前端Vue.js框架是什么？有哪些特點(diǎn)？Vue.js是一個(gè)前端框架，用于構(gòu)建用戶界面的漸進(jìn)式框架。在Vue中一個(gè)核心的概念是讓用戶不再操作DOM元素解放了用戶的雙手，讓程序員可以更多的時(shí)間去關(guān)注業(yè)務(wù)邏輯，Vue框架能夠提高開(kāi)發(fā)的效率。

科普時(shí)刻 ：

黑馬程序員vue前端基礎(chǔ)教程-4個(gè)小時(shí)帶你快速入門(mén)vue

前端開(kāi)發(fā)利器vue，微信小程序快速開(kāi)發(fā)實(shí)戰(zhàn)

web前端基礎(chǔ)必備教程-2小時(shí)玩轉(zhuǎn)Vue單元測(cè)試

黑馬程序員Vue2.0+Vue3.0入門(mén)到精通，大廠前端崗位必備技能

1、Vue.js是什么？

Vue是一個(gè)js庫(kù)，且無(wú)依賴別的js庫(kù)跟jquery差不多。Vue核心庫(kù)只關(guān)注視圖層，非常容易與其它庫(kù)或已有項(xiàng)目整合。Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM庫(kù)，同時(shí)擁有非常容易上手的API。

Vue.是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面當(dāng)與現(xiàn)代化的工具鏈以及各種支持類(lèi)庫(kù)結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。

2、Vue的MVVM設(shè)計(jì)模式是什么？

如果了解前端一定知道MVVM和MVC這兩種設(shè)計(jì)模式，且很有可能對(duì)mvp也有一些了解。MVC即model，view，control，jQuery就是采用的這種設(shè)計(jì)模式。MVVM即model，view，viewmodel，是數(shù)據(jù)驅(qū)動(dòng)模式，即所有的一切通過(guò)操作數(shù)據(jù)來(lái)進(jìn)行而盡量避免操作DOM樹(shù)。

不關(guān)注DOM結(jié)構(gòu)，考慮數(shù)據(jù)該如何儲(chǔ)存，用戶的操作在view通過(guò)viewmodel進(jìn)行數(shù)據(jù)處理，分情況是否通過(guò)ajax與model層進(jìn)行交互，再返回到view層，在這個(gè)過(guò)程中view和viewmodel的數(shù)據(jù)雙向綁定使得我們完全的擺脫了對(duì)DOM的繁瑣操作，而是專(zhuān)心于對(duì)用戶的操作進(jìn)行處理，避免MVC中control層過(guò)厚的問(wèn)題。

在vue調(diào)試方面可以選擇安裝chrome插件vue Devtools。打開(kāi)vue項(xiàng)目，在console控制臺(tái)選擇vue面板。在Devtools對(duì)象中，可以選擇組件，查看對(duì)應(yīng)組件內(nèi)的數(shù)據(jù)信息。也可以選擇Vuex選項(xiàng)，查看該項(xiàng)目?jī)?nèi)Vuex的狀況變量信息。

3、Vue.js有哪些優(yōu)點(diǎn)？

聲明式，響應(yīng)式的數(shù)據(jù)綁定；組件化的開(kāi)發(fā)；Virtual DOM；響應(yīng)式的數(shù)據(jù)綁定

（1）jQuery首先獲取到DOM對(duì)象，然后對(duì)DOM對(duì)象進(jìn)行進(jìn)行值的修改等操作；

（2）Vue首先把值和js對(duì)象進(jìn)行綁定，然后修改js對(duì)象值，Vue框架會(huì)自動(dòng)把DOM的值就行更新；

（3）簡(jiǎn)單理解為Vue幫我們做了DOM操作，以后用Vue就需要修改對(duì)象的值和做好元素和對(duì)象的綁定，Vue框架會(huì)自動(dòng)做好DOM相關(guān)操作；

（4）DOM元素跟隨JS對(duì)象值的變化而變化叫做單向數(shù)據(jù)綁定，若JS對(duì)象的值也跟隨著DOM元素。

4、需要學(xué)習(xí)哪些Vue.js框架相關(guān)知識(shí)點(diǎn)？

Vue.js 安裝、Vue.js 目錄結(jié)構(gòu)、Vue.js 起步、Vue.js 模板語(yǔ)法、Vue.js 條件語(yǔ)句、Vue.js 循環(huán)語(yǔ)句、Vue.js 計(jì)算屬性、Vue.js 監(jiān)聽(tīng)屬性、Vue.js 樣式綁定、Vue.js 事件處理器、Vue.js 表單、Vue.js 組件、Vue.js 組件自定義事件、Vue.js 自定義指令、Vue.js 路由、Vue.js 過(guò)渡 動(dòng)畫(huà)、Vue.js 混入、Vue.js Ajax(axios)、Vue.js Ajax(vue-resource)、Vue.js 響應(yīng)接口、Vue.js 實(shí)例等。

Vue.js 是一個(gè)JavaScriptMVVM庫(kù)，一套構(gòu)建用戶界面的漸進(jìn)式框架。以數(shù)據(jù)驅(qū)動(dòng)和組件化的思惟構(gòu)建的，采取自底向上增量開(kāi)辟的設(shè)計(jì)。比擬于Angular.js，Vue.js供給了加倍簡(jiǎn)潔、更易于懂得的API，使得我們快速地上手并應(yīng)用Vue.js。

微信小程序框架解析

微信小程序框架（Vue.js）

小程序開(kāi)發(fā)框架的目標(biāo)是通過(guò)盡可能簡(jiǎn)單、高效的方式讓開(kāi)發(fā)者可以在微信中開(kāi)發(fā)具有原生

APP 體驗(yàn)的服務(wù)。整個(gè)小程序框架系統(tǒng)分為兩部分：邏輯層（App Service）和 視圖層（View）。小程序提供了自己的視圖層描述語(yǔ)言

WXML 和 WXSS，以及基于 JavaScript

的邏輯層框架，并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)，讓開(kāi)發(fā)者能夠?qū)Ｗ⒂跀?shù)據(jù)與邏輯。

在剛接觸微信小程序的時(shí)候，就是官方提供的這個(gè)框架，其實(shí)該框架的思想和vue還是有相似之處，正所謂萬(wàn)變不離其宗。只不過(guò)這個(gè)框架就是直接使用微信小程序所需要的wxml、wxss等文件，而其他框架最終打包生成的文件才是官方所需要的。所以我建議就是初學(xué)者，還是可以先使用或?qū)W習(xí)下該框架，更能直接的了解小程序和學(xué)習(xí)。所以初學(xué)者值得推薦。

基于Vue3+TS+ElementPlus+Qiankun構(gòu)建微應(yīng)用項(xiàng)目

Hello 大家好，這里是Anyin。

最近打算把一個(gè)小型項(xiàng)目（小程序點(diǎn)餐系統(tǒng)）重構(gòu)為微服務(wù)+微應(yīng)用模式，前端的技術(shù)棧打算使用Vue3 + TS + ElementPlus + Qiankun 。這里記錄下我在構(gòu)建基礎(chǔ)微應(yīng)用的過(guò)程。

重構(gòu)后的項(xiàng)目相關(guān)地址：

?后端： Anyin Cloud [1]

?前端基座： Anyin Cloud Parent[2]

?前端微應(yīng)用： Anyin Cloud Base[3]

好了，接下來(lái)，我們來(lái)看看如何基于 Vue3+TS+ElementPlus+Qiankun 構(gòu)建我們的微應(yīng)用項(xiàng)目。

另外說(shuō)下，這里為什么不用 Vite 進(jìn)行構(gòu)建，原因是 Vite 目前結(jié)合 Qiankun 構(gòu)建為應(yīng)用還有點(diǎn)問(wèn)題（采坑了），所以這里就放棄了。

首先，我們使用 vue-cli 創(chuàng)建一個(gè)parent項(xiàng)目:

接著，手動(dòng)選擇我們要添加的組件：

我們選擇以下組件進(jìn)行應(yīng)用的構(gòu)建，使用空格鍵進(jìn)行多選，然后回車(chē)即可：

選擇vue3.x版本

相關(guān)代碼風(fēng)格、路由模式都是使用默認(rèn)，css編譯我們使用less：

相關(guān)編碼規(guī)范我們使用ESLint + Airbnb Config ：

最后，完整的選項(xiàng)如下：

當(dāng)vue-cli幫我們創(chuàng)建好項(xiàng)目，我們進(jìn)入項(xiàng)目查看下項(xiàng)目目錄，如下：

首先，Qiankun的主應(yīng)用是需要安裝依賴的，微應(yīng)用無(wú)需安裝依賴，修改配置即可。這里我們先在主應(yīng)用安裝依賴

接著，進(jìn)行相關(guān)微應(yīng)用配置。我們新增一個(gè) app.ts ，用于記錄所有的微應(yīng)用的入口：

然后，注冊(cè)微應(yīng)用，并導(dǎo)出start方法

導(dǎo)出 start 方法之后，需要在入口處執(zhí)行該方法

對(duì)于整個(gè)界面，我們希望整體的布局是這個(gè)樣子的：

所以，我們?cè)诎惭b ElementPlus 之后，需要做這樣子的布局。

首先，安裝 ElementPlus

接著，在 main.ts 引入 ElementPlus 組件，如下:

然后，創(chuàng)建一個(gè)布局組件 Layout.vue ，如下：

最后，在App.vue注冊(cè)該組件

運(yùn)行起來(lái)呈現(xiàn)的效果如下：

微應(yīng)用的初始化項(xiàng)目同主應(yīng)用，這里就不詳細(xì)說(shuō)明。

微應(yīng)用無(wú)需依賴 Qiankun ，這里我們做一些配置即可。

在 src 目錄下新增一個(gè) public-path.js 文件，內(nèi)容如下：

在 main.ts 引入該文件

新增一個(gè)路由配置文件，這里我們創(chuàng)建對(duì)應(yīng)的路由信息，并且兼容獨(dú)立運(yùn)行，內(nèi)容如下：

接著，修改 main.ts 關(guān)于實(shí)例化的代碼，如下：

這里主要是定義個(gè)渲染的方法，然后暴露Vue實(shí)例，因?yàn)榈认略谖?yīng)用的生命周期的鉤子會(huì)使用到。

對(duì)于微應(yīng)用還需要暴露生命周期的鉤子方法，這樣子主應(yīng)用才能夠識(shí)別，在 main.ts 添加如下方法：

使用 vue 創(chuàng)建項(xiàng)目是沒(méi)有 vue.config.js 文件的，這里我們手動(dòng)創(chuàng)建一個(gè)，并且配置相關(guān)詳細(xì)，代碼如下：

?這里我們導(dǎo)入了 package.json 的 name 字段，因?yàn)檫@里需要和主應(yīng)用配置的 app.ts 文件的 name 字段一致 ? headers 添加跨域配置，因?yàn)橹鲬?yīng)用是通過(guò) fetch 方法來(lái)獲取微應(yīng)用的資源的，而微應(yīng)用是啟動(dòng)在另外一個(gè)端口，所以需要添加跨域配置 ? output 配置了微應(yīng)用的打包格式，主應(yīng)用才能正確識(shí)別微應(yīng)用的一些配置

還記得我們以下這個(gè)圖不？

我認(rèn)為 Header 應(yīng)該是屬于主應(yīng)用，而下面的 Aside 和 Main 都是屬于微應(yīng)用， Aside 塊一般都是用于展示菜單，個(gè)人認(rèn)為各個(gè)微應(yīng)用應(yīng)該各自維護(hù)自己的菜單，而不是交由主應(yīng)用維護(hù)。

所以，在微應(yīng)用，我們還需要處理下左側(cè)的菜單布局。

我們新增一個(gè) Layout.vue 布局文件

至此，Vue3+TS+ElementPlus+Qiankun構(gòu)建微應(yīng)用項(xiàng)目的一個(gè)基本結(jié)構(gòu)我們已經(jīng)處理完成，整體運(yùn)行看下效果：

首頁(yè)

微應(yīng)用

好了，基于 Vue3+TS+ElementPlus+Qiankun 的微應(yīng)用項(xiàng)目基本框架我們已經(jīng)搭建好了，后續(xù)就是慢慢填充一些工具和頁(yè)面了。

相關(guān)源碼地址：

?主應(yīng)用： Anyin Cloud Parent

?微應(yīng)用： Anyin Cloud Base

[1] Anyin Cloud :

[2] Anyin Cloud Parent:

[3] Anyin Cloud Base:

關(guān)于基于vue3.0小程序開(kāi)發(fā)框架和vuejs 小程序的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。