H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端问题精选】在vue中如何配置typescript文件?

1、我想用vue+typescript,但是不知道怎么配置?

clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

系统给我报的错误是————-

clipboard.png

求指教!~谢谢

回答:

webpack.base.conf.js


entry: {
    app: './src/main.js'
  }

.babelrc

     {
          "presets": [
            ["env", {
              "modules": false,
              "targets": {
                "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
              }
            }],
            "stage-2"
          ],
          "plugins": ["transform-vue-jsx", "transform-runtime","transform-decorators-legacy"]
        }
 

vue-shims.d.ts

 
 declare module "*.vue" {
      import Vue from 'vue';
      export default Vue;
    }

main.js文件不变

tsconfig.json

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

App.vue

<template>
  <div>
    <input v-model="msg">
    <p>prop: {{propMessage}}</p>
    <p>msg: {{msg}}</p>
    <p>helloMsg: {{helloMsg}}</p>
    <p>computed msg: {{computedMsg}}</p>
    <button @click="greet">Greet</button>
  </div>
</template>

<script>
import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
  props: {
    propMessage: String
  }
})
export default class App extends Vue {
  // initial data
  msg = 123

  // use prop values for initial data
  helloMsg = 'Hello, ' + this.propMessage

  // lifecycle hook
  mounted () {
    this.greet()
  }

  // computed
  get computedMsg () {
    return 'computed ' + this.msg
  }

  // method
  greet () {
    alert('greeting: ' + this.msg)
  }
}
</script>

<style>

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

</style>

package.json

"dependencies": {
    "awesome-typescript-loader": "^3.4.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "node-sass": "^4.7.2",
    "sass": "^1.0.0-beta.4",
    "sass-loader": "^6.0.6",
    "sass-resources-loader": "^1.3.1",
    "source-map-loader": "^0.2.3",
    "ts-loader": "^3.3.1",
    "typescript": "^2.6.2",
    "vue": "^2.5.2",
    "vue-class-component": "^6.1.2",
    "vue-router": "^3.0.1"
  },



https://github.com/yyccQQu/vu…

回答:

虽然我也没有在Vue中具体使用TypeScript,但是官方文档上有对其的介绍和推荐配置,可以参考一下:https://cn.vuejs.org/v2/guide…

回答:

我记得ts写导入组件要加.vue后缀
第二个router那个我就不知道了。

回答:

应该是配置loader就可以了

回答:

官网有介绍啊
https://cn.vuejs.org/v2/guide…

本文地址:H5W3 » 【前端问题精选】在vue中如何配置typescript文件?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址