vue+vue-cli3 与 typeScript 的引入与混入

最新推荐文章于 2025-10-09 14:45:41 发布

原创

最新推荐文章于 2025-10-09 14:45:41 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #vue #node.js #vue.js #javascript

本文介绍了如何在Vue项目中引入并配置TypeScript，包括安装依赖、配置vue.config.js、创建tsconfig.json、声明文件的编写，以及在Vue组件中使用TypeScript的步骤。适合已有的Vue项目逐步转型为TypeScript的开发者。

前言：

TypeScript的设计目的应该是解决JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化，不适合开发大型程序。另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程。---- 引子

TypeScript官方文档地址

主题：
第一步、安装依赖：
npm、cnpm、yarn都支持
npm install typescript ts-loader --save-dev
npm install vue-property-decorator --save-dev

第二步、配置vue.config.js 打包与启动：

module.exports = {
   
   
    publicPath: './',
    configureWebpack: config => {
   
   
        config.externals = {
   
   
           	// 混入ts↓
            resolve: {
   
    extensions: [".ts", ".tsx", ".js", ".json"] },
            // 使用ts后改变入口文件
            base: {
   
   
                entry: {
   
   
                	app: resolve('src/main.ts') // 把main.js改为main.ts
                },
                resolve: {
   
   
                    extensions: ['vue', '.js', '.ts']
                },
                module: {
   
   
                    rules: [
                        {
   
   
                            test: