Vue与Typescript构建项目-js教程-PHP中文网

首页

web前端

js教程

Vue与Typescript构建项目

php中世界最好的语言

Mar 19, 2018 pm 05:01 PM

typescript 构建项目

这次给大家带来Vue与Typescript构建项目，Vue与Typescript构建项目的注意事项有哪些，下面就是实战案例，一起来看一下。

Typescript 在前端圈已经逐渐普及，Vue 2.5.0 改进了类型声明，使得对 TypeScript 更加友好

不过要想在项目中直接使用 TypeScript 仍然需要对项目进行一些改造

PS: 建议使用 Visual Studio Code 进行开发

一、安装依赖

首先还是用 vue-cli 生成项目

vue init webpack demo

登录后复制

然后安装必要依赖项：typescript、ts-loader、vue-class-component

npm install typescript vue-class-component -D

登录后复制

npm install ts-loader@3.3.1 -D

登录后复制

上面安装 ts-loader 的时候，指定了版本 3.3.1

这是因为在写这篇博客的时候（2018-03-14），在安装 ts-loader 的最新版 4.0.1 的情况下，启动项目会报错

另外还有几个库可以按需引入：

tslint: 规范 ts 代码，需要配合 tsllint-loader 使用，最好再加上 tslint-config-standard；

vue-property-decorator: vue-class-component 的扩展，添加了几个结合 Vue 特性的装饰器（@Emit，@Prop 等）；

vuex-class: 在 vue-class-component 基础上加强了对 vuex 的支持。

二、配置 Webpack

然后修改 ./build/webpack.base.conf.js 文件：

在 resolve.extension 中添加 ‘.ts’，使引入 ts 文件时不用写 .ts 后缀

{
  test: /\.tsx?$/,
  loader: 'ts-loader',
  exclude: /node_modules/,
  options: {
    appendTsSuffixTo: [/\.vue$/]
  }
}

登录后复制

在 module.rules 中添加 webpack 对 ts 文件的解析

三、其他配置

在项目根目录下创建 tsconfig.json 文件：

// tsconfig.json{  "compilerOptions": {    // 与 Vue 的浏览器支持保持一致
    "target": "es5",    // 这可以对 `this` 上的数据属性进行更严格的推断
    "strict": true,    // 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
    "module": "es2015",    "moduleResolution": "node"
  }
}

登录后复制

完整的 tsconfig.json 配置项可以参考官方文档

在 ./src 目录创建 vue-shim.d.ts 文件，让 ts 识别 .vue 文件：

// vue-shim.d.tsdeclare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

登录后复制

四、文件改造

将 src 目录下的所有 js 文件后缀改为 .ts

然后将 webpack 配置文件 ./build/webpack.base.conf.js 中的入口 entry 修改为 main.ts

改造之后的 ts 文件不会识别 .vue 文件，所以在引入 .vue 文件的时候，需要手动添加 .vue 后缀

在所有 .vue 文件中，都需要在

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7683

Java教程

1639

CakePHP 教程

1393

Laravel 教程

1286

PHP教程

1229

显示更多

Related knowledge

分享PyCharm项目打包的简易方法 Dec 30, 2023 am 09:34 AM

简单易懂的PyCharm项目打包方法分享随着Python的流行，越来越多的开发者使用PyCharm作为Python开发的主要工具。PyCharm是功能强大的集成开发环境，它提供了许多方便的功能来帮助我们提高开发效率。其中一个重要的功能就是项目的打包。本文将介绍如何在PyCharm中简单易懂地打包项目，并提供具体的代码示例。为什么要打包项目？在Python开发

AI攻克费马大定理？数学家放弃5年职业生涯，将100页证明变代码 Apr 09, 2024 pm 03:20 PM

费马大定理，即将被AI攻克？而且整件事最意味深长的地方在于，AI即将解决的费马大定理，正是为了证明AI无用。曾经，数学属于纯粹的人类智力王国；如今，这片疆土正被先进的算法所破译，所践踏。图片费马大定理，是一个「臭名昭著」的谜题，在几个世纪以来，一直困扰着数学家们。它在1993年被证明，而现在，数学家们有一个伟大计划：用计算机把证明过程重现。他们希望在这个版本的证明中，如果有任何逻辑上的错误，都可由计算机检查出来。项目地址：https://github.com/riccardobrasca/flt

深入了解PyCharm：快速删除项目的方法 Feb 26, 2024 pm 04:21 PM

标题：深入了解PyCharm：删除项目的高效方式近年来，Python作为一种强大而灵活的编程语言，受到越来越多开发者的青睐。在Python项目的开发中，选择一个高效的集成开发环境至关重要。PyCharm作为一款功能强大的集成开发环境，为Python开发者提供了诸多便利的功能和工具，其中包括快速、高效地删除项目目录。下面将着重介绍如何使用PyCharm中的删除

PyCharm实用技巧：将项目转换为可执行EXE文件 Feb 23, 2024 am 09:33 AM

PyCharm是一款功能强大的Python集成开发环境，提供了丰富的开发工具和环境配置，让开发者能够更高效地编写和调试代码。在使用PyCharm进行Python项目开发的过程中，有时候我们需要将项目打包成可执行的EXE文件，以便在没有安装Python环境的计算机上运行。本文将介绍如何使用PyCharm将项目转换为可执行的EXE文件，同时给出具体的代码示例。首

基础教程：使用IDEA创建Maven项目 Feb 19, 2024 pm 04:43 PM

IDEA（IntelliJIDEA）是一款强大的集成开发环境，可以帮助开发人员快速高效地开发各种Java应用程序。在Java项目开发中，使用Maven作为项目管理工具能够帮助我们更好地管理依赖库、构建项目等。本文将详细介绍如何在IDEA中创建一个Maven项目的基本步骤，同时提供具体的代码示例。步骤一：打开IDEA并创建新项目打开IntelliJIDEA

PyCharm教程：如何在PyCharm中移除项目？ Feb 24, 2024 pm 05:54 PM

PyCharm是一款功能强大的Python集成开发环境（IDE），提供了丰富的功能帮助开发者更高效地编写和管理Python项目。在使用PyCharm开发项目的过程中，有时候我们需要删除一些不再需要的项目以释放空间或清理项目列表。本文将详细介绍如何在PyCharm中删除项目，并提供具体的代码示例。如何删除项目打开PyCharm，进入项目列表界面。在项目列表中，

构建流畅无阻：如何正确配置Maven镜像地址 Feb 20, 2024 pm 08:48 PM

构建流畅无阻：如何正确配置Maven镜像地址在使用Maven构建项目时，配置正确的镜像地址是非常重要的。正确配置镜像地址可以加快项目构建的速度，避免网络延迟等问题。本文将介绍如何正确配置Maven镜像地址，并给出具体的代码示例。为什么需要配置Maven镜像地址Maven是一个项目管理工具，可以自动化构建项目、管理依赖、生成报告等。在Maven构建项目时，通常

优化Maven项目打包流程，提升开发效率 Feb 24, 2024 pm 02:15 PM

Maven项目打包步骤指南：优化构建过程，提高开发效率随着软件开发项目变得越来越复杂，项目构建的效率和速度成为了开发过程中不可忽视的重要环节。作为一种流行的项目管理工具，Maven在项目构建中扮演了关键角色。本指南将探讨如何通过优化Maven项目的打包步骤，提高开发效率，并提供具体的代码示例。1.确认项目结构在开始优化Maven项目打包步骤之前，首先需要确

See all articles

Vue与Typescript构建项目

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题