mp-vue編譯指令如何使用

本文小編為大家詳細介紹“mp-vue編譯指令如何使用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“mp-vue編譯指令如何使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

首先我們來看一下不同文件的生成

"scripts": {
  "dev:wx": "node build/dev-server.js wx",
  "start:wx": "npm run dev:wx",
  "build:wx": "node build/build.js wx",
  "dev:swan": "node build/dev-server.js swan",
  "start:swan": "npm run dev:swan",
  "build:swan": "node build/build.js swan",
  "dev:tt": "node build/dev-server.js tt",
  "start:tt": "npm run dev:tt",
  "build:tt": "node build/build.js tt",
  "dev:my": "node build/dev-server.js my",
  "start:my": "npm run dev:my",
  "build:my": "node build/build.js my",
  "dev": "node build/dev-server.js wx",
  "start": "npm run dev",
  "build": "node build/build.js wx"
},

　　接下來我們就看一看如何通過指令來實現多中類型小程序的生成的。

　　首先我們通過看到bulid.js文件，因為通過上面我們看到通過bulid.js文件為入口的，然后通過配置文件，判斷指令的后綴入wx之類，生成對應的文件后綴。

var fileExtConfig = {
    swan: {
        template: 'swan',
        script: 'js',
        style: 'css',
        platform: 'swan'
    },
    tt: {
        template: 'ttml',
        script: 'js',
        style: 'ttss',
        platform: 'tt'
    },
    wx: {
        template: 'wxml',
        script: 'js',
        style: 'wxss',
        platform: 'wx'
    },
    my: {
        template: 'axml',
        script: 'js',
        style: 'acss',
        platform: 'my'
    }
}

通過后綴進行區分文件生成對應文件的后綴名

生成文件代碼

index: path.resolve(__dirname, `../dist/${fileExt.platform}/index.html`),
assetsRoot: path.resolve(__dirname, `../dist/${fileExt.platform}`),

Vue的優點

Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。

讀到這里，這篇“mp-vue編譯指令如何使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。