#vue项目全家桶

查看

git clone https://github.com/fastCreator/vue-zyx 进入打包后文件/dist/assets/index.html 就可以查看 账号:admin 密码:admin

技术栈

###开发栈 vue + vuex + vue-loader + vue-router + webpack + mockJs + element-UI +axios ###调试 vue tools ###动画 velocityjs + animation.css

文档

• vue
• vuex
• vue-loader
• element UI
• lodash
• Vue Tools
• webstorm vue插件
• webstorm vue es6支持
• 关于vuex
• animate.css
• velocityjs
• Vue原理解析之Virtual Dom

插件

• vue-fullcalendar

目录结构

├── build                         # 打包配置文件 
├── client                        # 客户端开发代码
│    ├── api                     # ajax请求
│    ├── components              # 组件
│    ├── config                  # 前端配置文件
│    │    └nav.js                 # nav配置文件  
│    ├── directives              # 自定义指令
│    ├── router                  # 路由
│    ├── store                   # vuex状态管理中心
│    │    └modules                # 分组模块
│    ├  view                       # 视图
│    ├  app.js                     # 入口文件
│    ├  app.vue                    # 入口模板
│    └  auth.js                    # 用户鉴权
├── dist                          # 打包静态文件 
├── mock                          # 数据模拟 
├── plugins                       # 开发辅助插件 
├── static                        # 静态文件 
├── theme                         # element UI 主题包 
├── element-variables.css         # element UI 编辑文件
├── node_modules                  # dependencies
└── package.json                  # package info

运行

 $ npm install 
 
 To develop:
 $ npm run dev
 
 To build for production:
 $ npm run build
 
 To lint you code:
 $ npm run lint

element-UI 自定义主题

###安装工具
npm i element-theme -g

###修改主题
直接编辑 element-variables.css 文件

###编译主题
et

项目图标库

阿里图标库（智营销图标库）github登录

加入到我的收藏=》添加到我的项目(智营销)=>下载至本地
替换到 static/fonts目录 

服务端渲染

暂不考虑服务端渲染,-文档

mock

打包进入前端，截断ajax请求，前后端分离

vuex自定义插件

选择性存储状态进入默认localStorage，get/set

简介

Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。

vue 和react比较

1,React推荐jsx，缺点:阅读性比较差,优点:为未来跨平台做基础(用不同解释器) 2,大部分人觉得vue学习成本比较低 3,vue轻量 4,React使用 Virtual DOM，用diff算法更新视图；vue:使用get/set事件响应更新视图 5,React做数据比较庞大页面有性能优势

开发规范

###命名规范 1,Css样式名称、Less样式名称等以小写字母,多个单词间用下划线连接,如:body_class
2,Css文件名称,以小写字母命名,多个单词间用点或者中划线连接,如:animate.min.css,animate-min.css
3,Html文件名称,以小写字母命名,多个单词间用点连接,如:system.setting.html
4,Js变量名、函数名、Id等使用驼峰命名法,如:getElementById()
5,图片名称以小写字母,多个单词间用下划线连接,如:body_background.jpg
6,组件命名约定(在 HTML 模版中，请使用 kebab-case 形式)
7,路由地址统一使用小写字母命名
###编码 1,设置webstorm的文件编码为UTF-8,设置方法:File->Settings->File Encoding->Project Encoding及Default encoding for properties files为UTF-8
2,JS尽量写单引号，html尽量双引号
3,语句结尾不需要写封号，让JS自动识别
4,添加'use strict';严谨模式开发代码
5,所有的待删除代码统一使用双斜杠进行注释,不管是单行还是多行。尽量少使用带号的代码注释,带的注释为功能或方法的说明使用
6,方法注释名称

    /**
     * 方法或者代码作用说明 
     * @param 代码参数说明,每个参数独占一行
     * @returns 如果有返回值,说明返回值内容
     * @author 开发者署名
     * @time 编写或者修改时间
     */

7,多个变量一同申明时,使用一个var关键字 bash var a; var b; var c=1; 写成: var a,b,c=1; ###vue 1.为了让所有组件能够在任何地方被调用,组件的属性，不能由自己决定，只能由调用它的组件或试图决定,回调事件，由父组件传入
2.我们用常量声明mutation，并把它放到单独的地方。mutation常量习惯性大写的，区分于actions。

jsdoc

jsdoc规范
@alias aliasName
@constructor
@description
@example
@extends
@param
@property
@return
@type

号外

###优化 ####keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 ####v-once 尽管在 Vue 中渲染 HTML 很快，不过当组件中包含大量静态内容时，可以考虑使用 v-once 将渲染结果缓存起来

###组件

├── 状态                               # 状态可以改变
│    ├── 本地状态(data)               # 组件内部数据,自己维护
│    └── 共享状态(store)              # 组件之间共享的状态,相互影响,由store维护
└── 属性                               # 属性不能改变

组件:对象(电脑)
属性:电脑必须由属性(显示器、鼠标、主机。。)构成（不能改变）
状态:显示器状态(24寸，30寸)(可以改变)

##测试 1,TDD指的是Test Drive Development，很明显的意思是测试驱动开发 2,BDD指的是Behavior Drive Development，也就是行为驱动开发 3,DDD指的是Domain Drive Design，也就是领域驱动开发。 ###单元测试 常用框架:Jasmine,mocha,qunit

###自动化集成化测试 casperJS基于PhantomJS或SlimerJS(PhantomJS或SlimerJS都是用于web测试的自动化无界面浏览器)，可以模拟完成页面内系统级的自动化操作行为测试。
nightmare也是一个模拟还原浏览器上业务操作的强大工具，而且更易于使用。同时可以使用chrome的插件daydreem自动录制生成用户行为操作的事件序列，更加方便我们进行实际的测试。
Nightwatch则可以使用node书写端对端的测试用例，并在Selenium server服务端运行测试，同样支持同步和异步。
DalekJS是一个跨浏览器平台的前端集成测试框架，可以自动配置启动本地的浏览器，也可以模拟填写提交表单、点击、截屏、运行单元测试等丰富的操作。
TestCafe自动化浏览器测试工具 karam ###断言 chai

测试框架

###mocha 测试框架 ###chai 测试断言库 ###mock 模拟数据

###pakage.json

npm install 
####dependencies(正常运行该包时所需要的依赖项)
npm i node_module –save 
npm install --production
####devDependencies
npm i node_module –save-dev
npm install packagename
开发的时候需要的依赖项，像一些进行单元测试之类的包

CSRF（Cross-site request forgery）跨站请求伪造，也被称为“One Click Attack”或者Session Riding，通常缩写为CSRF或者XSRF，是一种对网站的恶意利用。尽管听起来像跨站脚本（XSS），但它与XSS非常不同，XSS利用站点内的信任用户，而CSRF则通过伪装来自受信任用户的请求来利用受信任的网站。与XSS攻击相比，CSRF攻击往往不大流行（因此对其进行防范的资源也相当稀少）和难以防范，所以被认为比XSS更具危险性。CSRF（Cross-site request forgery）跨站请求伪造，也被称为“One Click Attack”或者Session Riding，通常缩写为CSRF或者XSRF，是一种对网站的恶意利用。尽管听起来像跨站脚本（XSS），但它与XSS非常不同，XSS利用站点内的信任用户，而CSRF则通过伪装来自受信任用户的请求来利用受信任的网站。与XSS攻击相比，CSRF攻击往往不大流行（因此对其进行防范的资源也相当稀少）和难以防范，所以被认为比XSS更具危险性。