前端新手历险记之在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) 浏览(1554)

在 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 前端构建

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

上手VUE前端构建

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

TL；DR

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

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

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


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

阅读全文>>

标签: 软件开发 Web技术 VUE 前端构建

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

Powered by emlog 去你妹的备案 sitemap