封装的组件,源代码点这里传送
只关注 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 发包
- 有一个源码项目
- 官网注册账号
- 执行下面的命令(注意设置要 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)
- 复制代码