在 Blazor WebAssembly 中使用 Ace 代码编辑器

作者:V君 发布于:2021-8-1 15:02 Sunday 分类:折腾手记

TL;DR for 急着想要知道怎么用的人

[源代码、快速上手文档]

用爽了和不爽都可以回来听我扯扯

最近开始摸 Blazor 的 WebAssembly 前端项目,尽管早就知道有 WebAssembly 的纯前端版本,但那时候似乎还不太稳定的样子,那就等等再用,保持关注,然后最近就发现它似乎已经可以用了。想拿来试试手又不想太 HelloWorld 就得找点事情做,比如博客管理界面啥的。(终于不咕了么)

其实在 Blazor WebAssembly 之前我就一直都盘算着用 Markdown 来撰写文章了,用 Ace 代码编辑器,然后节流发回后端用 Markdig 渲染了再丢回前端呈现预览,现在可好,用 WebAssembly 方式可以把「原生」.NET 库在浏览器运行了,再有就是 Blazor 的组件化以及前端路由,看起来已经能摆脱 js 和 vue 的束缚,当然目前调用 js 库还是得自己写一点胶水代码,将来生态丰富了就不需要自己胶了吧。

那就先从移植组件开始,参考了 Lucky Seven 的如何优雅的移植 JavaScript 组件到 Blazor,一边对着 Ace 的文档引入目前所需的 API。

起初在 index.html 引入 cdn 脚本,后来发现可以用 import 关键字在脚本文件里引入外部脚本,只是要补充一下库基址。于是就搞起了模块化胶水(JSInteropC♯)。使用起来没发现明显的问题,至于性能嘛,前端工程是跑在每个浏览器的,只要不是反应卡顿,都可以忽略掉(❌),可以不太在意性能,把代码写的好看点,这有啥毛病呀(

不扯了,来点类似下集预告之类的吧。整合了 Ace 代码编辑器之后,当然就是搭管理界面的前端工程。找到了个简单易懂的栗子,原来前端路由拦截这么简单。好了打住,欲知后事如何,且听下回分解w

标签: 软件开发 C# 前端工程

评论(0) 引用(0) 浏览(164)

前端新手历险记之在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;


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

阅读全文>>

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

评论(0) 引用(0) 浏览(1739)

在 vue-cli 3.x 创建的项目中启用反向代理

作者:V君 发布于:2018-8-26 21:50 Sunday 分类:折腾手记

TL;DR

1)在项目根目录创建 vue.config.js

2)在文件中指定配置 module.exports -> devServer -> proxy

3)按需增加详细参数 如重写

这次能扯的东西并不多。

主要把时间浪费在咕狗上。什么都不了解就直接搜“vue-cli 反向代理

粗心大意地忘了加上版本号,首先找到的是在config文件夹创建index.js的方法,没起作用。

后来加上版本号去搜索就发现了vue.config.js,再作为关键字就搜索到了官方文档

从目录一眼扫下来就发现了遍地文章提到的devServer配置节。

顺便贴一下本次练习中生效的作为参考:

module.exports = { devServer: { port: 8084, proxy: { '/api': { target: 'http://localhost:7808/', changeOrigin: true, pathRewrite: { '^/api': '' }, } } } }

服务端路由为 /md 在前端配置成 /api/md。 

或许把前后端路径一致然后去掉pathRewrite参数比较好。



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

评论(1) 引用(0) 浏览(1617)

上手VUE前端构建

作者:V君 发布于:2018-8-25 21:46 Saturday 分类:折腾手记

TL;DR

1)官方网站,下载稳定版本的node安装,选择加到环境变量,然后配置淘宝NPM镜像

2)参考官方网站安装vue-cli

3)使用vue-cli创建项目,然后在VsCode编辑代码。


作为刚入门前端新手会扯得很细,不介意的话可以点进来看看

阅读全文>>

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

评论(0) 引用(0) 浏览(631)

Powered by emlog 去你妹的备案 sitemap