2019-11-19 vue-cli+typescript 开发web应用心得与bug
一、vue-cli新建项目及打包优化
vue-cli官网:https://cli.vuejs.org/zh/
在本次的项目中,由于使用了vue-cli脚手架,在搭建项目的过程中可以说是方便了不少,没有了配置webpack的痛苦。
不过,在此之中也有些坑要注意就是了。
例如风格问题。vue-cli默认的风格是2空格缩进、有分号风格,而本人习惯于4空格缩进、无分号风格,因此需要修改 .eslint.js 文件来重新约束风格。
1 | // .eslint.js |
第二个问题就是vue.config.js的配置,开发阶段本人希望启动时能够自动打开浏览器,而且希望自定义端口。因此要在项目根目录的vue.config.js中添加如下代码
1 | //vue.config.js |
之后在build生成生产环境用的dist文件时,发现还额外生成了很多map文件,生产环境用不到,因此去掉。
1 | //vue.config.js |
打包后发现js和css文件有些大,因此希望通过cdn来加载依赖,减少打包后的体积。
1 | //vue.config.js |
1 | <!-- index.html中的head部分添加如下代码 --> |
二、Vuetify1.5升2.x的坑
官网:https://vuetifyjs.com/zh-Hans/
这个坑的点在于Vuetify出现了版本不兼容的更新。
super plugin这个项目刚开始写的时候Vuetify还是1.5.x,后来重制时才发现出现了版本升级,理所应当的是出现了不兼容的更新。
不兼容的问题如下:
Text alignment 问题
- 使用text-sm-center貌似无法正常居中,但使用text-center就可以。考虑到本项目的文字排版在手机端与电脑端一致,因此就用text-center
v-btn 问题
扁平样式属性由flat改为text
block属性改为了
1
min-width: 100% !important;
结果导致在 v-card-actions 中两个按钮无法并排放(也就是各占一半的行)
无奈之下只能自己写样式覆盖:
1
min-width: auto !important;
v-card v-card-text
- 这个的问题是字体颜色不对,默认变为了灰色,因此自己写样式覆盖
v-card-title问题
不知道为什么导致了h1添加样式后不会变化,因此改成p标签或span标签
1
2
3<v-card-title>
<h1 class="display-1">hello world</h1>
</v-card-title>
v-data-table
v-data-table相比之前也有很大变化,之前的写法也是完全不行了,这里给出一个参考写法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67<template>
<div>
<v-data-table
:headers="headers"
:items="list"
:items-per-page="10"
:sort-desc="true"
:footer-props="footerProps"
class="elevation-1"
>
<template v-slot:item="{ item }">
<!-- 自定义item模板 -->
<tr>
<td>{{ item.id}}</td>
<td class="text-center">{{ item.msg }}</td>
<td class="text-center">{{ item.time }}</td>
</tr>
</template>
<template v-slot:no-data>
<v-alert :value="true" color="error" icon="warning">抱歉,当前还没有任何数据</v-alert>
</template>
</v-data-table>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
name: 'Test',
data: () => ({
headers: [
{
text: 'id',
align: 'left',
},
{
text: '消息',
align: 'center',
},
{
text: '时间',
value: 'time',
align: 'center',
sort: (a: Date|string, b: Date|string) => {
return new Date(a).getTime() - new Date(b).getTime()
}
}
],
footerProps: {
showFirstLastPage: true,
itemsPerPageText: '每页条数',
itemsPerPageOptions: [10, 20, 50, 100, { text: '全部', value: -1 }]
},
list:[]
}),
props: {},
// 需要标注有 `this` 参与运算的返回值类型
methods: {},
computed: {},
components: {},
watch: {},
created() {},
})
</script>
<style scoped>
</style>
暂时先想到了这么多坑,之后如果又遇到了别的会继续写。
待解决:
- 如何压缩index.html页面中的css与js代码,之前用webpack手动配置时是可以用uglifyjs-webpack-plugin来压缩的,但vue-cli中不能。也没从谷歌和百度搜到答案,因此暂时搁置
三、leancloud的使用
本次项目使用的数据库是云数据库leancloud,官网https://leancloud.cn/
leancloud有着非常完成的SDK来支持开发,免去了搭建服务器后台,可以让开发者专注在前端实现业务逻辑
本项目新应用的地方是leancloud提供的云函数和hook功能(不过云函数其实还是要写后端的内容,不过这个代码是扔给leancloud来运行,对于开发者而言还是省事了很多,也免去了复杂的接口验证)
云函数是在客户端调用服务器定义好的函数,对于一些需要控制权限的逻辑十分方便,也能更好的保护用户的数据。
而hook则是保证了对数据库的操作永远会有日志记录,因此可以排查恶意请求
使用例见官网。
【顺便,在使用的过程中,我还向leancloud提了一个意见,反馈了两个bug,hhhh】
四、TypeScript相关
一、TypeScript的优点
本项目和之前的版本最大的区别就是开发语言从JavaScript转到了TypeScript。
不得不承认,在开发项目时,有TypeScript提供的强大的类型校验功能,真的很方便,可以说规避了很多潜在错误。
虽然在一定程度上麻烦了,失去了js的自由,但为了强大的类型提示功能,我觉得是完全值得的。而且我也激进的认为,npm上所有发布的包,都应该有类型提示功能,否则就是一个残废的包。
为什么这样说呢?如果用ts来开发,完成后是有完整的类型提示的,即便懒癌发作不想写文档,但只要注释足够依旧是可以的。而js开发的时候,是没有完整的类型提示的,没有文档的情况下使用起来实在是太过艰难
二、使用async/await改造异步函数
第二个进步是深入了解了async/await语法糖的用法。
学习过js的人都知道回调地狱是什么一个情况,也就是异步函数中回调一层套一层。
而我估计也有人学过利用Promise对象来改造异步函数,采用Promise链的方式来解决异步函数问题。
而在ES7当中,async/await+Promise成为了解决异步函数的终极方案,它可以让开发者像写同步函数那样写出异步函数!
一个简单的异步函数例子如下
1 | /** |
当然了,由于await只能在async函数中使用,因此调用到async函数的地方,也必须是async函数。
上面的例子中异步函数只有执行成功的resolve,下面来看看如果加上执行失败会是什么情况
1 | async function asyncFun() { |
1 | //控制台输出结果 |
看见了没?如果是调用了resolve返回的结果,是异步函数执行成功的结果,因此会在try-catch中的上部分代码块,而如果调用了reject,则是会到下半部分代码块。一般来讲也会用reject抛出一个异常来,需要在这个地方进行异常处理。
在这里需要重点指出,当一个try-catch块中存在多个await时,一旦有一个await抛出了异常,后续的await都不会继续执行,而是转到异常处理上去。
因此,理论上来讲,每一个用到了await的地方都需要try-catch包裹才对。
不过,当异常已经在底层的async函数中捕获时,上层的async函数就接受不到这个异常了,因此可以不加try-catch处理而是对返回值进行判断。
五、vue项目中复制文本到剪切板
在本项目中有一个需求就是复制链接到剪切板,找了一圈后发现还是用现成的包吧。
代码如下
1 | //main.ts |
1 | let url = 'https://www.baidu.com' |
六、关于vscode中遇到的问题
问题1:使用RamMap查看时大量出现git.exe、rg.exe、svhost.exe、conhost.exe等进程,导致内存爆炸
初步判断是git的原因,不管是百度还是谷歌都暂时没有找到合适的解决方案,只能关闭vscode中自带的git,但仍有进程在莫名其妙的不断创建。
之前在vscode中安装过一个插件Resource Monitor ,使用Process Explorer查看后注意到这货在一直创建进程。但是即便卸载插件之后,git的问题也依旧存在。
目前没有找到解决方案,只能先暂时搁置
本文作者:草梅友仁
本文地址: https://blog.cmyr.ltd/archives/bdb53d47.html
版权声明:转载请注明出处!