阅读(2.2k) 书签赞(0) 我要纠错

快应用使用vue开发

2020-08-08 15:28 更新

本节主要介绍如何使用 Vue 框架来开发快应用，方便开发者利用自己更熟悉的 DSL（domain-specific language，领域特定语言）特性来加快项目上线。

准备工作

官方发布的快应用平台的 1060 版本内部集成了 Vue 框架，使用的版本为：2.5.3，这样开发者在快应用官方技术规范基础上，使用 Vue 开发出来的项目就可以无缝运行；

整体的开发流程与标准 UX 文件后缀的开发基本一致，使用hap-toolkit脚手架初始化一个 Vue DSL 下的快应用项目，然后使用相同的命令，完成项目启动、编译构建等工作；

最后将对应的项目产出文件提交到审核平台即可；

提示：华为快应用平台未集成 Vue 框架，因此不支持 Vue DSL 的运行；

简单介绍

Vue 是一个广受欢迎的前端开发框架，规范的设计原则、优雅的开放 API、简单易用的特性，得到开发者的一致喜爱；

站在底层渲染的角度上，它仍然建立在 DOM 模型之上，为开发者提供了一套定制的 DSL，就像标准的 UX 文件一样，也是一种 DSL；

支持 Vue 运行在快应用平台之上，意味着快应用的底层设计，具备支持任何一种前端 DSL 的能力，甚至：基于小程序衍生出来的新型框架；

开发者可以通过下面的介绍，了解如何在平台上运行 Vue 项目，提升项目的移植能力；

生成项目

确保 PC 环境上，全局或本地安装 npm 类库hap-toolkit，保证版本号大于 0.6.1，推荐使用 0.6.4 以上版本。

新建快应用项目quickapp-vue-demo

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

进入到quickapp-vue-demo目录，执行npm i -d安装依赖包。安装完成后执行可以开启两个终端执行

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

打开调试器可以看到以下结果

展示效果

项目开发

在 UX 文件中引入的各种接口可以放心迁移至 Vue 文件中，接口的使用与 UX 一致。除此之外，使用 Vue 开发快应用的时候需要注意以下几点。

页面生命周期

在 Vue 的原始的生命周期的基础上，增加了底层原生能力的生命周期 onInit、onShow、onHide、onMenuPress、onBackPress、onRefresh、onConfigurationChanged。

语法

请不要在 Vue 语法中混用快应用原始语法，包括 template 标签内的各种绑定语法（for、if 等）以及block等标签。如使用slot等标签请遵循 Vue 的使用规则。

原生能力

依旧可以在方法内部调用this.$app获取到 App 相关信息、this.$page.setTitleBar修改 titlebar 文字；也可以执行特定 DOM 元素的方法，比如获取元素并聚焦this.$refs.input.focus()。这些原生能力在 Vue 中得以保留，可以在放心使用。

构建项目

项目打包生成 rpk 后缀文件，与标准 UX 文件一致，使用：npm run build与npm run release分别完成打包；

注意提示

暂不支持样式 scoped 配置

使用 Vue 开发 web 应用的时候也会发生样式覆盖的问题，所以在组件内部会使用 scoped 进行隔离

目前快应用暂不支持属性选择器样式，使用 scoped 编译会出错

所以建议开发者使用 css 模块化bem进行解决。或者全局引用（如果全局样式太多也会产生性能问题，建议使用页面和组件模块化 css）

展示效果

如何引入插件，如：less

有的开发者希望引入 less 预编译 css。

hap-toolkit目前支持自定义resolve、module和plugins配置，这里演示如何让 Vue 项目支持 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, // 关闭热重载
              compilerOptions: {
                preserveWhitespace: false
              }
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
      filename: '[name].css.json'
    })
  ]
}

由于添加了依赖，所以需要安装。命令行执行

npm i -D less-loader less

命令行再次执行

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

在单文件index.vue内的 style 标签使用lang="less"正常运行

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

快应用 使用vue开发