typescript+vue踩过的坑-安装

1995年，当时在网景公司就职的布兰登·艾克正为Netscape Navigator 2.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了

typescript+vue踩过的坑-typescript在.vue中的写法