vue-cli+typescript搭建

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

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

1、搭建vue-cli

vue init webpack myVue

2、安装插件

cd myVue

npm/cnpm   typescript ts-loader vue-class-component vue-property-decorator --save-dev

npm install

3、配置 webapck

//修改目录下bulid/webpack.base.conf.js，在module>rules下添加

{
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],
        }
}
//修改webpack.base.conf.js下的entry>app为'./src/main.ts'

4、在src下添加 .d.ts 如（vue.d.ts）后缀文件名

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

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

{
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ],
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "module": "es2015",
    "target": "es5",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "isolatedModules": true,
    "lib": [
      "dom",
      "es5",
      "es2015.promise"
    ],
    "sourceMap": true,
    "pretty": true
  }
}

6、重命名src下的main.js为 main.ts

7、修改src下的App.vue文件下

<script lang="ts">

8、测试

<script lang="ts">
import Vue, {ComponentOptions} from 'vue'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
} as ComponentOptions<Vue>
</script>

程序员兼职

可以加我微信进群，有资料送，也可以讨论问题