苍穹外卖项目前端DAY01

前端DAY01

1、基于脚手架创建前端工程

使用Vue CLI创建前端工程：

• 方式一：vue create 项目名称
• 方式二：vue ui（比较慢）

2、vue基本使用方法

Vue的组件文件以.vue结尾，每个组件由三个部分组成：

文本差值

属性绑定

事件绑定

双向绑定

条件渲染

axios

axios是一个基于promise的网络请求库，作用于浏览器和node.js中

安装命令

• npm install axios

导入命令

• import axios from ‘axios’

3、路由 Vue-Router

3.1、Vue-Router介绍

vue属于单页面应用，所谓的路由，就是根据浏览器路径不同，用不同的视图组件替换这个页面内容

• 路由组成：
  • VueRouter：路由器，根据路由请求在路由视图中动态渲染对应的视图组件
  • ：路由链接组件，浏览器回解析成
  • ：路由视图组件，用来展示与路由路径匹配的视图组件

3.2、路由配置

• 路由跳转
  • 标签式About
  • 编程式this.$router.push('/about')

3.3、嵌套路由

组件内要切换内容，就需要用到嵌套路由（子路由）

• 实现步骤：
  • 安装并导入elementui，实现页面布局（Container布局容器）—ContainerView.vue
  • 提供子视图组件，用于效果展示 – P1View.vue、P2View.vue、P3View.vue
  • 在src/router/index.js中配置路由映射规则（嵌套路由配置）
  • 在布局容器视图中添加，实现子视图组件展示
  • 在布局容器视图中添加，实现路由请求

4、状态管理vuex

4.1、vuex介绍

• vuex是一个专为Vue.js应用程序开发的状态管理库
• vuex可以在多个组件之间共享数据，并且共享的数据是响应式的，即数据的变更能及时渲染到模版
• vuex采用集中式存储管理所有组件的状态

安装vuex

npm install vuex@next --save

核心概念：

• state：状态对象，集中定义各个组件共享的数据
• mutations：类似于一个事件，用于修改共享数据，要求必须是同步函数
• actions：类似于mutation，可以包含异步操作，通过调用mutation来改变共享数据

4.2、使用方式

• 创建带有vuex功能的脚手架工程

• 定义和展示共享数据

• 在mutations中定义函数，修改共享数据

• 调用mutations中的函数

• 在actions中定义函数，用于调用mutation

总结：如何使用vuex?

• 在store对象的state属性中定义共享数据
• 在store对象的mutations属性中定义修改共享数据的函数
• 在store对象的actions属性中定义调用mutation的函数，可以进行异步操作
• mutations中的函数不能直接调用，只能通过store对象的commit方法调用
• actions中定义的函数不能直接调用，只能通过store对象dispatch方法调用

5、TypeScript

5.1、 TypeScript介绍

• TypeScript（简称：TS）是微软退出的开源语言

• TypeScript是JavaScript的超集（JS有的TS都有）

• TypeScript = Type + JavaScript（在Js基础上增加了类型支持）

• TypeScript文件扩展名为ts

• TypeScript可编译成标准的JavaScript，并且在编译时进行类型检查

  

TS为什么要增加类型支持？

• TS属于静态类型编程语言，JS属于动态类型编程语言
• 静态类型在编译期做类型检查，动态类型在执行期做类型检查

5.2、TypeScript常用类型

• 类型标注的位置
  • 标注变量
  • 标注参数
  • 标注返回值

• 字符串类型、数字类型、布尔类型

• 字面量类型

• Interface类型

• class类-基本使用

注意：使用class关键字来定义类，类中可以包含属性、构造方法、普通方法

• class类 - 实现接口

• class类 - 类的继承