Web-killer NPM

技术栈

vuex,vue2,vue-router,axios,webpack2
vue2
文档 https://cn.vuejs.org/
我们目前是使用vue2单文件组件的开发方式
axios
文档 https://github.com/mzabriskie/axios
数据请求框架，在组件里面可以使用this.$http访问到axios对象
vuex
文档 https://vuex.vuejs.org/ 状态管理机，一般一个单页应用里面只有一个store，在组件this.$store可以 dispatch action
或者 commit motation store相关文件放在单页应用目录下的store（见example）
vue-router
文档 https://router.vuejs.org/
路由，一般一个单页应用里面只有一个router，在组件this.$router 可以使用路由提供的一些方法 this.$route，是当前页面匹配到的路由相关信息，参数什么的可以从这个对象里面拿 router相关文件放在单页应用目录下的router（见example）
webpack2 构建工具一般人不用管他文档 http://webpack.github.io/docs/
与webpack1.x区别
https://mp.weixin.qq.com/s?__biz=MzIyMjE0ODQ0OQ==&mid=402764877&idx=1&sn=aa40a80bb1920a80fc187e8df99c4824

####如何使用

cd web_esn
cp web_esn/static_dev/home/config.js-dist web_esn/static_dev/home/config.js

unzip node_modules.zip

cd web_esn

npm install

npm run dev

http://localhost:9999/#/

打包命令：npm run build（配置config如果buildAll==true，打包所有页面）
npm run test-build 到91环境
npm run pre-build 到预发布环境
npm run dist-build 到生产环境
npm run dist-build --report

####介绍

基于elementUI （1.2）改造成配合webpack2.0构建的web开发框架
开发文档：http://element.eleme.io/#/zh-CN/
使用组件时候记得把el-组件前缀修改成fs-（FriendSpace）友空间
组件命名规则fs-模块名-组件名，样式命名规则fs-模块名-样式名。主要解决命名空间的问题。

####项目结构

/your-space-ui 是element基础组件库。一般情况不去动他
/src/components是我们的业务通用组件库
/src/utils是我们的业务通用函数库
/src/asset是我们的业务通用资源
/webpack 是存放构建工具的
/dist 是构建出来的压缩包
/example 一个大型单页面应用
/example/components 页面组件
/example/router 页面路由
/example/static 页面静态资源
/example/store 页面状态
/example/view 路由对应的页面组件
/example/main.js 启动函数(可以根据页面不同的启动需求做定制化)
/docs/ 里面是fs所有组件的文档

http://www.jianshu.com/p/42429f4d8f9e?nomobile=yes

一些组件事项

1.new Vue({...root})这里root是一个组件，通过解构的方式实例化了vue。所以你在new Vue({...root,beforeCreate(){//这里编写的生命周期会覆盖root组件的}}) 2.为了不要影响别人开发的样式，你可以在style标签里面添加scoped。 3.git config core.ignorecase false 设置git大小写铭感 4.接口记得带版本号 5.关于数组。一定要通过函数，或者结构来触发更新，关于对象，通过解构赋值的方式来实现触发更新 6.使用props一定要先初始化他

开发调试

1.修改hosts
sudo vim /etc/hosts
在127.0.0.1 对应的行加上test.chaoke.com 2.http://web.chaoke.com:91 登陆 3.模块下面的config.js 设置dev:true 4.http://test.chaoke.com:9999/#/ 可以愉快的调试了

修改日志

1.引入es6-promise-profilly 解决ie9没有没有promise的问题 2.引入url-search-params 解决axio post请求参数问题('Content-Type' : 'application/x-www-form-urlencoded') 3.引入$eventbus作为一个事件总线
// 触发组件 A 中的事件 this.$eventbus.$emit('id-selected', 参数对象) // 在组件 B 创建的钩子中监听事件 this.$eventbus.$on('id-selected', function (id) { // ... })
事件需要命名空间模块名-组件名-事件名

全局用户信息

获取用户信息
userStore.js
this.$store.state.user_store.data

字体引用

在/src/assets/font/iconfont.css
如果有多分修改前缀
在/src/assets/font/demo_fontclass.html 里面有样式介绍。

更新字体文件

拉取最新的文件将文件拷贝至在/src/assets/font/下

http://momentjs.cn/docs/#/manipulating/subtract/

手工发布

ssh www@123.103.9.204 -p 10022; 密码 XMSTzizo5T

cd web_esn_new/

查看当前分支 git branch *test_20170301 查看是否是这个分支如果是 git pull origin develop --rebase 没有冲突之后

cd static_dev/

npm run test-build ok

提交代码注意事项

1.不能把web/static 提交上去 2.有冲突一定要先解决冲突 3.不要动build.sh 4.新加库的时候一定要保存在package.json(npm instal xxx --save)否则会出现构建不了的原因 5.node_modules.zip不要动，千万不要动。

构建流程说明

0.npm install 安装新依赖 1.删除dist目录 2.webpack打包 3.检查是否生成了dist目录，如果有，则备份web/static为web/static_bak并且把dist移动到web/static
如果没有生成dist，构建失败。并且不会对web/static 做任何的操作