前端新手历险记之在VUE项目中使用Ace编辑器(brace)和一些TypeScript知识点

作者：V君发布于：2018-9-8 23:52 Saturday 分类：折腾手记

TL；DR

▉ 将Ace编辑器引入项目

1) $npm install brace

2) $npm install --save @types/ace

3) ts:import * as ace from 'brace';

4) ts:import 'brace/...";

▉ TypeScript类型转换，对于 var dom = this.$refs["editor-dom"] 有两种方式

1) ts:ace.edit(dom as HTMLElement);

2) ts:ace.edit(<HTMLElement>dom);//这种方式会使tsx编译器报错标签未关闭，但实际能用

▉ 在TypeScript类中声明可空属性

在标识符后面加感叹号否则必须在构造时初始化，例子：

ts:private editor!: ace.Editor;

虽然这次的收获不多，但还是花了不少时间查资料来弄懂，得好好扯一扯：

终于到了不用跑公司的周末，接下来可以继续学习前端构建了。

继续之前发表的博文话题，依然是在VUE脚手架创建的项目上搞事情。

一直都想自己实现一个博客系统，虽然已经确定要用markdown来作为文章主体承载方式。

但还需要一个可靠的在线文本编辑器，把“web code editor”喂狗之后第一个跳出来的就是ace。

那就选它吧，看看怎么导入项目中来。

一开始的时候由于不知道brace和ace的关系，就一个劲地想把ace导入项目

分别尝试安装了好几个有ace字眼的包到项目里然后试图导入，结果没有一个能行。

接下来转移目标，找找看有没有别人封装好的VUE组件，拿过来用岂不是爽歪歪，

然而并不爽，但发现众多VUE组件封装的ace编辑器都引用了brace而不是ace。

查了才知道ace太过完整，甚至需要服务端支持，就有了brace这个纯前段的ace，

如其名“browserify compatible version of the ace editor”。

明确了要导入的东西之后发现它作为一个npm包是一个js库，在TS中使用只能作为any，

需要引入类型描述文件，这里又绕了一大圈，因为上述原因对于ace字样的包不去看，

一个劲地想找brace类型描述文件，最后还是用上了最初发现的@types/ace包。

在将类型描述文件和npm包搭配着导入到项目中之前还以不同的错误姿势尝试了半天，

用各种摸不着头脑的关键字喂狗，最后总算是参考着github上的文档将类型引入。

至此ace编辑器总算可以呈现在浏览器中。

然而要使用ace的其它功能还得用不同的姿势导入其他定义。

这次历险到此结束 XD

标签: 软件开发 Web技术 VUE 前端工程

« 吐吐苦水: 收集一些老项目中不合理的设计与编码,给后来开发人员添麻烦的例子 | 在 vue-cli 3.x 创建的项目中启用反向代理»

引用地址:

发表评论：

V君的博客

中二死宅无脑码农　中二御宅コーダー　Chuuni Otaku Coder　　　　　　　　TOPCL = The Open Productivity Creative Laboratory ?