前端学习笔记

前端主要内容

HTML、CSS
JavaScript
axios
Vue基础语法（router、vuex、typescript）
Element UI

基于脚手架创建前端工程

node.js 前端项目的运行环境,也就是javascript的运行环境
npm javascript的包管理工具
Vue CLI 基于Vue进行快速开发的完整系统，实现交互式的项目脚手架

• 创建项目
  方式1：vue create 项目名
  方式2：vue ui

项目结构：

• node_moudles:当前项目依赖的js包

• assets:静态资源存放目录

• components:公共组件存放目录

• App.vue:项目的主组件,页面的入口文件

• main.js:整个项目的入口文件

• package.json:项目的配置信息\依赖包管理

• vue.config.js:vue-cli配置文件

• 启动项目

在vue.config.js中修改前端端口号
在vue.config.js中设置代理端口号

vue的基本使用

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

• 结构
• 样式

一般对页面上的内容就是类型type\值value\事件@或v-on

• 事件绑定
• 双向绑定,表单输入项和data方法中的属性进行绑定,任意一方改变都会同步给另一方
• 条件渲染,根据表达式值,动态渲染页面元素

axios

axios的API列表：

• axios.get
• axios.delete
• axios.options
• axios.post
• axios.put
• axios.patch

一般这里要包含请求方式,请求路径,请求体,响应体

路由Vue-Router

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

路由组成

• Vuerouter:根据路由请求在路由视图中动态渲染对应的视图组件
  包含一个路由表
• :生成超链接标签
• :路由视图组件,展示与路由路径匹配的视图组件

路由跳转方式
标签式,About
编程式,this.$router.push(‘/about’)

嵌套路由

嵌套路由,组件内切换内容,就需要用到嵌套路由(子路由)

状态管理 vuex

vuex是一个专为Vue.js应用开发的状态管理库

心得

用户模块中,此界面本来就有基础界面和新增和修改用户对话框的功能,只不过开始时新增和修改用户对话框不可见,通过按钮触发事件,将其可视化