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

Vue 2年前 (2021) bestcyt
471 0 0

切换npm镜像登录

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

上传包

1、我将vue一个页面功能模块抽出来放到一个src文件夹里面,包含了功能模块的css、js和页面用到的图片;
vue项目-npm模块化功能页面

2、我要上传的文件
vue项目-npm模块化功能页面

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')

 

版权声明:bestcyt 发表于 2021年1月21日 pm3:34。
转载请注明:vue项目-npm模块化功能页面 | 爱前端导航

相关文章

联系站长