mkcapt-main
v0.2.15
Published
类似后台管理界面,vue组件,依赖库:iview,vue-router,vuex
Downloads
11
Readme
工程介绍
环境&工具
用nvm,node多版本管理
nvm 下载,windows下,mac os 请用brew安装
https://github.com/coreybutler/nvm-windows/releases
点击nvm-setup.zip
安装完成后
nvm install 6.17.0
nvm use 6.17.0
git 版本控制
开发工具vscode或其他无要求
# mac os
brew 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 [email protected]: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-cli
npm 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是key,3-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
import Vue from 'vue'
import iview from 'iview'
import capt from 'capt-main'
import 'iview/dist/styles/iview.css'
import Form from './views/nav1/Form.vue'
import Tablere from './views/nav1/Table.vue'
import User from './views/nav1/User.vue'
import storedemo from './store/module/User.js'
// 注册组件
Vue.use(iview)
Vue.use(capt)
// 配置组件
const mycomponents = {
Form,
Tablere,
User
}
// 写入配置+创建组件
/*
* 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文件
*/
capt.options = {
el: '#app',
components: mycomponents,
vuexs: {
storedemo
},
baseUrl: {
dev: '',
pro: '',
login: '/static/get_info.json',
logout: '/static/get_info.json',
verificon: '',
userinfo: '/static/get_info.json',
menutree: '/static/menu1.json'
}
}
capt.createapp()
### 发布到公司npm私有服务器上,被别项目组引用
1 ,请检查你的package.json 关注:version字段值是否<font color=#1cb400>大于上次提交的数字</font>
``` json
{
"name": "cptName", //被别人引用时用到名
"version": "0.0.1",//每次提交一定要比上一个版本号大1
"description": "简约的说明你组件基本功能,详细内容请写在README.md文件内",
"author": "gaowenzhen <[email protected]>",//开发者邮件地址,也是密码重要
"homepage": "http://npm.art2print.cn/#/detail/capt-main",//这个组件发布后的首页
"keywords": [
"capt-main",
"login",
"menu"
],
"main": "dist/cptName-main.js",//重要:被别的组件引用时的入口
"files": [
"dist",
"src"
],
"scripts": {
//开发时用到,在本地运行时配置
},
"dependencies": {
//依赖重要必填-保持demo默认
},
"devDependencies": {
//开发环境依赖
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
2 ,项目根目录内必须有README.md文件,否则提交会报失败。
- 请写清楚你组件的功能,用法,参数,回调等,文档格式是Markdown
- Markdown快速入门-文档
- https://coding.net/help/doc/project/markdown.html/
3,查看src/app.js文件
- 是否加入了你的组件名
4,
# 打包到dist目录内,完成后提交私有服务器时,被别项目组就可以安装你开发的组件
npm run build
5 ,发布服务的,如下执行提交
# 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'
<style lang="less">
@import "./login.less";
</style>