vue2+ts

vue-cli搭建vue2+ts项目

使用 vue-cli 创建

vue create 项目名称

Please pick a preset - 选择 Manually select features
Check the features needed for your project - 选择上 TypeScript ，特别注意点空格是选择，点回车是下一步
Choose a version of Vue.js that you want to start the project with - 选择 2.x

等到项目构建完成便可启动项目了,命令： yarn serve或者npm run serve

>yarn serve

看到熟悉的页面,启动成功.

项目结构：

与之前的vue2项目比较出现了几个比较特殊的文件之外，router.js变为router.ts,main.js 变为main.ts,其余的文件和vue2一样。

tsconfig.json

typescript 配置文件https://cn.vuejs.org/v2/guide/typescript.html#%E6%8E%A8%E8%8D%90%E9%85%8D%E7%BD%AE

shims-tsx.d.ts

允许.tsx 结尾的文件，在 Vue 项目中编写 jsx 代码

shims-vue.d.ts

主要用于 TypeScript 识别.vue 文件，Ts 默认并不支持导入 vue 文件

vue.config.js

进入项目目录发现没有 vue.config.js,手动创建一个和package.json同级

vue.config.js配置

// const proxyConfig =
//   process.env.NODE_ENV === "production"
//     ? require("./proxy.pro.config")
//     : require("./proxy.dev.config");module.exports = {assetsDir: "static",runtimeCompiler: true,devServer: {host: "0.0.0.0",// 端口号port: 8080,https: false,// https:{type:Boolean}//配置自动启动浏览器open: true,//热更新hot: true,//配置多个跨域proxy: { }// proxy: proxyConfig.proxyList,},};

如果遇到options.proxy should be {Object|Array}错误,将

proxy:{}

改为

proxy:null

main.ts、router.ts和vue2内容一样没啥好说的

*.vue 文件

打开 views文件加下的 Home.vue

<template><div class="home"><img alt="Vue logo" src="../assets/logo.png" /><HelloWorld msg="Welcome to Your Vue.js + TypeScript App" /></div>
</template><script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src@Component({components: {HelloWorld,},
})
export default class Home extends Vue {}
</script>

<script> 标签上声明 lang="ts",使用typescript语言
引入 vue-property-decorator

一、手把手教你 Vue2+Ts相关推荐

三、手把手教你 Vue2+Ts
Vue2+Ts 君自故乡来新建vue文件 <template><div class="about"><h1>{{message }}</ ...
手把手教你 MongoDB 的安装与详细使用（二）
上一篇文章练习了,MongoDB 的以下操作安装 MongoDB 服务连接 MongoDB MongoDB 创建数据库 MongoDB 删除数据库 MongoDB 插入文档 MongoDB 删除文 ...
【手把手教你如何从Tushare库下载股票数据，并保存在硬盘当中，第一篇数据过滤】
手把手教你如何从Tushare库下载股票数据,并保存在硬盘当中.第一篇数据过滤前言一.Tushare是什么? 二.代码 1.引入库 2.交易日的逻辑 3.先把每天个股的基础数据调出来 3.接下来我 ...
实例：用C#.NET手把手教你做微信公众号开发（20）--使用微信支付线上收款：jsapi方式
在做线上.线下销售时,可以使用微信便捷支付,通过微信公众号收款有很多种收款方式,如下图: 今天我们来讲一下jsapi支付,场景就是在微信内打开某个页面,完成在线支付,同样一个网页,使用微信打开就是js ...
还没理解微前端？手把手教你实现一个迷你版
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群最近看了几个微前端框架的源码(single-spa[1].qiankun[2].micro- ...
【手把手教你】用backtrader量化回测海龟交易策略
01 引言海龟交易策略是比较经典的趋势交易系统之一,涵盖了从入场交易(品种选择).仓位管理(基于ATR加减仓).离场(触发条件)的整个过程.机械套用海龟交易法则在A股上进行交易可能效果不佳,但其交易 ...
【手把手教你】玩转Python金融量化利器之Pandas
前言 "手把手教你"系列将为Python初学者一一介绍Python在量化金融中运用最广泛的几个库(Library): NumPy(数组.线性代数).SciPy(统计).pandas ...
【手把手教你】股票可视化分析之Pyecharts（二）
01 引言 Pyechartss 是基于Echarts 的开源可视化库,可以制作非常精美的图表.公众号推文<[手把手教你]股票可视化分析之Pyecharts(一)>,以股票交易数据为例,为 ...
手把手教你从0开始搭建一个vue项目（完结）
前言上一节webpack实战之(手把手教你从0开始搭建一个vue项目)最后我们完成了css样式的配置: webpack.config.js: const path = require("p ...

一、手把手教你 Vue2+Ts