1. 简介
基于vue开发的金鹏信息后台管理公共组件—任务管理
2. 基础环境
(vue 2.6.0 +) (nodejs 6.0+)
3. 使用前准备(nrm for vue)
3.1. 简介
nrm 是一个 NPM 源管理器,允许你快速地在如下 NPM 源间切换.
3.2. 安装
npm install -g nrm
3.3. 使用
3.3.1. 列出可选的NPM源
; nrm ls
* npm ---- https://registry.npmjs.org/
cnpm --- http://r.cnpmjs.org/
taobao - http://registry.npm.taobao.org/
eu ----- http://registry.npmjs.eu/
au ----- http://registry.npmjs.org.au/
sl ----- http://npm.strongloop.com/
nj ----- https://registry.nodejitsu.com/
3.3.2. 切换NPM源
; nrm use taobao
Registry has been set to: http://registry.npm.taobao.org/
3.3.3. 增加源 (你可以增加定制的源,特别适用于添加企业内部的私有源)
nrm add jpxx http://xxx.xx.xx.xxx
3.3.4. 删除源
nrm del jpxx
4. 如何使用
4.1. 项目依赖
//npm install task_manage -S
//在main.js中
import task_manage from 'task_manage'
Vue.use(task_manage)
4.2. 添加样式
import ElementUI from "element-ui";
import 'element-ui/lib/theme-chalk/index.css';
4.3. 添加接口请求地址
4.3.1. 如果用的vue-cli2.x版本的脚手架
在index.html
里window.api.domain='你请求的接口ip'
4.3.2. 如果用的vue-cli3.x版本的脚手架
在项目根目录生成config.js根据运行环境设置请求接口ip,
并挂载到window.api.domain
,
项目源码中有config.js文件示例
4.4. 储存token
开发调用登录接口后拿到服务端token
,务必储存在localStorage
下,组件才能正常使用
4.5. 页面中引用
因为组件已经在main.js中use过,所以直接在页面中使用<TaskManage/>
就可以,无需import。
5. 组件展示
5.1. 任务列表
5.2. 添加任务
5.3. 日志列表
源码地址:http://sources.jpsycn.com/dev-plat/h5/com/task-manage.git