Javascript

一篇文章带你使用Typescript封装一个Vue组件

本文主要是介绍一篇文章带你使用Typescript封装一个Vue组件,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

一、搭建项目以及初始化配置

vue create ts_vue_btn

这里使用了vue CLI3自定义选择的服务,我选择了ts、stylus等工具。然后创建完项目之后,进入项目。使用快捷命令code .进入Vs code编辑器(如果没有code .,需要将编辑器的bin文件目录地址放到环境变量的path中)。然后,我进入编辑器之后,进入设置工作区,随便设置一个参数,这里比如推荐设置字号,点下。这里是为了生成.vscode文件夹,里面有个json文件。
在这里插入图片描述

我们在开发项目的时候,项目文件夹内的文件很多,会有时影响视觉。那么这个文件就是设置什么文件隐藏,注意只是隐藏,而不是删除!下面是我自己写的,在Vue cli3生成的项目需要隐藏的文件参数。

{
    "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true,
        "**/README.md": true,
        "**/node_modules":true,
        "**/shims-tsx.d.ts": true,
        "**/shims-vue.d.ts": true,
        "**/.browserslistrc": true,
        ".eslintrc.js": true,
        "babel.config.js": true,
        "package-lock.json": true,
        ".gitignore": true,
        "tsconfig.json": true
    }
}

 

 

以下就是所看到的文件目录,我把一些无关紧要的文件跟文件夹隐藏或者删除后所看到的。

在这里插入图片描述

文件解读(从上往下):
在这里插入图片描述

 

更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119945715

这篇关于一篇文章带你使用Typescript封装一个Vue组件的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!