闲来无事,看到最近有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中一切都要声明,这样才能跟规范更有效率
这句话现在让一个普通人也一眼就可以看出这块代码的来源和出处!
后续待完善