随着公司终端多个项目切换到weex开发方案,这些项目中一些公共模块和组件都需要进行统一管理,以前直接使用源代码复制存在着许多缺陷,比如公共库中源代码修改困难、import路径需要多次修改、调用时每次都需要注册组件等多个问题。本文主要是研究通过npm来管理项目中vue.js的组件以及一些常用的公共方法,简化项目开发一些工作。
在Github上创建模块代码仓库
首先在github上创建公共模块库,如下图:
将创建好的github克隆下来,使用weexpack来创建一个weex项目。如果没有安装weexpack,先使用npm install -g weexpack --registry=https://registry.npm.taobao.org
命令进行安装。
将生成的代码复制到git目录中,在项目目录中运行npm install
安装依赖。安装完依赖后项目目录如下:
BRWeexComponents
├── README.md
├── android.config.json
├── config.xml
├── node_modules
├── hooks
│ └── README.md
├── ios.config.json
├── package.json
├── platforms // 平台模版目录
├── plugins // 插件下载目录
│ └── README.md
├── src // 业务代码(vue文件)目录
│ └── index.vue
├── start
├── start.bat
├── tools
│ └── webpack.config.plugin.js
├── web
│ ├── index.html
│ ├── index.js
│ └── js
│ └── init.js
└── webpack.config.js
如果要使用原生项目,可以运行weexpack platform add ios
或者weexpack platform add android
来添加对应的平台支持。
关于weexpack更多内容可以参考weexpack说明。
添加需要发布的模块
我们在项目中添加我们将要发布的模块,包括组件、指令、混合以及公共方法等内容,代码目录如下:
我们首先在项目中新建一个简单的组件v-base-button
,在components中新建一个v-base-button.vue文件,内容如下:
<template>
<div class="base-button" v-on:click="clickAction"></div>
</template>
<script>
export default {
data: {
},
methods