mz-util-demo v1.0.0

环境要求

• node:v7.4.0

编码调试

• 终端执行：sh dev.sh

打包发布

• sh package.sh
• npm version patch
• npm publish

安装使用

• npm install vue-mzui -D

注意事项

• 在引用驼峰命名的目录时，如popupInput组件，正确写法

  import {popupinput} from 'vue-mzui';//注意这里不要写成popupInput，驼峰写法会导致去寻找popup-input目录

版本号规范

• 版本号案例为 v1.2.3 格式
• 知识普及 --- package.json文件内npm模块的版本引用号解释:
  • ~1.2.3:代表安装1.2.3 ~ 1.2.x 之间的最新版本,不会安装1.3打头的版本
  • ^1.2.3:代表安装1.2.3 ~ 1.x.x 之间的最新版本，不会安装2.打头的版本
• 按照以上的情况，默认我们npm install后都会配置的是 ^ 符号的版本号，所以安全期间，我们版本命名规则如下：
  • 当修改组件后，不需要原工程进行修改，可上下兼容所有的版本时：
    • 升级第三位版本号：小改动（可更新可不更新的）
    • 升级第二位版本号：修复逻辑BUG（无特殊情况必须更新的）
  • 当修改组件后，需要原工程进行修改的，不兼容旧版本的，则需要升级第一位版本数字号

修改迭代规范

• 任何修改必须从master拉取分支，修改测试后才能合并至master

• 分支命名规范

  • 修改bug:放入 hotfix 目录下
  • 增加组件：放入 feature 目录下

使用方法

import引入

.babelrc文件内增加插件配置

{
  "plugins": [
      [ "component", 
        [
          { "libraryName": "vue-mzui", "style": true }
        ]
      ]
    ],
}

以input组件为例

• 引入：首先引用组件文件js和css样式，以及公共样式库commonCss.css

//index.js
  import 'vue-mzui/lib/commonCss/style.css';//引用公共样式文件
  import {input} from 'vue-mzui';
  import {popupinput} from 'vue-mzui';//注意这里不要写成popupInput，驼峰写法会导致去寻找popup-input目录

• 初始化

//index.html
<mz-input></mz-input>

//index.js
new Vue({
  el:"#app",
  components:{
      mzInput: input,//注意这里单组件的形式引入和集合包引入编码是不一样的
  },
 });

以bundle集合包为例

• 引入：首先引用组件文件js和css样式，以及公共样式库commonCss.css

//index.js
  import 'vue-mzui/lib/commonCss/style.css';//引用公共样式文件
  import {bundle} from 'vue-mzui';

• 初始化

//index.html
<mz-input></mz-input>

//index.js
new Vue({
  el:"#app",
  components:{
      mzInput: bundle.input,//注意这里单组件的形式引入和集合包引入编码是不一样的
  },
 });

script标签引入

以input组件为例

• 引入：首先引用组件文件js和css样式，以及公共样式库commonCss.css

<link rel="stylesheet" type="text/css" href="node_modules/mzui/dist/css/commonCss.css">
<link href="node_modules/mzui/dist/css/input.css" rel="stylesheet">
<script type="text/javascript" src="node_modules/mzui/dist/js/input.js"></script>

• 初始化

//html
<mz-input></mz-input>

//js
new Vue({
  el:"#app",
  components:{
      mzInput: mzui.input.default,//注意这里单组件的形式引入和集合包引入编码是不一样的
  },
 });

以bundle集合包为例

• 引入：首先引用组件文件js和css样式，以及公共样式库commonCss.css

<link rel="stylesheet" type="text/css" href="node_modules/mzui/dist/css/commonCss.css">
<link href="node_modules/mzui/dist/css/bundle.css" rel="stylesheet">
<script type="text/javascript" src="node_modules/mzui/dist/js/bundle.js"></script>

• 初始化

//html
<mz-input></mz-input>

//js
new Vue({
  el:"#app",
  components:{
      mzInput: mzui.bundl
      e.input, //注意这里单组件的形式引入和集合包引入编码是不一样的
  },
 });