环境搭建
采用VUE脚手架，也可采用飞冰可视化代替命令行，自动整合了webpack，node.js，elemtnt——UI组件，代替下载，构建打包操作。
以ERP系统为例，VUE是一个单页应用，这里我们需要两张不同的页面方案。即——后台管理+前台用户展示页。所以我们用需要有两种不同的导航和页面构造。
项目架构
/Dist 为项目打包后供部署的html,css ,js文件
/src 包含项目代码
/components 项目组建
/pages 项目页面
/styles 项目css,页面格式等
/assets 项目资源文件
/main.js 项目入口文件
/router.js,/routerConfig.js 项目路由配置文件
/node_modules项目依赖，Node环境下的依赖配置
router路由与导航
导航布局包裹在 Layouts布局里面。将导航Narbar的VUE打包成布局，在页面中引用。
页面导航布局
将布局扁平化，一个或者多个页面采用相同布局
path:浏览器键入的跳转URL
layout:页面采用哪种布局方案
component:对应哪个页面
钩子函数
函数作用表
常用函数作用
methods函数
在此函数中，可以定义页面的各种方法。包括带参数按钮响应事件，@click事件，鼠标划入事件等。
data函数
由于每个页面都要有可以有响应式数据的data，所以我们采用函数，即data return的形式将响应式数据包装成函数，在页面复用的时候，不会有多个DATA的定义，而是所有页面共享一个函数。
mounted与created
created加载顺序优先于mounted，在整个页面模板挂载之后实行的函数
页面构造
index.js为该页面的入口页面
InsertMatch.vue及页面核心Vue文件，在该文件中，可以用import方法导入组建，例如目录文件下的下的fixedtable
Vue文件包括：
<template></template> ——div布局
<script>——页面各种钩子函数
data() ——响应式的页面数据
methods: {}——页面函数方工具法
-
mounted:function(){
},——页面初始化方法
}
- </script>
- <style></style>——页面样式，相当于Css
项目打包与部署
打包方式
单页项目打包
1.在控制台输入webpack命令进行打包
2.在飞冰页面点击“构建项目进行打包”
两种方式打包后的目录文件将会出现在Dist文件夹中。
在打包环境中添加文佳路径前缀：
基于VUE-Cli3 ,在vue.config.js里，添加例如
baseUrl:"/WebForShow-Dota2-Legue/dist/",
的路径
配置GitHub的实时预览
点击项目->Settting->Github Pages ,将网站首页添加进去，即能在公网输入地址浏览了。
参考文档：
VUE风格指南（相当于VUE版的阿里云代码规范）：https://cn.vuejs.org/v2/style-guide/
VUE前后端对接
可以这样写：
let params = new URLSearchParams();//定义一个传输 参数对象
params.append('UserID',this.user.username);
params.append('password',md5(this.user.password));
params.append('longtitude',"网页登录");
params.append('latitude','');//在该对象添加传输参数
// console.log(row.matchId);
this.$http.post(this.api+'/login', params,{
headers: {
'Content-Type': 'application/x-www-form-urlencoded'//设置参数传输的类型到后台的格式为默认格式，如果是封装成JSON格式的话，需要后台换成JSON格式接收。
}
})
.then((response) => {
console.log(response.data);
//登录成功 });
