vue项目-npm模块化功能页面

切换npm镜像登录

// 切换到npm镜像
npm config set registry http://registry.npmjs.org
// 登录
npm login
// 接着输入用户名、密码、邮箱【注册npm账号时的资料】

上传包

1、我将vue一个页面功能模块抽出来放到一个src文件夹里面，包含了功能模块的css、js和页面用到的图片；

2、我要上传的文件

package.json

{
  "name": "xxxxxx-ioc-access-control-wisdoms",
  "version": "1.0.1",
  "description": "IOC-智慧门禁【客流分析、门禁系统】",
  "main": "index.js",
  "scripts": {
    "test": "xxxxxx-ioc-access-control-wisdoms"
  },
  "author": "xxxxxx",
  "license": "ISC"
}

注意：

• name：名称不能重复，可以先在npm网站搜一下你要命名的包名称有没有被创建；
• version：版本号，后面更新包时呈递增；
• description：描述；

在当前目录下执行上传命令：npm publish
测试：npm install 你的包名

VUE项目引用模块

上面我们将一个功能模块的页面抽成npm包；
使用的方式是在项目下安装包的依赖，在 router.js 路由中引入包里面的页面
比如：

import Vue from 'vue'
import Router from 'vue-router'
const INDEX = () =>
    import('./views/Index.vue')
const LOGIN = () =>
    import('./views/login/Login.vue')
const WEEK_TASK_NEW = () =>
    import('xxxxxx-time-tasks/src/weekTaskNew.vue')
const SPECIAL_TASK = () =>
    import('xxxxxx-time-tasks/src/specialTask.vue')
const TASKREPOSITORY = () =>
    import('xxxxxx-time-tasks/src/taskRepository.vue')