销售信息管理系统总结

 

                   后台数据管理部分：

1、实现方式选择：

 用vue编写后台: 

1. vue是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和dom，这样大大加快了访问速度和提升用户体验。而且他的第三方ui库很多节省开发时间。

 

 

简而言之：

vue两大特点：响应式编程、组件化；
vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟DOM、运行速度快

 

 

2. vue项目开发中常见注意事项

1. 组件名为多个单词

组件名多数情况下应该是多个单词的，根组件 App 除外。

给文件命名的应该注意首字母大小写问题

export default {

name: 'TodoItem',

// ...

}

2. 组件的 data 必须是一个函数。

 export default {

    data () {

        return {

        foo: 'bar'

        }

    }

}

 

（3）组件里面data使用图片路径是要用require('./../mm.png')才能正确访问图片,这样才能够被webpack正确解析

（4）

例如：

<a:href="'http://search.jd.com/Search?enc=utf-8&keyword='+keyWord+'&page='+Math.ceil(record.skuRank/60)+'.html'">跳转</a>

href前面加冒号与双向绑定有关

（5）路由钩子函数

 

-全局钩子：

Vue.beforeEach(function(to,form,next){}) /*在跳转之前执行*/

beforeEach函数有三个参数：

Ø to:router即将进入的路由对象

Ø from:当前导航即将离开的路由

Ø next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。

 

（6）组件内,自定义的样式,要注意命名规范.引用其他页面的时,要修改class的名称.或者将统一的样式放到css文件中.

 

（7）将静态数据统一放到js文件,然后引入到vue组件之中,这样有利于后期维护.

3. vue build打包时注意

1. config/index.js  第二个assetsPublicPath 改为“ ./ ” ， 打包完再改为 “ / ”

2. 注意文件命名，避免index之类的命名，以免打包生成文件造成冲突
3. node_modules文件夹不用上传

4. Vue项目结构标准

（1）—— src

  |—— assets // 项目资源目录

  |—— styles // 样式文件

  |—— reset.scss // reset css，会在 /src/main.js 中被导入

  |—— variables.scss // 项目中的变量，混合（mixin）等公有样式变量

  |—— ...

  |—— images // 图片

  |—— fonts // 字体

  |—— ...

  |—— components // 组件目录

  |—— layout // 布局相关组件

  |—— Header.vue // 头部

  |—— BottomMenu.vue // 底部菜单

  |—— ...

  |—— common // 公有组件

  |—— base // 基础组件

  |—— ...

  |—— pages // 页面目录

  |—— user // 用户相关页面

  |—— Login.vue // 登录页面

  |—— Register.vue // 注册页面

  |—— Info.vue // 详情页面

  |—— order // 订单相关页面

  |—— List.vue // 订单列表

  |—— Detail.vue //订单详情

  |—— ...

  |—— Home.vue // 主页

  |—— ...

  |—— router // 路由

  |—— modules // 存放各个模块的路由

  |—— user.js // 用户模块

  |—— order.js // 订单模块

  |—— index.js // 路由主js，整合各个模块，并且还会定义一些全局钩子等其他

  |—— store // 全局状态管理目录

  |—— mutation-types.js // mutation types

  |—— index.js // 主js，整合各个模块的

  |—— actions.js // actions

  |—— modules // 各个模块的states

  |—— user.js

  |—— order.js

  |—— common // 全局工具方法

  |—— data-format.js // 数据转换

  |—— http.js // 网络请求

  |—— ...

  |—— App.vue

  |—— main.js

  |—— init-plugins.js // 依赖的第三方的初始化，会在main.js中引入

 

5、VUE组件模版编写方式

 

<!-- type="x-template" 是为了不让这个script进行解析  -->

 

（1）<!-- 用script标签名的方式 -->

 

<script id="component1" type="x-template">

 

    <h3>第一个局部组件——定义方式1</h3>

 

</script>

 

（2）<!-- 用 template标签名的方式  推荐-->

 

<template id="component2">

 

    <p>第二个局部组件——定义方式2</p>

 

</template>

 

（3）<!-- 内置组件-->