教程 框架 组件 接口 其他

使用 Vue开发快应用 内测

本节主要介绍如何使用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 server

npx hap watch

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

项目开发

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

页面生命周期

在Vue的原始的生命周期的基础上,增加了底层原生能力的生命周期 onInitonShowonHideonMenuPressonBackPressonRefresh

语法

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

原生能力

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

构建项目

项目打包生成rpk后缀文件,与标准UX文件一致,使用:npm run buildnpm run release分别完成打包;

注意提示

暂不支持样式scoped配置

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

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

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

如何引入插件,如:less

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

hap-toolkit目前支持自定义resolvemoduleplugins配置,这里演示如何让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 server

npx hap --watch

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

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

相关参考

联系我们

如果有任何疑问,请提交ISSUE

条匹配 "" 的结果

    没有搜索到与 "" 相关的内容