环境搭建

采用VUE脚手架，也可采用其UI界面可视化代替命令行，自动整合了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:对应哪个页面

钩子函数

函数作用表

20170307143230692.png

常用函数作用

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.在UI页面点击“构建项目进行打包”

两种方式打包后的目录文件将会出现在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);

             //登录成功          });

阿里飞冰-前端Vue框架构造与联动