isp-web
v1.0.0
Published
inyes
Downloads
3
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 os 下载node6.exe到本地安装
http://nodejs.cn
前端库，组件
- vue2
- iview2
- webpack 打包
本地创建项目
因项目需要，当前这项目合作情况是，多人，多组，多地办公，一起完成，每个组负责一个或多个模块（vue组件方式），项目的整体通信，交互，是通过组件方式，来实现，为了方便大家开展工作，这里提供了一个主体组件【capt-main】，功能类似（后台管理界面），能组织所有组件在一起工作,具体功能【动态路由，登录，登出，vuex一体，权限控制等...】
项目命名方式-在创建组件或克隆组件时就定义好项目名称
组件命名很重要，因为多人开发，如果出现一样的命名，将无法用，也影响到整个项目打包运行。 推荐用驼峰方式命名，规则：项目组简拼+组件功能简拼
例子：北京A组公司书本号处理组件：BeijinABookNumber ，在每一个单词的第一位字母大写。
克隆,capt-main组件到本地做基础 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
$ 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
# 如下对象命名不能改变
{
"id": "3-3",//唯一的
"isopen":false,//如果是父级时，是否默认展开
"Iconname": "ios-keypad",//每一项前面图标
"title": "标题",
"active":false,//是否选中
// 例子：组件userform.vue：<script>标记内 export default {name: 'CptName'},这个CptName对应到如下，
// 组件命名最好是驼峰方式，如下的componepath是路由同时还也是组件名，前面需要加”/“
// 命名区分大小写，命名范围[字母+横线]不能写中文，如下用到CptName组件
"componepath": "/CptName"
}
capt-web demo 的入口main.js说明
main.js
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'
// 注册组件
Vue.use(iview)
Vue.use(capt)
// 配置组件
const mycomponents = {
Form,
Tablere,
User
}
// 写入配置+创建组件
/**
* el -渲染到指定的容器id
* menuurl -菜单数据，控件路由入口
* components -多个组件对象
*/
capt.createapp({el: '#app', menuurl: '/static/menu1.json', components: mycomponents})
本地开发运行
- 在项目根目录下
# 等带自动打开本地默认浏览器，推荐:chrome浏览器，或支持html5 ec2015的浏览器
npm run dev
发布到公司私有服务器上，被别项目组引用
1 ,请检查你的package.json 关注：version字段值是否大于上次提交的数字
{
"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/capt-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
开发中碰到的一些问题处理
- 一直无法安装到某个组件的最新版本
# cd 项目根下,卸载组件
# 1，
npm uninstall you-name
# 修改package.json > dependencies > you-name 对应的最新版本号保存package.json
# 2，再次如下执行
npm install