閱讀(2.6k) 書簽贊(0) 我要糾錯(cuò)

快應(yīng)用使用vue開發(fā)

2020-08-08 15:28 更新

本節(jié)主要介紹如何使用 Vue 框架來開發(fā)快應(yīng)用，方便開發(fā)者利用自己更熟悉的 DSL（domain-specific language，領(lǐng)域特定語言）特性來加快項(xiàng)目上線。

準(zhǔn)備工作

官方發(fā)布的快應(yīng)用平臺(tái)的 1060 版本內(nèi)部集成了 Vue 框架，使用的版本為：?2.5.3?，這樣開發(fā)者在快應(yīng)用官方技術(shù)規(guī)范基礎(chǔ)上，使用 Vue 開發(fā)出來的項(xiàng)目就可以無縫運(yùn)行；

整體的開發(fā)流程與標(biāo)準(zhǔn) UX 文件后綴的開發(fā)基本一致，使用?hap-toolkit?腳手架初始化一個(gè) Vue DSL 下的快應(yīng)用項(xiàng)目，然后使用相同的命令，完成項(xiàng)目啟動(dòng)、編譯構(gòu)建等工作；

最后將對(duì)應(yīng)的項(xiàng)目產(chǎn)出文件提交到審核平臺(tái)即可；

提示：華為快應(yīng)用平臺(tái)未集成 Vue 框架，因此不支持 Vue DSL 的運(yùn)行；

簡單介紹

Vue 是一個(gè)廣受歡迎的前端開發(fā)框架，規(guī)范的設(shè)計(jì)原則、優(yōu)雅的開放 API、簡單易用的特性，得到開發(fā)者的一致喜愛；

站在底層渲染的角度上，它仍然建立在 DOM 模型之上，為開發(fā)者提供了一套定制的 DSL，就像標(biāo)準(zhǔn)的 UX 文件一樣，也是一種 DSL；

支持 Vue 運(yùn)行在快應(yīng)用平臺(tái)之上，意味著快應(yīng)用的底層設(shè)計(jì)，具備支持任何一種前端 DSL 的能力，甚至：基于小程序衍生出來的新型框架；

開發(fā)者可以通過下面的介紹，了解如何在平臺(tái)上運(yùn)行 Vue 項(xiàng)目，提升項(xiàng)目的移植能力；

生成項(xiàng)目

確保 PC 環(huán)境上，全局或本地安裝 npm 類庫?hap-toolkit?，保證版本號(hào)大于 0.6.1，推薦使用 0.6.4 以上版本。

新建快應(yīng)用項(xiàng)目?quickapp-vue-demo?

npx hap init quickapp-vue-demo --dsl=vue

進(jìn)入到?quickapp-vue-demo?目錄，執(zhí)行?npm i -d?安裝依賴包。安裝完成后執(zhí)行可以開啟兩個(gè)終端執(zhí)行

npx hap servernpx hap watch --include-dsl-from-lib

打開調(diào)試器可以看到以下結(jié)果

展示效果

項(xiàng)目開發(fā)

在 UX 文件中引入的各種接口可以放心遷移至 Vue 文件中，接口的使用與 UX 一致。除此之外，使用 Vue 開發(fā)快應(yīng)用的時(shí)候需要注意以下幾點(diǎn)。

頁面生命周期

在 Vue 的原始的生命周期的基礎(chǔ)上，增加了底層原生能力的生命周期 ?onInit?、?onShow?、?onHide?、?onMenuPress?、?onBackPress?、?onRefresh?、?onConfigurationChanged?。

語法

請(qǐng)不要在 Vue 語法中混用快應(yīng)用原始語法，包括 template 標(biāo)簽內(nèi)的各種綁定語法（for、if 等）以及block等標(biāo)簽。如使用slot等標(biāo)簽請(qǐng)遵循 Vue 的使用規(guī)則。

原生能力

依舊可以在方法內(nèi)部調(diào)用?this.$app?獲取到 App 相關(guān)信息、?this.$page.setTitleBar?修改 titlebar 文字；也可以執(zhí)行特定 DOM 元素的方法，比如獲取元素并聚焦?this.$refs.input.focus()?。這些原生能力在 Vue 中得以保留，可以在放心使用。

構(gòu)建項(xiàng)目

項(xiàng)目打包生成 rpk 后綴文件，與標(biāo)準(zhǔn) UX 文件一致，使用：npm run build與npm run release分別完成打包；

注意提示

暫不支持樣式 scoped 配置

使用 Vue 開發(fā) web 應(yīng)用的時(shí)候也會(huì)發(fā)生樣式覆蓋的問題，所以在組件內(nèi)部會(huì)使用 scoped 進(jìn)行隔離

目前快應(yīng)用暫不支持屬性選擇器樣式，使用 scoped 編譯會(huì)出錯(cuò)

所以建議開發(fā)者使用 css 模塊化bem進(jìn)行解決?；蛘呷忠茫ㄈ绻謽邮教嘁矔?huì)產(chǎn)生性能問題，建議使用頁面和組件模塊化 css）

展示效果

如何引入插件，如：less

有的開發(fā)者希望引入 less 預(yù)編譯 css。

hap-toolkit目前支持自定義resolve、module和plugins配置，這里演示如何讓 Vue 項(xiàng)目支持 less。

在quickapp-vue-demo的根目錄新增文件hap.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
      },
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader',
            options: {
              hotReload: false, // 關(guān)閉熱重載
              compilerOptions: {
                preserveWhitespace: false
              }
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
      filename: '[name].css.json'
    })
  ]
}

由于添加了依賴，所以需要安裝。命令行執(zhí)行

npm i -D less-loader less

命令行再次執(zhí)行

npx hap servernpx hap --watch --include-dsl-from-lib

在單文件index.vue內(nèi)的 style 標(biāo)簽使用lang="less"正常運(yùn)行

注意，目前的 hap.config.js 支持 resolve、module 和 plugins 字段的配置，語法同 webpack

快應(yīng)用 使用vue開發(fā)