技术栈
- 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 做任何的操作