typescript+vue踩过的坑-安装

1995年，当时在网景公司就职的布兰登·艾克正为Netscape Navigator2.0浏览器开发的一门名为LiveScript的脚本语言，后来网景公司与昇阳电脑公司组成的开发联盟为了让这门语言搭上java这个编程语言“热词”，将其临时改名为“JavaScript”，日后这成为大众对这门语言有诸多误解的原因之一。

而到了今天，javascript已经成了编程语言前10，并有基于javascript的vue/react/angular等主流框架广受大众喜爱。而javescript是一种弱类型语言，一些人想让自己写出的代码更稳定，typescript是javascript的超集。目前已经有vue+typescript/react+typescript/angular+typescript的项目了。本次主要说我在vue+typescript中遇到的坑。

一、安装

/**********************新项目生成************************

用脚手架直接生成

vue init webpack vue-typescript

cd /vue-typescript

npm install typescript ts-loader --save-dev

npm install

然后到检查配置

***********************************************************/

/**********************旧项目改造************************

如果项目已经有了，要引入typescript我们可以使用

npm install typescript ts-loader --save-dev

来配置typescript环境

********************************************************/

如果不能用，检查以下配置

packge.json中是否有typescript和ts-loader，如果没有，重新安装typescript或者ts-loader依赖，或者复制如下内容到packge.json重新安装node_modules

typescrpt依赖

"ts-loader": "^2.3.3",

"typescript": "^2.4.2",

是否有tsconfig.json文件在你的项目目录下，如果没有创建该文件

tsconfig.json

里面内容如下

{

"exclude": [

"node_modules"

],

"compilerOptions": {

"allowSyntheticDefaultImports": true,

"allowJs": true,

"module": "es2015",

"target": "es5",

"moduleResolution": "node",

"experimentalDecorators": true,

"isolatedModules": true,

"lib": [

"es2017",

"dom"

],

"sourceMap": true,

"pretty": true

}

}

build目录下的webpack.base.conf.js

module.exports中入口文件改成ts结尾

main.ts

resolve

增加.ts.tsx

rules

{

test: /\.tsx?$/,

loader: 'ts-loader',

exclude: /node_modules/,

options: {

appendTsSuffixTo: [/\.vue$/]

}

}

如果在命令行见到

说明你的typescript已经成功嵌入vue了