标签：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>
标签：prope get ons main rip 一个 Fix property try
原文地址：https://www.cnblogs.com/fdd-111/p/11840153.html
