capt-main

v0.1.76

Published

2 years ago

后台管理界面，vue组件，依赖库：iview，vue-router，vuex

Downloads

0High
0Medium
0Low

gaowenzhen

capt-main login menu

工程介绍

环境&工具

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

github上克隆demo

包含了webpack,和基本例子
https://github.com/gaowenzhen/capt-main

本地开发运行

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

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

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/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 ,发布服务的，如下执行提交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>