capt-main

0.1.76 • Public • Published

工程介绍

环境&工具

  • node@6.17.0
  • npm@3.10.10

用nvm,node多版本管理

 
# 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 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-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()
 
 

github上克隆demo

本地开发运行

  • 在项目根目录下
# 终端内如下运行,完成后自动打开本地默认浏览器,推荐:chrome浏览器,或支持html5 ec2015的浏览器
npm run dev
 

发布到公司npm私有服务器上,被别项目组引用

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/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文件,否则提交会报失败。

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
 

相关的文档

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

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>
 

Readme

Keywords

Package Sidebar

Install

npm i capt-main

Weekly Downloads

3

Version

0.1.76

License

ISC

Unpacked Size

123 kB

Total Files

11

Last publish

Collaborators

  • gaowenzhen