vue-cli3+typescript初体验小结

前言

气势汹涌,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。还包括这里没有列举出来的ModelEmitInjectProvide,可以自己尝试下。

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复制到工作区首位的项目的根目录下,重启编辑器,有比较大的概率可以解决警告提示。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • TypeScript开发Node.js程序的方法

    当我第一次发现 TypeScript 时,就把它用到了自己的 JavaScript 程序中.使用 TypeScript 有很多好处,现在你要让我在用原生 JavaScript 写任何东西的话,需要给我一个令人信服的理由. 在本文中,我将向你展示如何设置一个简单的开发环境,以便使用 TypeScript 编写 Node.js 应用程序. 首先在 TypeScript 中可能有一千种或更多种不同的方法去创建 Node.js 程序.我只是想展示自己喜欢的方式. 另外你可以在此处找到我的入门项目:htt

  • TypeScript中的方法重载详解

    前言 方法重载(overload)在传统的静态类型语言中是很常见的.JavaScript 作为动态语言, 是没有重载这一说的.一是它的参数没有类型的区分,二是对参数个数也没有检查.虽然语言层面无法自动进行重载,但借助其动态的特性,我们可以在代码中手动检查入参的类型,或者通过 arguments 获取到参数个数,从而实现根据不同的入参做不同的操作. 比如有一个获取聊天消息的方法,根据传入的参数从数组中查找数据.如果入参为数字,则认为是 id,然后从数据源中找对应 id 的数据并返回,否则当成类型,

  • Vue框架TypeScript装饰器使用指南小结

    前言 装饰器是一种特殊类型的声明,它能够被附加到 类声明,方法, 访问符,属性或参数 上. 装饰器使用 @expression这种形式, expression求值 后必须为一个函数,它会在 运行时被调用 ,被装饰的声明信息做为参数传入. 本篇先从项目的宏观角度来总结一下Decorator如何组织. 目录 主要的Decorator依赖 vue-class-component vuex-class vue-property-decorator core-decorators 自定义Decorator

  • Nuxt项目支持eslint+pritter+typescript的实现

    脚手架安装好nuxt的基本项目 npx create-nuxt-app <项目名>,如:npx create-nuxt-app nuxt-ts,按照提示安装你想要的东西,本次项目预装: Universal模式下koa+PWA+linter+prettier+axios ,默认的项目目录如下: eslint + prettier + vscode 保存自动格式化&修复 本人习惯缩进为4个空格,但是eslint&nuxt生成的项目默认为2个,因此需要更改配置 .editorconf

  • 深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践

    前言 阿特伍德定律,指的是any application that can be written in JavaScript, will eventually be written in JavaScript,意即"任何可以用JavaScript来写的应用,最终都将用JavaScript来写" 在使用新技术的时候,切忌要一步一步的来,如果当你尝试把两门不熟悉的新技术一起结合使用,你很大概率会被按在地上摩擦,会yarn/npm和React脚手架等技术是前提,后面我会继续写PWA深入和No

  • 手把手教你使用TypeScript开发Node.js应用

    为什么要使用TypeScript? 为了减少代码编写过程中出现的错误,以及更好的维护你的项目,本文将手把手教你配置一个简单的开发环境来编写Node.js的应用程序,创建这样的一个开发环境有很多方式,这只是其中一种,希望对你有所帮助! 手把手教你使用TypeScript开发Node.js应用 首先配置package.json 因为要在项目中使用Webpack,所以首先得创建一个package.json文件,我们可以使用npm init来生成 { "name": "start&q

  • 详解TypeScript+Vue 插件 vue-class-component的使用总结

    首先 下载 npm install vue-class-component vue-property-decorator --save-dev 一梭子直接干: 其次,咱来说说它们的区别与联系: vue-property-decorator社区出品:vue-class-component官方出品 vue-class-component提供了Vue.Component等: vue-property-decorator深度依赖了vue-class-component,拓展出了更多操作符:@Prop.@

  • vue-cli3+typescript初体验小结

    前言 气势汹涌,ts似乎已经在来的路上,随时可能敲门. 2015年,三大前端框架开始火爆的时候,我还在抱着Backbone不放,一直觉得可以轻易转到其他框架去.后来换工作,现实把脸都打肿了,没做过vue.react.angular?不要! 今天,不能犯这个错了,毕竟时不我与,都快奔三了. vue-cli3 vue-cli3的详细功能推荐官方文档,不在本文介绍范围内. 安装: npm install -g @vue/cli 检查安装成功与否: vue --version 创建项目: vue cre

  • Django3.0 异步通信初体验(小结)

    此前博主曾经写过一篇博文,介绍了Django3.0的新特性,其中最主要的就是加入对ASGI的支持,实现全双工的异步通信. 2019年12月2日,Django终于正式发布了3.0版本.怀着无比的期待,我们来尝试一下吧! (附ASGI官方文档地址:https://asgi.readthedocs.io/en/latest/extensions.html) 一.创建Django3工程 利用Pycharm的方便,直接通过virtualenv创建虚拟环境,并安装Django3.0. 打开控制台,看看都安装

  • v语言初体验小结

    最近github上开源了一个"新语言"vlang,火的不得了,我不信,于是乎,尝试了一下,真香. 以下内存均来自https://www.v-lang.cnv语言文档 by 20190701 ubuntu安装vlang 依赖安装 这里采用的是ubuntu的机器,centos的会报错,暂时没有去操作 查看机器型号 $ uname -a Linux liwang 4.15.0-54-generic #58-Ubuntu SMP Mon Jun 24 10:55:24 UTC 2019 x86

  • 详解Vue3.0 + TypeScript + Vite初体验

    项目创建 npm: $ npm init vite-app <project-name> $ cd <project-name> $ npm install $ npm run dev or yarn: $ yarn create vite-app <project-name> $ cd <project-name> $ yarn $ yarn dev 项目结构 main.js 在个人想法上,我觉得createApp()是vue应用的实例,createApp

  • vue.js 初体验之Chrome 插件开发实录

    背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见的动画效果都封装起来了,非常实用.但是有时候在开发中,仅仅只是需要某一两个动画效果,把整个CSS文件都引入,这样不是太好. 需求就出现了,能不能有一个工具可以直接预览Animate.css对应的动画效果,并且生成对应的动画代码呢? 作为一个UI开发,平时跟Chrome浏览器打交道最多,于是就整了一个Chrome插件可以及时预览对应Animate.css中的动画效果并生成对应的动画代码,这样在实际开发中

  • 基于vue-ssr的静态网站生成器VuePress 初体验

    什么是VuePress VuePress由两部分组成:一个基于Vue的轻量级静态网站生成器,以及为编写技术文档而优化的默认主题. 它是为了满足Vue自己的子项目文档的需求而创建的. VuePress为每一个由它生成的页面提供预加载的html,不仅加载速度极佳,同时对seo非常友好.一旦页面被加载之后,Vue就全面接管所有的静态内容,使其变成一个完全的SPA应用,其他的页面也会在用户使用导航进入的时候来按需加载. 参考官方文档可知该项目有一下特点: 内置markdown(基础功能) 支持PWA 集

  • Vue 打包体积优化方案小结

    Vue-cli3 打包体积优化方案 前言: 公司项目完成后 ,打包完成后有1.18MB,其实感觉还行了,但是还可以有优化的地方,对于咱们有精益求精(有没有还是有点*数的)的精神下再去优化,可以先在项目中安装webpack-bundle-analyzer可以看到各个文件的大小 npm install webpack-bundle-analyzer -save-dev 在vue.config.js中进行配置 module.exports = { chainWebpack: config => { c

  • vue cli3.0打包上线静态资源找不到路径的解决操作

    项目中遇到打包之后静态资源路径找不到,报如下错误: 解决方法是: 在项目的根目录下创建vue.config,js文件,在里面配置静态资源的路径,publicPath是配置静态资源路径的属性,vue.config,js文件的代码如下: module.exports = { publicPath: './' } 补充知识:vue-cli3 npm run build 打包后静态资源的配置 vue.config.js的配置 vue.config.js配置如下: const path = require

  • element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)

    突然发现已经半年没更新的element-ui更新了 更新了什么还不清楚,但是告知了基于vue3.x版本的 element-plus 已经出来了. 先来上手体验一下 首先安装一个最新的@vue-cli,搭建一个vue3.x的项目,脚手架创建流程已经很简洁了,这里就不多说了.建好之后,直接开始安装吧 npm i element-plus 为了方便,直接采取全部引入的方式 src/plugins/element.ts import ElementPlus from 'element-plus' imp

  • JetBrains Fleet 初体验

    几天前获得了fleet的体验资格.长话短说,今天就来和你一起看看现在的fleet都有啥 先看名字–fleet 什么是fleet? n. 舰队;捕鱼船队;(一国的)全部军舰,海军 看来,JetBrains是想让"One IDE to code it all."的口号落实,真正的实现一人成军.配合它自带的Distributed mode,前端后端统一管理.或许真正的Monorepo就会来临? 再看图标 铁灰色底座配合缺了两个缺口和天空蓝淡紫渐变的圆球主体,我猜它-抱歉我看不懂,于是我当场质

随机推荐