封装 Ace Editor Vue 组件，以及了解发布 npm 包

封装的组件，源代码点这里传送

只关注 npm 发包，可以点这里传送

只关注如何给项目增加 badge，可以点这里传送

封装给 vue 用的 ace editor

Ace Editor: https://github.com/ajaxorg/ace

封装依赖包 brace: https://github.com/thlorenz/brace

源码：

const ace = require('brace'),
  defaultConfig = { // Editor 默认配置
    lang: 'json', // 语言
    theme: 'xcode', // 编辑器主题
    options: { // Ace Editor 配置
      useSoftTabs: true, // 默认 2 个空格缩进
      tabSize: 2
    }
  };
let vm;
module.exports = {
  template: '<div :style="{height: height, width: width}"></div>',
  computed: {
    editorConfig() { // 这里主要是防止 props `config` 中只配置了一部分，无法使用默认值
      return Object.assign({}, defaultConfig, this.config);
    }
  },
  props: {
    value: {
      type: String,
      required: true
    },
    height: true,
    width: true,
    fontSize: {
      type: Number,
      default: 12
    },
    config: {
      type: Object,
      default: function () {
        return defaultConfig
      }
    }
  },
  data() {
    return {
      editor: null
    }
  },
  beforeDestroy: function () {
    this.editor.destroy();
    this.editor.container.remove();
  },
  mounted() {
    let vm = this,
      {
        lang,
        theme
      } = this.editorConfig,
      editor;

    lang === 'html' && require('brace/ext/emmet');
    require('brace/ext/language_tools');
    require('brace/mode/' + lang);
    require('brace/theme/' + theme);
    require('brace/snippets/' + lang);

    this.editor = editor = ace.edit(this.$el);

    editor.setTheme('ace/theme/' + theme);
    editor.setOption("enableEmmet", true);
    editor.getSession().setMode('ace/mode/' + lang);
    editor.$blockScrolling = Infinity;
    editor.setFontSize(this.fontSize);
    editor.setValue(this.value);
    this.editorConfig.options && editor.setOptions(this.editorConfig.options);

    this.$emit('init', editor);

    editor.on('change', _ => {
      vm.$emit('input', editor.getValue());
    });
  }
}
复制代码

npmjs.org注册

npm 发包

0. 有一个源码项目
1. 官网注册账号
2. 执行下面的命令（注意设置要 ignore 的文件，以及完善 package.json 中的信息）

npm adduser
# 用户名 密码

npm publish
# 完成
复制代码

使用的话就 npm install xxx。

badge

从这里获取：http://shields.io/ , 它能提供build（集成、测试等信息）、version（版本）、自定义的徽章，比如：

上面的代码如下：

# 自定义
![](https://img.shields.io/badge/vue-%3E2.0-brightgreen.svg)
# npm 版本
![](https://img.shields.io/npm/v/ace-editor-on-vue.svg)
# npm 下载数
![](https://img.shields.io/npm/dt/ace-editor-on-vue.svg)
# 项目根目录有 LICENSE 文件
![](https://img.shields.io/github/license/NoName4Me/ace-editor-on-vue.svg)
复制代码