【技術(shù)教程】【微碼開發(fā)】微碼開發(fā)入門 - Vue 模板開發(fā)

在打開微碼vue模板后會自動(dòng)安裝項(xiàng)目依賴：

安裝完依賴后，資源管理器的 “WECODE TOOLS”會出現(xiàn)菜單，先來看下vue模板的結(jié)構(gòu)：

123456789101112131415161718192021222324252627282930313233|——?build│???├──?common?????????????????????????//?JS?API公共文件目錄??????????├──?/html/???????????????????//?html文件??????????├──?/js/?????????????????????//?JS?API腳本文件??????????├──?/css/????????????????????//?公共組件庫樣式文件??????????├──?/assets/?????????????????//?資源目錄???????????????├──?/images/????????????//?公共圖片資源???????????????├──?/media/?????????????//?公共媒體資源│???└──?apps???????????????????????????//?開發(fā)的We碼應(yīng)用包文件目錄??????????├──?/123456789012345/????????//?應(yīng)用名稱???????????????├──?/production/????????//?應(yīng)用的構(gòu)建環(huán)境。打包時(shí)，cli?會打包該文件夾下的文件????????????????????├──?/html/?????????//?應(yīng)用的html文件????????????????????├──?/js/???????????//?應(yīng)用的js文件????????????????????├──?/css/??????????//?應(yīng)用的css樣式文件├──?package.json???????????????????????//?node相關(guān)環(huán)境的配置文件├──?public?????????????????????????????//?靜態(tài)資源目錄，內(nèi)容會直接拷貝到打包目錄中├──?scripts????????????????????????????//?編譯相關(guān)├──?src????????????????????????????????//?源代碼目錄│???├──?common?????????????????????????//?公共資源，包括?css/js??等│???├──?components?????????????????????//?組件│???├──?config?????????????????????????//?配置項(xiàng)，包括?api?等│???├──?i18n???????????????????????????//?國際化│???????├──?en_US??????????????????????//?英文配置信息│???????└──?zh_CN??????????????????????//?中文配置信息│???├──?router?????????????????????????//?路由│???├──?store??????????????????????????//?store，頁面數(shù)據(jù)按模塊存儲│???├──?utils??????????????????????????//?提供一些小工具│???├──?views??????????????????????????//?頁面│???├──?App.vue????????????????????????//?主頁│???├──?index.html?????????????????????//?主頁?html│???├──?main.js????????????????????????//?webpack打包入口├──?test???????????????????????????????//?jest測試集└──?vue.config.js??????????????????????//?vue-cli3.0?配置文件

點(diǎn)擊“本地調(diào)試”，將會開始編譯運(yùn)行項(xiàng)目，最后將在默認(rèn)瀏覽器打開首頁 ( src/views/Home.vue )。

到這里，項(xiàng)目已經(jīng)跑起來了，可以開始加入我們想要的功能了。

我們來看一下Home.vue：

123456789101112131415161718192021222324252627282930313233343536373839??.App?{????padding:?10px;??}

這個(gè)就是標(biāo)準(zhǔn)的vue開發(fā)模板了，從上到下依次是模板、腳本、樣式，這里我們就不問為什么了，記住每個(gè)頁面都用這樣的結(jié)構(gòu)就可以了，之前說過react是通過state來存儲頁面數(shù)據(jù)的，那么vue呢，我們看到內(nèi)置的data方法return的內(nèi)容就是頁面數(shù)據(jù)了，可以在模板中使用。

1data()?{???return?{};?}

接下來我們來實(shí)現(xiàn)一個(gè)簡易版的新聞功能，它有一個(gè)列表頁、詳情頁，在詳情頁會有一個(gè)分享功能，用于分享到好友或者群

接下來設(shè)計(jì)主頁，也就是列表頁，src/views/Home.vue?。

首先來改下頁面標(biāo)題，在created函數(shù)中進(jìn)行操作：

1created()?{???window.HWH5.navTitle({?title:?'示例新聞列表'?});?}

加入一個(gè)導(dǎo)航欄，這里使用官方提供的UI組件（https://open.welink.huaweicloud.com/wecode/docs/dev/ui_cloud/navbar/navbar.html?v=1547690385）?。

把???article{?padding:?10px;?}??article?.info{?font-size:?0.28rem;?font-weight:?normal;?margin:?0?0?0.12rem?0;?color:?#888888;?}??article?p{?text-indent:?2em;?margin:?0.6rem?0;?}??article?img{?width:?100%;}??.share-btn{?display:?inline-block;?background:?#ff6f6f;?width:?2rem;?height:?2rem;?text-align:?center;?color:?#fff;?font-size:?2rem;?line-height:?2rem;?padding:?5px;?border-radius:?50%;?position:?fixed;?right:?10px;?bottom:?50px;?}

看下效果:

在 src/routes/News/index.js 中給列表加上鏈接，指向詳情頁：

123456789101112?????????????????????{????????console.log('分享發(fā)生異常',?error);??????})????}??}}

然后給分享按鈕綁定這個(gè)方法：

1???+?