美文网首页我爱编程
typescript+vue踩过的坑-安装

typescript+vue踩过的坑-安装

作者: 程序员之路 | 来源:发表于2017-09-20 12:05 被阅读0次

    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了

    相关文章

      网友评论

        本文标题:typescript+vue踩过的坑-安装

        本文链接:https://www.haomeiwen.com/subject/lmznsxtx.html