vue-cli

传统的web项目中一个页面就是一个html文件
各个文件之间都是独立的,想要进行一个公共的操作(例如判断用户是否已经登录)
就需要在每个页面中编写判断的代码,工作量很大

这种结构的web项目,目前被淘汰了,没有一种全局配置方式

现在的前端推出了一种新的架构思想

是一种单页面架构＋组件的思想

一个项目中最终只有一个html文件,也只new一个vue对象
    在html页面中可以切换不同的组件
    这样就可以很方便的进行一些全局的配置
    
搭建前端新的项目结构
 
 前提:需要一个前端运行环境  node.js是前端开发的一个运行环境
 
 使用hbuilder x创建一个前端项目
 
 了解项目的结构
 
 在终端中使用npm run serve 命令 启动前端项目

创建自己的组件  Login.vue

在前端项目中,组件不能直接通过文件名访问,需要借助vue中组件路由的功能,
1.安装下载 vue router组件     让vue把所有组件管理起来,为每个组件配置一个映射地址

2.创建一个router目录,创建一个index.jx文件
    配置路由

import login from '../views/login'; /* 导入其他组件 */

import content from '../components/content'; /* 导入其他组件*/

Vue.use(router)
 
3.在main.js中配置路由组件

import Vue from 'vue';

import router from 'vue-router'; /* 导入路由 */

var rout = new router({

    routes: [ {

   path: '/index',

   name: 'index',

   component: index

},

{

    path: '/content',

    component: content

     }

  ]

})

//导出路由对象

export default rout

4.在app.vue中添加一个<router-view/>

elementUI
1.下载elementUI
2.在main.js中配置elementUI
3.在登录组件中,借用elementUI表单组件,生成登录表单