vue与TypeScript集成配置最简教程(推荐)
前言Vue的官方文档没有给出与TypeScript集成的具体步骤,网上其他的教程不是存在问题就是与vue-cli建立的项目存在差异,让人无从下手。 下面我就给出vue-cli建立的项目与TypeScript集成的最简配置。 初始化项目首先用vue-cli建立webpack项目。这里为了演示方便,没有打开router和eslint等,可以根据自身情况打开。 ? Project name vue-typescript
? Project description A Vue.js project ? Author ? Vue build standalone ? Install vue-router? No ? Use ESLint to lint your code? No ? Setup unit tests with Karma + Mocha? No ? Setup e2e tests with Nightwatch? No 安装TypeScript相关依赖和项目其余依赖,用npm或cnpm 配置修改目录下bulid/webpack.base.conf.js文件,在文件内module>rules添加以下规则 在src目录下新建一个文件vue-shims.d.ts,用于识别单文件vue内的ts代码 在项目根目录下建立TypeScript配置文件tsconfig.json 重命名src下的 修改 修改src下的App.vue文件,在 测试下面可以测试是否集成成功,编辑src/components/Hello.vue文件,修改 运行项目 测试成功,现在是一个TypeScipt项目了 进阶配置官方推荐的vue-class-component,https://cn.vuejs.org/v2/guide/typescript.html 安装开发依赖 修改ts配置文件,增加以下两项配置 改写我们的Hello组件 使用vue-class-component后,初始数据可以直接声明为实例的属性,而不需放入data() {return{}}中,组件方法也可以直接声明为实例的方法,如官方实例,更多使用方法可以参考其官方文档 https://github.com/vuejs/vue-class-component#vue-class-component '
})
export default class MyComponent extends Vue {
// 初始数据可以直接声明为实例的属性
message: string = 'Hello!'
// 组件方法也可以直接声明为实例的方法
onClick (): void {
window.alert(this.message)
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- 翻译 Meteor React 制作 Todos - 02 - 组件
- 创建SQLite的DLL和LIB
- PostgreSQL学习手册(数据表)
- React 奇技淫巧 - defaultValue 和虚拟 dom diff 算法实现表
- ruby-on-rails – 是否可以在Rails项目中更改文件夹结构?
- 我如何查看.rb(Ruby)文件?
- ruby – minitest – 将任何参数传递给期望
- Xcode给我’Obstructing’警告,因为我不再使用SVN,切换到Pe
- react-native-android – 如何设置或配置android的反应导航
- postgresql – 单独事务中的INSERT INSERT触发器?