TypeScript实现VUE组件实践

最新推荐文章于 2024-08-31 16:40:27 发布

背锅程序猿-佛系写手

最新推荐文章于 2024-08-31 16:40:27 发布

阅读量754

点赞数

分类专栏： vue typescript 文章标签： vue typescript javascript

本文链接：https://blog.csdn.net/huang173507029/article/details/111269381

版权

本文介绍了如何使用TypeScript构建Vue组件，从项目目录结构到环境搭建，详细讲解了代码实现过程，包括组件创建、类型声明以及如何发布到NPM。在实践中，作者遇到了Vue对TS支持的一些限制，但仍然成功完成了组件开发并分享了经验。

摘要由CSDN通过智能技术生成

前言

最近因为项目需要，开始深入接触Typescript相关知识。对于做前端，对TS应该再熟悉不过了，目前前端主流框架，都慢慢的向TS靠拢。

而Typescript出现后，Google 表现出了浓厚的兴趣，这也是为什么AngularJS利用TS进行重构的原因。紧接着React、和VUE（VUE3.0利用TS编写）对TS的支持也逐渐完善。

所以TS也逐渐成为前端必不可少的技能。

接下来，讲解一下通过TS写VUE组件，并将组件发布到NPM上。

这是一个丑陋的组件，如图。。。点击我的，弹出个弹出框，点击取消可关闭。

项目目录

环境搭建

首先自己实现VUE编译环境，当然也可以用VUE-CLI直接创建，这里，我们简单介绍下如何自己创建VUE环境。

首先，初始化项目和初始化TS配置

npm init -y

tsc init

新建 webpack.base.config.js、webpack.dev.config.js、webpack.pro.config.js webpack配置文件

其中base为基础配置、dev为开发环境配置、pro为线上环境配置、在base配置中，添加 pug-plain-loader、vue-loader、ts-loader、"style-loader", "css-loader", "sass-loader"，用来解析VUE文件的template、ts、style模块。

    rules: [
      { test: /\.pug$/, use: ["pug-plain-loader"] },
      {
        test: /\.vue$/,
        use: [
          {
            loader: "vue-loader"
          }
        ]
      },
      {
        test: /\.tsx?$/i,
        use: [
          {
            loader: "ts-loader",
            options: {
              appendTsSuffixTo: [/\.vue$/]
            }
          }
        ],
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"]
      }
    ]

因为开发环境需要调试功能，所以dev中加入dev-server，并通过 html-webpack