工程介绍
环境&工具
- node@6.17.0
- npm@3.10.10
用nvm,node多版本管理
-
nvm 下载,windows下,mac os 请用brew安装---
-
点击nvm-setup.zip
-
安装完成后
-
nvm install 6.17.0
-
nvm use 6.17.0
-
git 版本控制
-
开发工具vscode或其他无要求
# mac osbrew install node@6# win 下载node6.exe到本地安装http://nodejs.cn
前端库,组件
- vue2
- iview2
- webpack 打包
本地创建项目
【capt-main】一个后台管理界面,依赖iview,实现动态路由(服务端返回json,后创建vue-router路由),包括了:登陆口,退出口,验证码,用户信息口,一身,你只关心开发自己组件就可以了,只token
项目命名方式
- 程序内的变量命名,非文件和目录的命名-文件和目录尽量小写字母+短横线
- 组件命名很重要,因为多人开发,如果出现一样的命名,将无法用,也影响到整个项目打包运行。
- 推荐用驼峰方式命名,规则:项目组简拼+组件功能简拼
- 例子:北京A组公司书本号处理组件:beijinABookNumber
- 第一个单词以小写字母开始;从第二个单词开始以后的每个单词的首字母都采用大写字母。
克隆,capt-web到本地,基础 demo内有例子
# 找个目录,打开终端,切换到当前目录下。$ cd you-Folder-path# 比如:you-my-components-name 是你组件名称,请设定合适名称,可参考上面提到的,命名规则。$ git clone git@code.aliyun.com:capt-isp/capt-web.git you-my-components-name# 切换到公司的私有源-可和淘宝镜像来回切换$ npm set registry http://npm.art2print.cn# 或$ npm set registry https://registry.npm.taobao.org$ cd capt-web && npm install
或
用vue-cli创建项目
# 找个目录,打开终端,全局安装vue-clinpm install -g vue-cli# 创建你的app应用vue init webpack you-my-components-name# 进入的项目根目录cd you-my-components-name
路由json文件说明
// 在克隆到的项目,static/menu1.json文件"L_router"://查看本文档以下的:具体说明1//..."T_router"://查看本文档以下的:具体说明1//...
1,L_router 左边菜单整个树,同时也是路由的路径,在左边菜单内点击后,会把控件嵌套在右边窗口容器内显示,不能改变L_router命名。
2,T_router 顶级路由,是独立的界面,点击后会把整个应用覆盖(html>body内所有内容),界面铺满整个窗口,不能改变T_router命名。
具体说明1
# 如下对象key命名不能改变id是key3-3是值# 一条记录1(菜单的某一项)"id": "3-3"//唯一的,"name" "test3-3" //菜单开合用到key,不显示出来"isopen":false//如果是父级时,是否默认展开"Iconname": "ios-keypad"//每一项前面图标"title": "标题"//显示出来-菜单内的文本"active":false//是否选中,"nomeunli" true //不显示在左菜单内,但也是路由"notCache": false //默认是缓存的,如果不想缓存就配置notCache:true,路由name+组件内的name需要一致,可选// 比如有个组件userform.vue:<script>标记内 export default {name: 'cptName'},这个cptName对应到如下,// 组件命名最好是驼峰方式,如下的componepath是路由同时还也是组件名,前面需要加”/“// 命名区分大小写,命名范围[字母+横线]不能写中文,如下用到cptName组件// 看不明白上面解释,查看src/main.js代码就明白了"componepath": "/cptName""children": {}... //内还是一样的放【一条记录1】,children内就是子菜单,无限递归,支持多级。,"beforeCloseName": "before_close_normal" //默认关闭打开的界面构子,能提示用户是否关闭,可选
capt-web demo 的入口
- main.js本地开发[非生产模式]终端内:npm run dev
- App.js 打包最终发布[生产模式]终端内:npm run build
// 注册组件VueVue// 配置组件const mycomponents =FormTablereUser// 写入配置+创建组件/** el -渲染到指定的容器id* components -多个组件对象* vuexs -vuex-你的组件之间通信状态集,查看官方vuex文档* baseUrl -- 本地开发服务端请求配置* - dev,pro配服务端url,token如果支持url可以这么配,* ###-本地开发推荐配置config/index.js内21行,代理服务-###* login,logout登陆/登出* userinfo 用户信息* 关于登陆,支持token (url?token,headers.token)**//*** /devapi 是本地开发webpack的代理* 可自己的开发环境去配置* 如果你本地没有服务端login,logout,userinfo可以为空,或,* 在static放一个*.json文件*/captoptions =el: '#app'components: mycomponentsvuexs:storedemobaseUrl:dev: ''pro: ''login: '/static/get_info.json'logout: '/static/get_info.json'verificon: ''userinfo: '/static/get_info.json'menutree: '/static/menu1.json'capt
github上克隆demo
- 包含了webpack,和基本例子
- https://github.com/gaowenzhen/capt-main
本地开发运行
- 在项目根目录下
# 终端内如下运行,完成后自动打开本地默认浏览器,推荐:chrome浏览器,或支持html5 ec2015的浏览器npm run dev
发布到公司npm私有服务器上,被别项目组引用
1 ,请检查你的package.json 关注:version字段值是否大于上次提交的数字
2 ,项目根目录内必须有README.md文件,否则提交会报失败。
- 请写清楚你组件的功能,用法,参数,回调等,文档格式是Markdown
- Markdown快速入门-文档
- https://coding.net/help/doc/project/markdown.html/
3,查看src/app.js文件
- 是否加入了你的组件名
4,
# 打包到dist目录内,完成后提交私有服务器时,被别项目组就可以安装你开发的组件npm run build
5 ,发布服务的,如下执行提交t
# 1,不是在当前源下请切换npm set registry http://npm.art2print.cn# 2,登陆/同时也是创建npm adduser --registry http://npm.art2print.cn# 3,提交(确定修改好版本号)-如果你执行过1,2,再次执行时,要求你的终端一值没有关闭过,可以省略1,2步npm publish --registry http://npm.art2print.cn# 完成,去查看http://npm.art2print.cn
相关的文档
- iviewui 例子 https://www.iviewui.com/docs/guide/install
- vue文档 https://cn.vuejs.org/v2/guide/instance.html
- vue-router文档 https://router.vuejs.org/zh/
- vuex 文档 https://vuex.vuejs.org/#
- Markdown 文档 http://xianbai.me/learn-md/index.html
开发中碰到的一些问题处理
1,直无法安装到某个组件的最新版本
# cd 项目根下,卸载组件# 1,npm uninstall you-name# 修改package.json > dependencies > you-name 对应的最新版本号保存package.json# 2,再次如下执行npm install
2,本地开发问题,打包完成后提交npm发现对方用时,发现还是上一个版本的ui没有变,iview多次打包后兼容问题,官方,预留了如下标记 + 可以换标记前面加+i,如正常就不用加了
var a = {iButton: Button,iCircle: Circle,iCol: Col,iContent: Content,iForm: Form,iFooter: Footer,iHeader: Header,iInput: Input,iMenu: Menu,iOption: Option,iProgress: Progress,iSelect: Select,iSwitch: Switch,iTable: Table,iTime: Time}
3,开发环境下打包问题,不支持,style内@import方式加入,请用import './login.less'
<;</