vue移動端項目代碼拆分的示例分析-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關vue移動端項目代碼拆分的示例分析的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

從網(wǎng)站建設到定制行業(yè)解決方案，為提供成都網(wǎng)站設計、網(wǎng)站建設服務體系，各種行業(yè)企業(yè)客戶提供網(wǎng)站建設解決方案，助力業(yè)務快速發(fā)展。成都創(chuàng)新互聯(lián)公司將不斷加快創(chuàng)新步伐，提供優(yōu)質(zhì)的建站服務。

首先代碼拆分應該保證本地開發(fā)的時候只有一套代碼，提取所有公共頁面，并且分別提取小程序和app的獨立JS方法，避免開發(fā)完小程序端vue，然后粘貼復制到App端的繁瑣操作。
直接看圖最清晰，拆分前目錄結構：

拆分后目錄結構：

拆分前項目目錄結構

拆分后項目目錄結構

目錄拆分好之后，開始拆分代碼。由于部署到生產(chǎn)環(huán)境的時候只能App端部署App端，小程序端部署小程序端，那么在本地開發(fā)過程中為了調(diào)試不同端的頁面就需要進行路由配置，所以對路由配置文件route.list.js做了修改：
拆分代碼前，route.list.js中將所有頁面JS文件的相對路徑放在一個數(shù)組里：

define(
 [
  ‘../xxx/xxx/user.js',
  ‘../xxx/xxx/goods.js',
  …
  …
 ]
)

拆分后，route.list.js中按public、mobile_app、wechat_mini 分別定義數(shù)組，這樣如果現(xiàn)在正在開發(fā)小程序端的vue，那么則將public和wechat_mini的數(shù)組合并到一起，開發(fā)app端的vue則將public和moblie_app的數(shù)組合并到一起，合并數(shù)組使用ES6擴展運算符（…）。

var public_goods = [];
var mini_goods = [];
var app_goods = [];
var fun = (isWechatMini) => {
  if(isWechatMini){
    return [
     …public_goods,
     …mini_goods
    ]
  } else {
    return [
     …public_goods,
     …app_goods
    ]
  }
}
define(
  fun(true)
)

將公共部分和獨立部分的頁面拆分之后，進一步分析代碼：App端和小程序端相互獨立的大多是支付功能，分享功能等涉及到需要原生處理的地方，并且會在多個頁面，多個業(yè)務中出現(xiàn)，那么就將App獨立的vue代碼拆分到一個公共JS中（app-common.js），將小程序獨立的vue代碼拆分到一個公共JS中（mini-common.js），在需要的頁面中引入即可。就商品購買支付功能為例：

拆分前：

define([‘vue', ‘a(chǎn)xios', ‘text!/File/Html/goods/goodsPay.html'], (vue, axios, Template) => {
  var App = {
   data() {

   },
   template: Template,
   mounted() {

   },
   methods: {
     pay(){
       if(isWechatMini){
         //這里是小程序支付
       } else {
         //這里是App支付
       }
     }
   }
  };

  return{
    app: App
  };
  
});

業(yè)務復雜的情況下，會有多層if else，代碼太冗余。

拆分后：

小程序端的商品支付購買頁面：

define([‘vue', ‘a(chǎn)xios', ‘text!/File/Html/mini/goods/goodsPay.html', ‘mini-common'], (vue, axios, Template, common) => {
  var App = {
    data() {

    },
  template: Template,
  mounted() {

  },
  methods: {
     pay(){
       //調(diào)用mini-common中定義的支付方法
       common.pay();
     }
  }
 };

 return{
  app: App
 };
  
});

App端的商品購買支付頁面只需要將引入的JS換成app-common即可：

define([‘vue', ‘a(chǎn)xios', ‘text!/File/Html/app/goods/goodsPay.html', ‘a(chǎn)pp-common'], (vue, axios, Template, common) => {
  var App = {
    data() {
    },
  template: Template,
  mounted() {

  },
  methods: {
    pay(){
      //調(diào)用app-common中定義的支付方法
      common.pay();
    }
   }
  };
  return{
   app: App
  };
  
});

本地開發(fā)完后，部署到服務器只需要將public目錄下和wechat_mini下的文件復制粘貼到打包工具打包即是小程序端的代碼，public和mobile_app打包即是app端的代碼。

感謝各位的閱讀！關于“vue移動端項目代碼拆分的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

當前題目：vue移動端項目代碼拆分的示例分析-創(chuàng)新互聯(lián)
當前URL：http://www.bm7419.com/article16/dpchdg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供服務器托管、搜索引擎優(yōu)化、建站公司、云服務器、虛擬主機、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)