vue-cli+typescript 搭建

一、搭建vue-cli

vue init webpack myVue

二、安装插件

cd myVue

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

npm install

三、配置 webapck

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

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

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

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

五、在项目根目录下创建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
  }
}

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

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

<script lang="ts">

八、测试

<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>

 程序员兼职

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