ts 模板库文件_vue与ts的使用模版
[源码地址](https://github.com/jielanglang/simple-vue)
[项目demo](https://xll.netlify.com/)
# 这里讲下使用中注意的事项 具体的使用在项目源码中
## 关于typescript详细配制
[tsconfig配制详情](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Compiler%20Options.html)
## 关于命令
**`npm run creat [paths...]`**
本人对于不断的创建组件文件夹已经很烦恼所以参考网上 生成了基于node的脚本!
运行
```shell
npm run creat views/Home
// or
npm run creat components/Home
```
会在对应的文件`views`or`components`夹中生成 `index.ts`,`home.html`,`home.scss`
生成的文件内部都有基本的使用代码 如果对这个生成的文件有个人需求 可以参考 项目目录下的`generator.js` 文件自行修改
## Vue-Property-Decorator
vue-property-decorator 是在 vue-class-component 上增强了更多的结合 Vue 特性的装饰器,新增了这 7 个装饰器
- @Emit
- @Inject
- @Model
- @Prop
- @Provide
- @Watch
- @Component (从 vue-class-component 继承)
## 项目中的语法使用方法
```js
import { Component, Vue } from 'vue-property-decorator'
@Component
export default class App extends Vue {
name:string = 'Simon Zhang'
// computed
get MyName():string {
return `My name is ${this.name}`
}
// methods
sayHello():void {
alert(`Hello ${this.name}`)
}
mounted() {
this.sayHello();
}
}
```
类似vue中的
```js
export default {
data () {
return {
name: 'Simon Zhang'
}
},
mounted () {
this.sayHello()
},
computed: {
MyName() {
return `My name is ${this.name}`
}
},
methods: {
sayHello() {
alert(`Hello ${this.name}`)
},
}
}
```
## Vuex-Class
vuex-class是基于基于vue-class-component对Vuex提供的装饰器。它的作者同时也是vue-class-component的主要贡献者,质量还是有保证的。
```
npm i vuex-class -S
```
使用方法
```js
import { Component, Vue } from 'vue-property-decorator'
import { State, Action, Getter } from "vuex-class";
@Component
export default class App extends Vue {
name:string = 'Simon Zhang'
@State login: boolean;
@Action initAjax: () => void;
@Getter load: boolean;
get isLogin(): boolean {
return this.login;
}
mounted() {
this.initAjax();
}
}
```
类似vue中
```js
export default {
data() {
return {
name: 'Simon Zhang'
}
},
mounted() {
this.initAjax()
},
computed: {
login() {
return this.$store.state.login
},
load() {
return this.$store.getters.load
}
},
methods: {
initAjax() {
this.$store.dispatch('initAjax')
}
}
}
```
## 支持 mixin
```js
import MixinsType from "@/mixins/xxx";
@Component({
mixins:[MixinsType]
})
```
## 需要注意的事
> 引入部分第三方库的时候需要额外声明文件
比如说我想引入vue-lazyload,虽然已经在本地安装,但是typescript还是提示找不到模块。原因是typescript是从node_modules/@types目录下去找模块声明,有些库并没有提供typescript的声明文件,所以就需要自己去添加
解决办法:在`src`目录下建一个`tools.d.ts`文件,声明这个模块即可
```js
declare module 'vue-awesome-swiper' {
export const swiper: any
export const swiperSlide: any
}
declare module 'vue-lazyload'
```
> 在需要的window属性的.ts文件 中添加属性
```js
declare global {
interface Window {FileReader:any}
}
window.FileReader = window.FileReader || {}
```
ts 模板库文件_vue与ts的使用模版相关推荐
- ts 模板库文件_在ts文件中使用模板引用变量的方法
ViewChild import { Component, ViewChild, AfterViewInit } from '@angular/core';//假设的.这里引入你用到的table组件类 ...
- vue3 vite ts引入vue文件报错 ts(2307)
vue3 vite ts 生成的项目模板,在ts文件中引入vue文件报错 ts(2307),只是ts报错,并不影响项目运行. 官方文档有说明:http://vue.dragonlm.com/guide ...
- eigen冲突 sophus 安装_SLAM-Sophus模板库安装总结
[问题]由于自己买的书<视觉SLAM十四讲:从理论到实践>,也就是<视觉SLAM十四讲>的第二版,书中Sophus库用的是模板版本,而之前我下载书籍代码是第一版书籍的代码仓库, ...
- linux下编译ts工程,linux下搭建生成HLS所需的.ts和.m3u8文件
要想利用HLS来实现视频的在线播放,就得需要将一个完整的视频文件切割成多个ts视频流,然后利用m3u8的索引文件来播放. 在Mac下,苹果提供了streamingTools的工具,里面有mediafi ...
- 【TS】TypeScript声明文件(.d.ts)的使用
前言 当我们在TS文件中需要引入外部库时,编译时是无法判断传入参数的类型的,所以我们需要在引入前加入一个声明文件来帮助ts判断类型. 当然现在大部分库都自带有自己的声明文件,一般在@types目录下. ...
- ts定义html是什么类型,TypeScript—类型定义文件(*.d.ts)
一.ts文件中引入jquery. 1.大家是否有再vue 上使用过 ts,并再 .ts文件中引用过 jquery 1.1是不是遇到过如下问题: import $ from 'jquery'; /*** ...
- STM32F103构建固件库模板(PS固件库文件树介绍)
参考:STM32F103ZE新建固件库模板 作者:追兮兮 发布时间:2020-10-14 10:31:45 网址:https://blog.csdn.net/weixin_44234294/artic ...
- ts自动编译声明文件_拥抱 TS:细数选择 TS 的 N 种理由
作者 | 马靖 day day up, bye bye bug 最近在做一个新项目,技术大佬告知前端要用 TS .前端小白的我内心疑惑"弱类型语言它不香嘛,为什么选择 TS ?" ...
- html ts 播放,vue文件拆分为html + ts + css
vue开发过程中我们习惯性的将js和css从vue文件中提取出来作为单独的文件在vue中引入,从而避免冗长的vue文件给后期的维护带来麻烦. 拆分后一个vue文件就成了 vue + js + css三 ...
最新文章
- sqlserver 行转列
- CPU 和内存虚拟化原理 - 每天5分钟玩转 OpenStack(6)
- 机器学习java_Java机器学习,第2部分
- wampServer2.1错误(Could not execute menu item (internal error)
- 如何用jar命令对java工程进行打包
- linux时间有几个,Linux下与文件相关的几个时间的介绍
- python cplex优化包工具箱教程
- 寻找春天nbsp;九宫格日记-2012.03.09
- Microsoft Excel 教程「3」:如何在 Excel 中打印工作表?
- java实现统计pv和uv_shell统计pv与uv、独立ip的方法
- 新风口 | 电商直播,跨境商家最该抓住的时代机遇!(附卖家成长教程及解决方案)
- git使用及上传代码到github
- 老毛桃装ubuntu
- 电脑如何拦截弹窗广告
- 解决阿里云此手机号码绑定的账户数已达上限的方法
- Adam优化算法中的指数移动平均
- Python读写文件(txt, csv等)小结
- matlab的死区环节,基于SIMULINK对非线性系统死区环节进行仿真.doc
- 好玩的神乐七奈桌面宠物+附带音效
- 美国博士后|国外生活常识介绍
热门文章
- 操作系统--用户级线程与内核级线程
- Vim自动补全神器:YouCompleteMe
- java 停止kettle转换_通过java运行Kettle转换
- python修改xpath节点_Xpath python在特定文本后查找节点
- dell网卡linux驱动,DELL R710 服务器 Linux 系统网卡驱动安装
- 改进初学者的PID-手自动切换
- lua安全之关于lua扩展第三方库
- iOS开发内存管理总结
- 经典逻辑编程题(本文用python实现)
- webpack打包后的文件夹是空的_vue+webpack 打包文件 404 页面空白的解决方法