• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vue与TypeScript集成配置最简教程

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

https://segmentfault.com/a/1190000011878086  这个是另一个typescript配置的文件

>npm i ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev

vue与TypeScript集成配置最简教程

 

 

前言

Vue的官方文档没有给出与TypeScript集成的具体步骤,网上其他的教程不是存在问题就是与vue-cli建立的项目存在差异,让人无从下手。

下面我就给出vue-cli建立的项目与TypeScript集成的最简配置。

初始化项目

首先用vue-cli建立webpack项目。这里为了演示方便,没有打开router和eslint等,可以根据自身情况打开。

# vue init webpack vue-typescript

? Project name vue-typescript
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

安装TypeScript相关依赖和项目其余依赖,用npm或cnpm

# cd /vue-typescript
# npm install typescript ts-loader --save-dev
# npm install
  • 1
  • 2
  • 3
  • resolve: {
        extensions: ['.js', '.vue', '.json', '.ts', '.tsx']
      }

配置

修改目录下bulid/webpack.base.conf.js文件,在文件内module>rules添加以下规则

{
  test: /\.tsx?$/,
  loader: 'ts-loader',
  exclude: /node_modules/,
  options: {
    appendTsSuffixTo: [/\.vue$/],
  }
},
// 从这里复制下面的代码就可以了
        // 如果之前按照起手式配置的同学,请替换配置
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        enforce: 'pre',
        loader: 'tslint-loader'
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: Object.assign(vueLoaderConfig, {
          loaders: {
            ts: "ts-loader",
            tsx: "babel-loader!ts-loader"
          }
        })
      },
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: [
          "babel-loader",
          {
            loader: "ts-loader",
            options: { appendTsxSuffixTo: [/\.vue$/] }
          }
        ]
      },
      // 复制截止
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

在src目录下新建一个文件vue-shims.d.ts,用于识别单文件vue内的ts代码

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}
  • 1
  • 2
  • 3
  • 4
  • 5

在项目根目录下建立TypeScript配置文件tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5",
    "allowSyntheticDefaultImports": true,
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

然后在 tsconfig.json中,添加对jsx的支持

 
  "compilerOptions": {
    "jsx": "preserve"
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

重命名src下的main.jsmain.ts

修改webpack.base.conf.js下的entry>app'./src/main.ts'

修改src下的App.vue文件,在

<script lang="ts">
  • 1

测试

下面可以测试是否集成成功,编辑src/components/Hello.vue文件,修改

<script lang="ts">
  import Vue, {ComponentOptions} from 'vue'
  export default {
    name: 'hello',
    data() {
      return {
        msg: 'this is a typescript project now'
      }
    }
  } as ComponentOptions<Vue>
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

运行项目

# npm run dev
  • 1

测试成功,现在是一个TypeScipt项目了

进阶

配置官方推荐的vue-class-componenthttps://cn.vuejs.org/v2/guide/typescript.html

安装开发依赖

# npm install --save-dev vue-class-component
  • 1

修改ts配置文件,增加以下两项配置

"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
  • 1
  • 2

改写我们的Hello组件

<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'
  @Component
  export default class Hello extends Vue {
    msg: string = 'this is a typescript project now'    
  }
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

使用vue-class-component后,初始数据可以直接声明为实例的属性,而不需放入data() {return{}}中,组件方法也可以直接声明为实例的方法,如官方实例,更多使用方法可以参考其官方文档

https://github.com/vuejs/vue-class-component#vue-class-component

import Vue from 'vue'
import Component from 'vue-class-component'
// @Component 修饰符注明了此类为一个 Vue 组件
@Component({
  // 所有的组件选项都可以放在这里
  template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
  // 初始数据可以直接声明为实例的属性
  message: string = 'Hello!'
  // 组件方法也可以直接声明为实例的方法
  onClick (): void {
    window.alert(this.message)
  }
}

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
typescript多维对象数组仿List泛型发布时间:2022-07-18
下一篇:
Hbuilder:自动编译TypeScript文件发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap