Vue-cli3与TypeScript结合搭建项目初试

闲来无事，看到最近有3.0消息发布，而且TypeScript也要加入了所以开始手动实验了一波

闲话少说，让我们开始GO
第一步 vue create mypro !!
接下来才是正题

选择第二个，自有选择 不选默认，方便我们后面自有加想要的设置

接下来 我们可以根据自己的需求来选择，这里我们选Babel,TS,Router,VX,CSS，模块检查，测试

CSS我们使用less编译

测试我们使用Jest

配置文件我们选择生成各自的独立文件，方便操作。以上操作完成后我们就可以生成自己的vue+ts环境了

重点来了 ！！
让我们看看生成的新的环境有什么特别之处

从目录结构看 和之前也有却别，assets现在由public代替，config也不在独立在这里创建。

src里的内容页已经换成了3.x的，注意下面的所有js均已经更换成了新的.ts文件
首先我们来看main中发生的变化

可以看到main中的变化很小，还属于一眼就可以看懂的。再看看路由

是不是很开心 也看的懂！看来一切都还在掌握之中
好了我们来进入组件内部


嗯？这是什么 是不是一眼看完蒙了？
别慌其实还是原来的配方，不过换了种形式。要看懂上面的结构首先我们需要对这几个名词有认识


typescript中private、public、protected修饰符！！！这里重点记录下
1、默认为public
2、当成员被标记为private时，它就不能在声明它的类的外部访问，比如：

class Animal {
　　private name: string;

　　constructor(theName: string) {
　　　　this.name = theName;
　　}
}
let a = new Animal('Cat').name; //错误，‘name’是私有的

3、protected和private类似，但是，protected成员在派生类中可以访问

class Animal {
　　protected name: string;

　　constructor(theName: string) {
　　　　this.name = theName;
　　}
}

class Rhino extends Animal {
     constructor() {
          super('Rhino');
    }         
    getName() {
        console.log(this.name) //此处的name就是Animal类中的name
    }
}

4.构造函数也可以被标记为protected。这意味着这个类不能再包含它的类外被实例化，但是能被继承，也就是可以在派生类中被super执行

class Animal {
    protected name: string;
    protected constructor(theName: string) {
       this.name = theName;
    }         
}

//Rhino能够继承Animal
class Rhino extends Person {
    private food: string;
    constructor(name: string, food: string) {
       super(name);
       this.food = food;    

    }    
     getFood() {
        return `${this.name} love this ${this.food}`
     }
}

let rhino = new Rhino('zhao', 'banana');

看习惯了2.x普通js下组件结构的同志们肯定一时难以接受这种繁琐的方式
不过这是一个趋势也是非常有必要的！
单看 export default！我们都可以看出在ts中一切都要声明，这样才能跟规范更有效率

这句话现在让一个普通人也一眼就可以看出这块代码的来源和出处！
后续待完善