1.创建vue2.x+ts项目

• 1.vue create 项目名
• 2.选择第三个
• 3.除了最后两个和第二个不选其他都选

• 剩下全是回车
• 5.进来一样删除文件

vue-demo
├── public       #静态资源文件 
│   ├── favicon.ico
│   └── index.html
├── src     #源代码
│   ├── assets   #静态 css/js img ...
│   │   └── logo.png
│   ├── components  //全局组件
│   │   └── HelloWorld.vue
│   ├── router   //vue 路由配偶文件
│   │   └── index.ts
│   ├── store   //vuex 配置文件
│   │   └── index.ts
│   ├── views   //页面级组件
│   │   ├── AboutView.vue
│   │   └── HomeView.vue
│   ├── App.vue    //根组件
│   ├── main.ts    //程序的入口
│   ├── shims-tsx.d.ts   //vue中支持ts 
│   └── shims-vue.d.ts
├── .browserslistrc   //浏览器的兼容--css3-转换为 css常见代码
├── .eslintrc.js      //ESlint 的配置文件 代码风格检测
├── babel.config.js   //将ES6--->ES5代码
├── package.json    //三方包的声明文件
├── tsconfig.json   // ts配置文件
├── vue.config.js  //vue配置=====webpack.config.js
└── yarn.lock     //版本锁定器

2.eslint 报错解决

1.在报错的前一行js加入注释 取消下一行的报错提示

//eslint-disable-next-line

2.在script 标签中的第一行加入 注释 取消整个js代码的报错

/* eslint-disable */

3.最终方案用eslint规范格式化整个代码程序

yarn lint     
npm run lint

3.类组件的装饰器语法 data的定义

export default class App extends Vue{
//变量 定义直接写
userName = "张三"；
num = 100；
bool =true;
nu = null;
arr:number[] = [100,200,300]
注意在创建对象的时候在src里面创建一个types文件夹
用接口弄好在这个里面在进行导入
user:User={ name: "张麻子", age: 40, 数组也定义 like: ["打劫"]}
}

4.@Component -装饰器

作用：声明组件的vue组件 组件注册

@Component({
    //子组件注册
    components:{
        Appheader,
    },
 //filters   [弃用状态]
  //directives	指令
})

5.methods直接原型方法写入到类中即可

export default class App extends Vue{
arr:number[] = [100,21,215,4];
sum (a:number,b:nnumber):number{
return a+b;
}
//求平均数
getArrAvg():nuber{
   let num = this.arr.reduce((pre,next,index,arr)=>{
   if(index==arr.length-1){
       return (pre+next)/arr.length;
   }
   return pre+next;
   },0 默认值pre);
   return num;
}
}

6.@Prop-装饰器 父传子

语法 在上面导入Prop 传的时候一样 子组件接收 @Prop({type:String,default:''})接收的变量名{修饰符}:数据类型

• 父组件写

<app-header title= "我是父组件传递的值" :num="100">

• 子组件接收

export default class App extends Vue{

@Prop({type:String,default:''})title?:String;
}

7.@Emit-装饰器 -子传父

如果事件的名称未通过事件参数提供 则使用函数名称。在这种情况下，camelcase名称将转换为

kebab-case。

• 子组件写

//导入 Emit 
button @click="sendData"
@Emit()
sendData():String{
    业务
    数据如果传递 必须return
    return '我是子组件传递给父组件的数据'
}

• 父组件写

<子组件 自定义事件=自己的函数
<子组件 @send-data="getData"></子组件>
接收子组件传递过来的数据
getData(data:String):void{
    consonglog(data)
}

8.computed获取数据

参与计算的数据源发生改变 返回新数据

在类的原型方法 标记 get xxx(){}

input v-model="num" {{num}}

//计算属性
get newNnm(){
return Number(this.num) +1000;
}