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

在 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) 浏览(55)

上手VUE前端构建

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

TL;DR

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

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

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


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

阅读全文>>

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

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

[成功]在element-ui表单选择器组件实现鼠标移入自动展开

作者:V君 发布于:2017-12-20 16:22 Wednesday 分类:挖坑经验

前些天一直在做服务器后端, 最近才开始实现界面, 

自从被猫同事推荐了基于 VUE 的 element-ui 之后发现: 原来这样开发前端也挺舒服的.

只是 element-ui 的实现细节仍然不到位, 比如选择器或级联下拉不支持鼠标移入就自动展开.

官方 hub 上的 issues(4676,4682) 貌似也没人理,于是自己补了一下刀.

像这样:

代码写得有点啰嗦,就不直接显示在条目列表了,进来看

阅读全文>>

标签: javascript Web技术 VUE

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

Powered by emlog 去你妹的备案 sitemap