自定义Vue组件的混合模式

目前在dev2.0.4及以上版本引入了混合模式自定义vue组件开发的功能,支持两种模式

  • 直接在混合模式before生命周期引入的js中使用Vue.component注册组件并使用
  • 在我们提供的项目中进行单文件的开发,然后打包生成js,通过混合模式引入

yml配置

- model: 'vue'
  label: 混合
  template: 'wau-demo-one' #在vue中定义的标签
  conf: #此处作为示例
    table_header: '{%table_header%}'
    request: 
      model: ajax
      url: '/platform/plugin/get_list'
      method: 'POST'

1、直接引入方式

在生命周期的before引入js,再通过Vue.component注册。

Vue.component方法见Vue组件开发
代码示例见 混合模式页面 以及 js写法

2、单文件组件打包后引入

在我们提供的工程wii-external(点击下载)中编写vue单文件组件,并进行打包生成js,在通过生命周期的before引入。

打包使用rollup打包。目录结构与vue-cli标准结构一致,组件需要写在src/components下。
工程中提供了components/text/index.vue的作为示例,以及demoone作为示例,打包入口文件pack/index.js

工程下载下来以后需要安装
  • 安装命令 npm install
  • 运行命令 npm run dev
  • 打包命令 npm run pack

  • Vue单文件开发官方文档

results matching ""

    No results matching ""