我的mac是安装了homebrew https://brew.sh/
安装方法: (需前置安装xcode)
nodejs默认安装了npm包管理工具, 但npm对天朝网络来说连接缓慢.可能需要科学的上网方法
或者,使用国内源代替
如果你使用npm 无问题, 可以跳过此步骤
如果没有安装cnpm, 之后的命令都要用npm代替cnpm
安装完后使用vue --version查看版本
国内就无奈的选择 y 吧
如果使用JavaScript 直接选择第二项就可以了
如果使用typescript 请选择第三项, 手动配置
因为上一步有自行选择vue版本 所以要做一下选择
安装完成:
我们可以根据提示进入工程目录,然后运行起来
4.选择要安装的功能框架
根据需求设置, 这里我就不用保存了
项目创建完成
可以看到和vue2.0基本没有区别, 有一些区别是因为我们使用typescript引起的
这里我们要看的第一个文件是: main.ts
技术胖webpack教程webpack中使用echarts
在 webpack 的入口文件中直接引入第三方类库,向外全局暴露，以 jquery 插件使用为例
1.创建本地项目 webpack-demo
2.在 webpack-demo 的根目录下创建 package.json 文件
模块说明：
4.修改 package.json 文件的 scripts 属性值,进行打包资源的配置
5.安装相关的 loader
6.安装jquery
7.在入口文件 app.js 中引入 jquery
8.给按钮绑定事件
9.运行命令
10.结果展示
通过 webpack 的 ProvidePlugin 插件全局引入第三方类库,以 echats 使用为例
1 ~ 5步同上
6.安装echarts
7.在webpack.config.js中进行配置
7.创建echart容器
8.初始化echarts
9.运行命令
10.结果展示
TypeScript中的数据类型有：undefined
number:数值类型
string : 字符串类型
boolean: 布尔类型；
enum：枚举类型；
any : 任意类型(不建议用)；
void：空类型；
Array : 数组类型
Tuple : 元组类型；
Null ：空类型。
Undefined类型
在js中当你定义了一个变量，但没有给他赋予任何值的时候，他就是Undefined类型。这可能和你以前学的语言稍有不同，其他语言会有个类型的默认值。
我们现在来看一个例子，比如我们要声明一个年龄的变量age,我们要使用数值类型，也就是Number,但是我们不给他任何的值，我们只是在控制台给它输出，然后我们来看结果。
新建demo01.ts文件，下入下面代码：
//声明数值类型的变量age，但不予赋值
var age:number
console.log(age)
1
2
3
写完后保存代码，进行运行任务，然后生成demo01.js，在终端中使用node demo01.js来进行查看运行结果。控制台输出了undefined,跟我们预想的一模一样。
Number类型
在TypeScript中，所有的数字都是Number类型，这不分是整数还是小数。比如下面我们声明一个年龄是18岁，身高是178.5厘米。
新建一个文件demo01_1.ts文件，写入下面代码：
var age:number = 18
var stature:number = 178.5
console.log(age)
console.log(stature)
1
2
3
4
然后执行转换，查看结果，我们可以在控制台看到结果已经顺利输出，没有任何意外。
在TypeScrip中有几种特殊的Number类型 我们需要额外注意一下：
NaN：它是Not a Number 的简写，意思就是不是一个数值。如果一个计算结果或者函数的返回值本应该是数值，但是由于种种原因，他不是数字。出现这种状况不会报错，而是把它的结果看成了NaN。（这就好比我们去泰国外，找了一个大长腿、瓜子脸、水蛇腰的女神。房也开好了，澡也洗完了，发现跟我们的性别统一，我们只能吃个哑巴亏，你绝不会声张）
Infinity :正无穷大。
-Infinity：负无穷大。
string类型
由单引号或者双引号括起来的一串字符就是字符串。比如"哈哈", ‘呵呵’。看下面的代码：
demo01_2.ts
var hh: string = "哈哈"
console.log(hh)
1
2
这时候控制图就会乖乖的输出技术胖 哈哈
boolean布尔类型
做任何业务逻辑判断都要有布尔类型的参与，通过对与错的判断是最直观的逻辑处理。boolean类型只有两种值，true和false。
var b:boolean = true
var c:boolean = false
1
2
enum 类型
这个世界有很多值是多个并且是固定的，比如：
世界上人的类型：男人、女人、中性
一年的季节：春、夏、秋、冬 ，有四个结果。
这种变量的结果是固定的几个数据时，就是我们使用枚举类型的最好时机：
demo01_3.ts
enum REN{ nan , nv ,yao}
console.log(REN.yao) //返回了2，这是索引index，跟数组很想。
1
2
如果我们想给这些枚举赋值，可以直接使用=,来进行赋值。
enum REN{
nan = '男',
nv = '女',
yao= '妖'
}
console.log(REN.yao) //返回了妖 这个字
1
2
3
4
5
6
any类型
一个写惯了前端的人，有时候不自觉的就分不清类型了。这是个不好的习惯，也是前端的痛，就因为这个原因，JavaScript也多次被人诟病说大型项目不适合用JavaScript。但是习惯一旦养成，改是需要时间和磨练的。TypeScript友好的为我们提供了一种特殊的类型any，比如我们在程序中不断变化着类型，又不想让程序报错，这时候就可以使用any了。
var t:any =10
t = "hhhh"
t = true
console.log(t)
1
2
3
4
Null类型：
与 Undefined 类似，都代表空。Null 代表是引用类型为空。意义不大，但是有用。后续学习中会使用到。
引用类型-数组
初始化数组的两种方法:
声明数组跟声明一个普通变量是一样的，都是通过 var let 关键字实现的，只不过数组的类型说明符比较复杂而已。
1. 声明数组的2种方法
声明数组跟声明一个普通变量是一样的，都是通过 var let 关键字实现的，只不过数组的类型说明符比较复杂而已。
let arr1: number[] = [1, 2, 3, 4]
let arr2:Array<number>= [4, 4, 5]
1
2
3
2. 给数组赋值
数组是存储大量数据的集合，声明数组之后，需要给数组存储数据。这时候有两种方法：
字面量赋值法：直接使用“[ ]”对数组进行赋值。
构造函数赋值法：
字面量赋值：
//定义一个空数组，数组容量为0
let arr1:number[] = []
//定义一个数组时，直接给数组赋值
let arr2:number[] = [1,2,3,4,5]
//定义数组 的同事给数组赋值
let arr3:Array<string>= ['hh','哈哈','呵呵']
let arr4:Array<boolean>= [ true,false,false]
1
2
3
4
5
6
7
需要注意的是，在TypeScript中指定数据类型的数组只能存储同一类型的数组元素。
//报错！ 必须存储number类型的数据
let arr5:number[] = [1,2,true]
1
2
构造函数赋值：
在 TypeScript 中使用 Array 这个引用类型来表示数组的，那么每一个数组都是 Array 类型的实例。那么，我们在创建数组的时候也可以使用构造函数来进行赋值。
let arr1:number[] = new Array()
let ara2:number[] = new Array(1,2,3,4,5)
let arr3:Array<string>= new Array('hh','哈哈','呵呵')
let arr4:Array<boolean>= new Array(true,false,false)
1
2
3
4
这两种方法，都可以给数组进行赋值，在实际开发中使用哪种方法都是可以的。
认识元组，一种特殊的数组
元组是一种特殊的数组，元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。比如，你可以定义一对值分别为string和number类型的元组。元组在实际开发中使用的非常少，大家了解一下就可以了，不做过多介绍。
//声明一个元祖类型
let x : [string,number]
//正确的初始化
x = ['hello',10]
//错误的初始化方法
x = [10,'hello']
1
2
3
4
5
6
TypeScript中其它的数组知识跟JavaScript中的一样，我再这里就不磨磨唧唧的浪费大家时间了。感兴趣的可以写一下JS中的数组方法。
————————————————
