码迷,mamicode.com
首页 > 其他好文 > 详细

vue+ts搭建工程

时间:2019-11-12 11:03:03      阅读:432      评论:0      收藏:0      [点我收藏+]

标签:prope   get   ons   main   rip   一个   Fix   property   try   

1.安装必要的插件

npm i vue-class-component vue-property-decorator --save
npm i ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev

2.配置webpack修改webpack.base.conf.js文件

entry: {
    app: ‘./src/main.ts‘ // main.js->main.ts
  },
resolve: {
    extensions: [‘.js‘, ‘.vue‘, ‘.json‘, ‘.ts‘],  // 增加.ts
    alias: {
      ‘@‘: resolve(‘src‘)
    }
  }

module.rules里增加如下配置

  {
      test: /\.ts$/,
      exclude: /node_modules/,
      enforce: ‘pre‘,
      loader: ‘tslint-loader‘
    },
    {
      test: /\.tsx?$/,
      loader: ‘ts-loader‘,
      exclude: /node_modules/,
      options: {
        appendTsSuffixTo: [/\.vue$/],
      }
    },

3. 在src下面创建vue.shim.d.ts文件

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

4. 添加tsconfig.json文件   运行: tsc --init 

如果没有全局安装ts,就先安装一下: npm install -g typescript

一个模板tsconfig.json例子

{
  "include":[
    "src/**/*",
    "vue.shim.d.ts"
  ],
  "exclude":["node_modules"],
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": [
      "dom",
      "es5",
      "es2015.promise"
    ],
    "allowJs": true,
    "strict": true,
    "baseUrl": "./",
    "paths": {
      "@/*":["src/*"]
    },
    "esModuleInterop": true,
    "experimentalDecorators": true,
  }
}

5.然后再去把src下面的js文件改成tswenjian

6.在index.ts跟main.ts文件里面把引入vue文件的引入路径的.vue后缀加上

7.修改vur文件例子

<script lang="ts">
  import { Vue, Component } from ‘vue-property-decorator‘

  @Component
  export default class App extends Vue {
    // 初始化数据
    msg = 123

    // 生命周期钩子
    mounted () {
      this.greet()
    }

    // 计算属性
    get computedMsg () {
      return ‘computed ‘ + this.msg
    }

    // 方法
    greet () {
      alert(‘greeting: ‘ + this.msg)
    }
  }
</script>

 

 

 

vue+ts搭建工程

标签:prope   get   ons   main   rip   一个   Fix   property   try   

原文地址:https://www.cnblogs.com/fdd-111/p/11840153.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!