vue-cli3+typescript初体验
栏目: JavaScript · 发布时间: 5年前
内容简介:气势汹涌,ts似乎已经在来的路上,随时可能敲门。2015年,三大前端框架开始火爆的时候,我还在抱着Backbone不放,一直觉得可以轻易转到其他框架去。后来换工作,现实把脸都打肿了,没做过vue、react、angular?不要!今天,不能犯这个错了,毕竟时不我与,都快奔三了。
前言
气势汹涌,ts似乎已经在来的路上,随时可能敲门。
2015年,三大前端框架开始火爆的时候,我还在抱着Backbone不放,一直觉得可以轻易转到其他框架去。后来换工作,现实把脸都打肿了,没做过vue、react、angular?不要!
今天,不能犯这个错了,毕竟时不我与,都快奔三了。
vue-cli3
vue-cli3 的详细功能推荐官方文档,不在本文介绍范围内。
安装:
npm install -g @vue/cli
检查安装成功与否:
vue --version
创建项目:
vue create myapp
可以选择 Manually select feature
来自由选择功能,常用的有vuex、vue-router、CSS Pre-processors等,我们再把typescript勾上,就可以回车进入下一步了。 PS:勾选的操作是按空格键。
创建成功之后,执行启动命令:
npm run serve
就可以通过 http://localhost:8080/
访问本地项目啦。
typescript
如果没有typescript基础,可以先补补课,大概花三十分钟就可以了解typescript的一些特性,比如: TypeScript 入门教程 。
ts最主要的一点就是类型定义,有个概念才好看得懂demo。
vue-property-decorator
这是一个涵盖了vue的一些对象的集合,我们可以从这里取一些东西出来:
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
取出来的这几个属性,分别是 组件定义 Component
,父组件传递过来的参数 Prop
,原始vue对象 Vue
,数据监听对象 Watch
。还包括这里没有列举出来的 Model
, Emit
, Inject
, Provide
,可以自己尝试下。
demo
<template> <div class="hello"> <h1>{{ msg }}--{{ names }}</h1> <input type="text" v-model="txt"> <p>{{ getTxt }}</p> <button @click="add">add</button> <p>{{ sum }}</p> </div> </template> <script lang="ts"> import { Component, Prop, Vue, Watch } from 'vue-property-decorator'; @Component export default class HelloWorld extends Vue { //props @Prop() private msg!: string @Prop() private names!: string //data private txt: string = '1' private sum: number = 0 //computed get getTxt(){ return this.txt } //methods private add(){ this.sum++ console.log(`sum : ${this.sum}`) } //生命周期 created(){ console.log('created') } //watch @Watch('txt') changeTxt(newTxt: string, oldTxt: string){ console.log(`change txt: ${oldTxt} to ${newTxt}`) } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped lang="less"> h3 { margin: 40px 0 0; } input { width: 240px; height: 32px; line-height: 32px; } </style>
以上就是demo,代码组织有点散,没有原来js书写的整齐。
这个demo没有引入组件,如果需要引入组件,应该这样书写:
<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" names="aaa" /> <HelloWorld2 msg="Welcome to Your Vue.js + TypeScript App" names="bbb" /> </div> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src import HelloWorld2 from '@/components/HelloWorld2.vue'; // @ is an alias to /src @Component({ components: { HelloWorld, HelloWorld2, }, }) export default class Home extends Vue {} </script>
结语
如果VSCode编辑器有警告提示,比如:
Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
可以把工作区其他的项目移除,或者把本项目拖动到工作区的首位,或者在把本项目的tsconfig.json复制到工作区首位的项目的根目录下,重启编辑器,有比较大的概率可以解决警告提示。
以上所述就是小编给大家介绍的《vue-cli3+typescript初体验》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 降低云游戏延迟优化云游戏体验:贝塞斯达推出Orion技术,还公布了免费体验计划
- PyTorch 初体验
- indexedDB 初体验
- golang爬虫初体验
- Netty 入门初体验
- Ansible初体验
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Web Data Mining
Bing Liu / Springer / 2011-6-26 / CAD 61.50
Web mining aims to discover useful information and knowledge from Web hyperlinks, page contents, and usage data. Although Web mining uses many conventional data mining techniques, it is not purely an ......一起来看看 《Web Data Mining》 这本书的介绍吧!