vue-cli

传统中web项目中一个页面就是一个html文件

相互独立存在，想要进行公共操作，例如：判断登录

就需要每个页面都有判断代码，工作量大，被淘汰了，没有全局配置方式

推出了新的架构思想，是单页面架构+组件

一个项目中最终只有一个html文件 也只有一个vue对象

在html页面中导入不同的组件，以达成一个页面

这样就实现了，全局配置

搭建前端新的项目结构

前提：需要一个前端运行环境 node.js是前端开发的一个运行环境

使用hbuilderx创建一个前端项目

一个vue文件就是一个组件

了解项目的结构

在终端使用npm run serve命令 启动

组件路由

给组件提供一个地址进行连接

在前端项目中，组件不能直接通过文件名访问，需要借助vue中组件路由功能

1.安装下载vue router组件 让vue把所有的组件管理起来，并为每一个组件配置一个映射地址

2.在src下创建一个router目录

创建一个index.js将vue和vue-router导入

配置路由

3.在main.js中配置路由组件

4.在app.vue中添加一个<routter-view>用来切换不同组件

../上一级文件./相当于this.

ElementUI提供桌面组件依靠vue2.0

ElementUI

1.下载ElementUI

npm i element-ui -S

2.在main.js中配置elementUI

3.在登陆组件中，借助elementUi表单组件，生成登录表单