augurit

augurit vue 组件

项目背景

在日常开发中，我们经常会在项目中写很多组件，有些是通用的有些是非常业务的，提炼成对应的 npm 仓库便于复用；

项目安装

安装

npm install augurit

组件使用

import augurit from 'augurit'
Vue.use(augurit)

• 其他依赖按需引入

<template>
  <div class="hello">
    <Msg :name="'test'"></Msg>
    <AgTest :name="'test2222'"></AgTest>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
}
</script>

组件开发

• svn下载项目 components文件夹下开发组件

<template>
    <div>
        <el-button type="primary">主要按钮</el-button>
        <span class="account">{{name}}</span>
    </div>
</template>
<script>
    export default {
        name:'AgTest',
        data () {
            return {}
        },
        props:{
            name:{
                type:String,
                default:()=>{
                  return 'npmtest'
                }
            }
        },
        methods: {
 
        }
    }
</script>

组件打包

• 需要打包的文件 augurit-ui文件夹下index.js

import Msg from "./../components/ag-msg"
import AgTest from "./../components/ag-test"

const components = {
    Msg,
    AgTest
};
const install =(Vue) => {
    Object.keys(components).forEach(key => {
        Vue.component(key, components[key]);
    });
}
export default install

• 打包

npm run augurit-ui

• 打包后文件夹augurit-dist

组件发布

• 选择 augurit-ui.umd.min.js ，复制到 packages 替换掉index.js，更改版本号
• 切换到 packages 文件夹下

npm publish

发布完成