#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
├── 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
###安装工具
npm i element-theme -g
###修改主题
直接编辑 element-variables.css 文件
###编译主题
et
阿里图标库(智营销图标库)github登录
加入到我的收藏=》添加到我的项目(智营销)=>下载至本地
替换到 static/fonts目录
暂不考虑服务端渲染,-文档
打包进入前端,截断ajax请求,前后端分离
选择性存储状态进入默认localStorage,get/set
Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。
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规范
@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更具危险性。