教你搭建基于typescript的vue项目
自尤大去年9月推出vue对typescript的支持后,一直想开箱尝试,对于前端sr来说,vue的顺滑加上ts的面向对象,想着就非常美好~ 终于在两个月前,找到了个机会尝试了一把vue+ts的组合。 开文记录下vue和ts整合之旅和遇到的一些坑。
vue
应该大部分人都知道vue,毕竟如今vue是与react肩并肩的存在,所以就不过多介绍啦。
vue中文官网 官网上的教程就是最好的入门教程
typescript
我在前几篇文章就一直有在宣传typescript,简单列举下ts的优点
始于JavaScript,归于JavaScript,typescript是JavaScript的超集,所以它可以重用JavaScriptd代码,使用JavaScript的库
JavaScript用的优点它都有,跨浏览器、跨操作系统等
面向对象的编程思想,强大的类型检查
开源大法好
要说缺点的话,那就是不太适合太小的项目。
就凭这些优点,足够我们愉快的玩耍~
ts安装
先将node安装,然后在通过npm安装ts的包
npm install -g typescript
tsc -v
查看ts的版本号
创建项目
我们将通过官方提供的脚手架 vue-cli 来创建项目
安装脚手架与创建项目
- 执行安装命令
npm install -g @vue/cli
安装完成后,可以通过 vue create
快速创建一个新项目的脚手架,或者直接通过 vue serve
构建新想法的原型。
- 创建项目
vue create vue-ts
vue-ts是我们的项目名称,执行后如下
可看到有这么几个选项,xiaoli
这个选项是我之前创建的,稍后会介绍;default
这个后面写着 babel eslint ,表示若选择这个,那么只会引入babel和 ealint;manually select features
顾名思义,选择我们想要的。那么我们选择第三个
可看到列表里有很多选项,我们以vue+ts为主,所以我们选择 babel typescript router vuex
这几个,选择完后,如下
接下来会有好几个yes or no 的选项,大家根据自己项目的需要来选择就可以,最后一步,Save this as a preset for future projects?
若选择yes,就会将我们之前的选择存储起来,作为一个预设选项,方便后续一键创建新项目。所有步骤选完,回车,便开始创建项目文件结构和拉取npm包
项目结构
项目结构如下
public: 用于存放静态文件,index.html
入口文件就放在里面,这个文件夹下的文件不会纳入webpack的打包中;
src:存放vue项目工程文件,其中已经帮我们关联好router和vuex,文件结构非常简洁
其他:webpack、babel等配置文件
与typescript服用
项目在构建中,已经引入 vue-class-component
,用于对ts的支持,或者使用 vue-property-decorator
,这个库是在之前那个的基础上扩展。
以下列举tsvue写法的各种变化
组件声明
创建组件的方式变成如下
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
@Component
export default class Test extends Vue {
}
复制代码
data对象
通过构造函数创建data里的数据
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
@Component
export default class Test extends Vue {
private name: string;
constructor() {
super();
this.name = 'xiaoli';
}
}
复制代码
data里的数据使用方式如下
public getName(){
return this.name
}
复制代码
Prop声明
@Prop() public msg: string;
@Prop({ default: 'default value' }) propB: string
@Prop([String, Boolean]) propC: string | boolean
复制代码
生命周期函数使用
public created(): void {
console.log('created');
}
public mounted():void{
console.log('mounted')
}
复制代码
自定义方法
js下是需要在method对象中声明方法,现变成如下
public clickFunc(): void {
console.log(this.name)
console.log(this.msg)
}
复制代码
Watch监听属性
@Watch('name',{ immediate: true, deep: true })
public onChildChanged(val: string, oldVal: string) {
console.log('watch new name=' + val);
}
复制代码
computed计算属性
public get allname() {
return 'computed ' + this.name;
}
复制代码
allname是计算后的值,name是被监听的值
emit事件
@Emit()
addToCount(n: number) {
this.count += n
}
@Emit('reset')
resetCount() {
this.count = 0
}
复制代码
第一个的事件名称为 add-to-count
,n
为传过去的参数;第二个事件名为reset-count
,参数为空
指令和过滤器
----------小小更新一下---------------
有小伙伴问指令和过滤器在ts下的写法,之前给遗漏了,现在补充一下。
我尝试了下,发现之前在入口文件直接引入指令或者过滤器的方式不管用了,因为用了ts后,组件的作用域跟之前的不一样了,然后我找了官方的issue,截图如下
在作者在4月11号回复里,承认了这个问题,但具体什么时候将指令和过滤器的声明加上就未知了,不过作者在issue中给出了解决方案。我写个简单的小栗子
一个自定义指令
// ./directive/index.ts
export const focus = {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el:HTMLElement) {
// 聚焦元素
el.focus()
}
}
复制代码
一个过滤器
// ./filter/index.ts
export const capitalize = function (value:string) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
复制代码
组件中使用
import { capitalize }from '@/filter/index'
import { focus } from '@/directive/index'
@Component({
filters:{capitalize},
directives:{focus}
})
export default class Test extends Vue {}
复制代码
<div>
<input v-focus v-model="modelData">
<div>{{modelData | capitalize}}</div>
</div>
复制代码
可看出这是局部引用,全局引用目前还没找到办法,欢迎有解决办法的小伙伴指教~
vuex与ts的糅合
因为vuex是个可选的,所以单独列出来。首先需要引用 vuex-class
库,该库有如下几个模块
import {
namespace,
Action,
Getter,
Mutation,
State
} from 'vuex-class';
复制代码
分别对应vuex中的 action、getter、mutation等,使用ts对vuex的影响主要在组件对vuex的调用上,vuex的定义还是按照之前的写法即可
@State('foo') stateFoo
@State(state => state.bar) stateBar
@Getter('foo') getterFoo
@Action('foo') actionFoo
@Mutation('foo') mutationFoo
@someModule.Getter('foo') moduleGetterFoo
// If the argument is omitted, use the property name
// for each state/getter/action/mutation type
@State foo
@Getter bar
@Action baz
@Mutation qux
复制代码
若不想使用vuex定义的方法名,可以自定义属性名,因为都是定义在当前this上,所以直接使用this调用即可
this.getterFoo // -> store.getters.foo
this.actionFoo({ value: true }) // -> store.dispatch('foo', { value: true })
复制代码
小结
搭建完成后,就可以像后端一样撸前端啦~
作者:小黎也
链接:https://juejin.im/post/5ba75b355188255c5e66e4d3
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
教你搭建基于typescript的vue项目的更多相关文章
- 基于Typescript的Vue项目配置国际化
基于Typescript的Vue项目配置国际化 简介 使用vue-i18n插件对基于Typescript的vue项目配置国际化,切换多种语言, 配合element-ui或者其他UI库 本文以配置中英文 ...
- 如何在ASP.NET 5上搭建基于TypeScript的Angular2项目
一.前言 就在上月,公司的一个同事建议当前的前端全面改用AngularJs进行开发,而我们采用的就是ASP.NET 5项目,原本我的计划是采用TypeScript直接进行Angular2开发.所以借用 ...
- 手把手教你搭建规范的团队vue项目,包含commitlint,eslint,prettier,husky,commitizen等等
目录 1,前言 2,创建项目 2,安装vue全家桶 3,配置prettier 4,配置eslint 5,配置husky + git钩子 6,配置commitlint 6.1,配置commitlint格 ...
- 解决基于TypeScript 的 RN项目相对路径引入组件的问题
一.前言 在开发RN项目时,经常会要使用这样的方式(../../../)来引入组件,感觉非常繁琐,如果项目结构层级比较多,引入的头部更加分不清. 那有没有一种方案和vue项目一样,经过配置后简写路径, ...
- 庐山真面目之十一微服务架构手把手教你搭建基于Jenkins的企业级CI/CD环境
庐山真面目之十一微服务架构手把手教你搭建基于Jenkins的企业级CI/CD环境 一.介绍 说起微服务架构来,有一个环节是少不了的,那就是CI/CD持续集成的环境.当然,搭建CI/CD环境的工具很多, ...
- 从零搭建基于webpack的Electron-Vue3项目(1)——基于webpack的Vue3项目搭建
从零搭建基于webpack的Electron-Vue3项目(1)--基于webpack的Vue3项目搭建 前言 本篇文章内容,主要是基于webpack的Vue3项目开发环境进行搭建,暂时还不涉及到El ...
- TypeScript编写Vue项目结构解析
使用TypeScript编写Vue项目也已经有了一段时间,笔者在刚刚使用TypeScript时候也是很茫然,不知道从何下手,感觉使用TypeScript写项目感觉很累赘并不像JavaScript那么灵 ...
- vue cli4构建基于typescript的vue组件并发布到npm
基于vue cli创建一个vue项目 首先安装最新的vue cli脚手架, npm install --global @vue/cli npm WARN optional SKIPPING OPTIO ...
- Vue-cli安装步骤,搭建一个完整的 Vue 项目
安装node环境下载 node.js 官网地址:https://nodejs.org/en/ 下载完成后打开然后一路next安装完成后打开 dos 窗口输入命令:node -v 回车会输出node的版 ...
随机推荐
- JavaScript 普通声明式函数
1.为什么需要函数 实现代码的复用.存在函数提升,且会在变量提升的上面; 2.函数的创建 js中函数语法: function 函数名(形参){ //函数体 } 调用时:函数名(形参) 注: (1) 形 ...
- java基本算法
1.链表 链表用来存储数据,由一系列的结点组成.这些结点的物理地址不一定是连续的,即可能连续,也可能不连续,但链表里的结点是有序的.一个结点由数据的值和下一个数据的地址组成.一个链表内的数据类型可以是 ...
- Oracle Rac 测试
#还是使用之前的脚步来进行测试 #Author : Kconnie Pong Oracle@PONGDB:~> more load_balance.sh #!/bin/bash ..} do ...
- https的那些坑
1.时间 一些老手机不是系统自动对时,时间错误会报错. com.android.volley.NoConnectionError: javax.net.ssl.SSLHandshakeExceptio ...
- Java学习之==>IO文件操作体系
一.概述 在整个 Java.io 中最重要的就是5个类和一个接口.5个类指的是 File.InputStream.OutputStream.Reader.Writer,一个接口指的是Serializa ...
- Unity中的动画系统和Timeline(3) 混合树和动画匹配
混合树 前面我们通过在Animation界面添加单独的动作来控制动画,这样做比较麻烦,每个单独的属性,比如站立,奔跑等,都需要单独的代码来控制.现在我们可以通过使用混合树,其基本思想是将相近的动画混合 ...
- 应用安全 - 平台 | 工具 - Centreon Web - 漏洞 - 汇总
简介 产地 法国 用途 监控 分布 CVE-2019-16405 https://thecybergeek.co.uk/cves/2019/09/19/CVEs.html
- USACO4.1 Fence Loops【最小环&边->点转化】
数据不是很大,如果要转换为正常的那种建图方式的话,可以给点进行标号,用一个二维数组存这两条边相交的那个点的标号,方便处理.一定要注意不要同一个点使用不同的编号也不要不同的点使用同一个编号(这不是废话嘛 ...
- Android 透明主题
转至:https://blog.csdn.net/zhangwenchaochao/article/details/78654128 Activity采用透明主题有两种方式: 重要的内容说三遍: 采用 ...
- Java 并发编程:核心理论(一)
前言......... 并发编程是Java程序员最重要的技能之一,也是最难掌握的一种技能.它要求编程者对计算机最底层的运作原理有深刻的理解,同时要求编程者逻辑清晰.思维缜密,这样才能写出高效.安全.可 ...