苍穹外卖项目前端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类 - 类的继承
