1.0.0 • Published 5 years ago

isp-web v1.0.0

Weekly downloads
6
License
-
Repository
-
Last release
5 years ago

工程介绍

环境&工具

  • node@6.17.0
  • npm@3.10.10

用nvm，node多版本管理

# 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 git@code.aliyun.com: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 <gaowenzhen@msn.com>",//开发者邮件地址，也是密码重要
  "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文件，否则提交会失败。

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

相关的文档

开发中碰到的一些问题处理

  • 一直无法安装到某个组件的最新版本
# cd 项目根下,卸载组件
# 1，
npm uninstall you-name

# 修改package.json > dependencies > you-name 对应的最新版本号保存package.json
# 2，再次如下执行
npm install
axiosvuejs-cookievue-routeriviewcapt-mainvuex
@everything-registry/sub-chunk-1938@zalastax/nolb-isp
1.0.0

5 years ago