vue-cli+typescript 开发 web 应用心得与 bug

阅读数: 17

一、vue-cli 新建项目及打包优化

在本次的项目中，由于使用了 vue-cli 脚手架，在搭建项目的过程中可以说是方便了不少，没有了配置 webpack 的痛苦。

不过，在此之中也有些坑要注意就是了。

例如风格问题。vue-cli 默认的风格是 2 空格缩进、有分号风格，而本人习惯于 4 空格缩进、无分号风格，因此需要修改 .eslint.js 文件来重新约束风格。

// .eslint.js 
module.exports = {
    rules: {
        indent: [// 强制使用一致的缩进
            'error',
            4, {//4格缩进
                SwitchCase: 1, // case 子句将相对于 switch 语句缩进 4 个空格，即一个tab
            },
        ],
        'linebreak-style': [// 强制使用一致的换行风格
            'error',
            'unix'//使用\n而不是\r\n换行，这是因为大多数项目都是部署在Linux服务器上的，可以避免一些问题
        ],
        quotes: [// 强制使用一致的反勾号、双引号或单引号double
            'error',
            'single',//使用单引号
        ],
        semi: [// 要求或禁止使用分号代替 ASI
            'error',
            'never',//禁止不必要的分号
        ],
    }
}

第二个问题就是 vue.config.js 的配置，开发阶段本人希望启动时能够自动打开浏览器，而且希望自定义端口。因此要在项目根目录的 vue.config.js 中添加如下代码

//vue.config.js
module.exports = {
    devServer: {
        open: true, //自动打开浏览器
        port: 3000, //设置端口
        hot: true, //启用热更新
        compress: true, //是否启用gzip压缩
    },
}

之后在 build 生成生产环境用的 dist 文件时，发现还额外生成了很多 map 文件，生产环境用不到，因此去掉。

//vue.config.js
module.exports = {
    productionSourceMap: false,//移除生产环境的 source map
}

打包后发现 js 和 css 文件有些大，因此希望通过 cdn 来加载依赖，减少打包后的体积。

//vue.config.js
module.exports = {
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // 只在生产环境用cdn
            return {
                externals: {//左边是要排除的包，右边是对应的变量
                    vuetify: 'Vuetify',
                    vue: 'Vue',
                    vuex: 'Vuex',
                    axios: 'axios',
                    'vue-router': 'VueRouter',
                    'leancloud-storage': 'AV',
                    moment: 'moment',
                    'vue-clipboard2': 'VueClipboard'
                }
            }
        }
    },
    chainWebpack: config => {
        //// ~~使用 jsdelivr 提供的免费cdn，最好限制版本以免出现兼容性问题~~
        // 提醒：由于 jsdelivr 在中国大陆地区停止服务，请切换为 unpkg、cdnjs、staticfile 等 CDN 服务商！！
        const css = [
            'https://cdn.jsdelivr.net/npm/animate.css@3.7.2/animate.min.css',
            'https://cdn.jsdelivr.net/npm/@mdi/font@4.5.95/css/materialdesignicons.min.css',
            'https://cdn.jsdelivr.net/npm/material-design-icons-iconfont@5.0.1/dist/material-design-icons.min.css',
            'https://cdn.jsdelivr.net/npm/vuetify@2.1.10/dist/vuetify.min.css'
        ]
        const js = [
            'https://cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js',
            'https://cdn.jsdelivr.net/npm/leancloud-storage@3.15.0/dist/av-min.js',
            'https://cdn.jsdelivr.net/npm/moment@2.24.0/moment.min.js',
            'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js',
            'https://cdn.jsdelivr.net/npm/vuetify@2.1.10/dist/vuetify.min.js',
            'https://cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js',
            'https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js',
            'https://cdn.jsdelivr.net/npm/vue-clipboard2@0.3.1/dist/vue-clipboard.min.js',
            'https://cdn.jsdelivr.net/npm/string-polyfills@0.9.1/distrib/String.min.js',//解决String(...).padStart的兼容性

        ]
        let cdn = {}
        if (process.env.NODE_ENV === 'production') {
            config.module
                .rule("images")
                .test(/\.(jpg|png|jpeg|gif|bmp)$/)
                .use("url-loader")
                .loader("url-loader")
                .options({
                    limit: 10240,
                    publicPath: 'http://cdn.cmyr.ltd/img/',//由于https下无法加载http源的js和css，因此只将图片上传到cdn
                    outputPath: 'img',
                    name: '[name].[hash:8].[ext]',
                }).end();

            cdn = {
                css,
                js
            }
            config.plugin('html').tap(([options]) => {
                options.cdn = cdn
                return [options]
            })
        } else {
            cdn = {
                css,
                js: []
            }
            config.plugin('html').tap(([options]) => {
                options.cdn = cdn
                return [options]
            })
        }
    },
}

<!-- index.html中的head部分添加如下代码 -->
<head>
<!-- 使用CDN的CSS文件 -->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
    <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
    <% } %>
    <!-- 使用CDN的JS文件 -->
    <% for (var i in htmlWebpackPlugin.options.cdn &&
    htmlWebpackPlugin.options.cdn.js) { %>
    <script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
</head>

二、Vuetify1.5 升 2.x 的坑

官网：https://vuetifyjs.com/zh-Hans/

这个坑的点在于 Vuetify 出现了版本不兼容的更新。

super plugin 这个项目刚开始写的时候 Vuetify 还是 1.5.x，后来重制时才发现出现了版本升级，理所应当的是出现了不兼容的更新。

不兼容的问题如下：

Text alignment 问题
1. 使用 text-sm-center 貌似无法正常居中，但使用 text-center 就可以。考虑到本项目的文字排版在手机端与电脑端一致，因此就用 text-center
v-btn 问题
1. 扁平样式属性由 flat 改为 text
2. block 属性改为了
```
min-width: 100% !important;
```
  结果导致在 v-card-actions 中两个按钮无法并排放（也就是各占一半的行）
  
  无奈之下只能自己写样式覆盖：
```
min-width: auto !important;
```
v-card v-card-text
1. 这个的问题是字体颜色不对，默认变为了灰色，因此自己写样式覆盖
v-card-title 问题
1. 不知道为什么导致了 h1 添加样式后不会变化，因此改成 p 标签或 span 标签
```
<v-card-title>
    <h1 class="display-1">hello world</h1>
</v-card-title>
```

v-data-table

v-data-table 相比之前也有很大变化，之前的写法也是完全不行了，这里给出一个参考写法

<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 成为了解决异步函数的终极方案，它可以让开发者像写同步函数那样写出异步函数！

一个简单的异步函数例子如下

/**
 * 延时一段时间
 * @param {number} time
 * @returns
 */
async function sleep(time: number) {
    return new Promise(resolve => setTimeout(resolve, time))
}
//上面的写法过于简洁，这其实相当于这种写法
async function sleep(time) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve()
        }, time)
    })
}
//调用时
(async () => {//看出来了吗？这是一个匿名异步箭头函数，相当简洁~
    console.log(Date.now())
    await sleep(1000)//这样就会在1秒后再执行下面的函数
    console.log(Date.now())
})()

当然了，由于 await 只能在 async 函数中使用，因此调用到 async 函数的地方，也必须是 async 函数。

上面的例子中异步函数只有执行成功的 resolve，下面来看看如果加上执行失败会是什么情况

async function asyncFun() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (Math.random() > 0.5) {//50%概率成功和失败
                resolve('异步函数执行成功！')
            } else {
                reject('异步函数执行失败！')
            }

        }, 500)
    })
}

(async () => {
    try {
        let res = await asyncFun()
        console.log('res', res)//打印成功结果
    } catch (error) {
        console.log('error', error)//打印失败结果
    }
})()

//控制台输出结果
res 异步函数执行成功！
res 异步函数执行成功！
error 异步函数执行失败！

看见了没？如果是调用了 resolve 返回的结果，是异步函数执行成功的结果，因此会在 try-catch 中的上部分代码块，而如果调用了 reject，则是会到下半部分代码块。一般来讲也会用 reject 抛出一个异常来，需要在这个地方进行异常处理。

在这里需要重点指出，当一个 try-catch 块中存在多个 await 时，一旦有一个 await 抛出了异常，后续的 await 都不会继续执行，而是转到异常处理上去。

因此，理论上来讲，每一个用到了 await 的地方都需要 try-catch 包裹才对。

不过，当异常已经在底层的 async 函数中捕获时，上层的 async 函数就接受不到这个异常了，因此可以不加 try-catch 处理而是对返回值进行判断。

五、vue 项目中复制文本到剪切板

在本项目中有一个需求就是复制链接到剪切板，找了一圈后发现还是用现成的包吧。

代码如下

//main.ts
import VueClipboard from 'vue-clipboard2'
VueClipboard.config.autoSetContainer = true // add this line
Vue.use(VueClipboard)

let url = 'https://www.baidu.com'
try {
    this.$copyText(url)//直接调用这个api即可，想复制啥都行
} catch (error) {
    console.error(error)
}

六、关于 vscode 中遇到的问题

问题 1：使用 RamMap 查看时大量出现 git.exe、rg.exe、svhost.exe、conhost.exe 等进程，导致内存爆炸

初步判断是 git 的原因，不管是百度还是谷歌都暂时没有找到合适的解决方案，只能关闭 vscode 中自带的 git，但仍有进程在莫名其妙的不断创建。

之前在 vscode 中安装过一个插件 Resource Monitor ，使用 Process Explorer 查看后注意到这货在一直创建进程。但是即便卸载插件之后，git 的问题也依旧存在。

目前没有找到解决方案，只能先暂时搁置

本文作者： 草梅友仁(CaoMeiYouRen)
本文链接： https://wp.cmyr.ltd/archives/vue-cli-typescript-web-app-insights-and-bugs
版权声明： 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！

欢迎关注我的其它发布渠道

vue-cli+typescript 开发 web 应用心得与 bug

一、vue-cli 新建项目及打包优化

二、Vuetify1.5 升 2.x 的坑

待解决：

三、leancloud 的使用

四、TypeScript 相关

一、TypeScript 的优点

二、使用 async/await 改造异步函数

五、vue 项目中复制文本到剪切板

六、关于 vscode 中遇到的问题

问题 1：使用 RamMap 查看时大量出现 git.exe、rg.exe、svhost.exe、conhost.exe 等进程，导致内存爆炸

评论

发表回复取消回复

vue-cli+typescript 开发 web 应用心得与 bug

一、vue-cli 新建项目及打包优化

二、Vuetify1.5 升 2.x 的坑

待解决：

三、leancloud 的使用

四、TypeScript 相关

一、TypeScript 的优点

二、使用 async/await 改造异步函数

五、vue 项目中复制文本到剪切板

六、关于 vscode 中遇到的问题

问题 1：使用 RamMap 查看时大量出现 git.exe、rg.exe、svhost.exe、conhost.exe 等进程，导致内存爆炸

评论

发表回复 取消回复

发表回复取消回复