vue项目开发npm包

先去这里注册一个账号npm,记住用户 密码 邮箱

做完以上工作,接下来:

创建一个新的项目SchoolProgramCom

1.在components目录下创建组件first-vue-demo.vue

内容与一般组件完全一样.

 

2.在根目录下创建index.js,index.js内容如下,就是import组件,并export出来.

import vuedemo from './src/components/first-vue-demo.vue'
import theother from './src/components/the-other.vue'
export { vuedemo,theother}

3.配置package.json

{
  "name": "school-com",//这个是npm publish 的名称,其他项目下载也是这个名称 npm i school-com 
  "version": "0.2.1", 
  "private": false,//这里必须是false
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-service": "^3.8.0",A
    "vue-template-compiler": "^2.6.10"
  }
}

 说明:package.json字段

以下是和发布到 npm 有密切关系的字段(但不仅限于这些字段)

• name：库的名字。
• main:指定入口文件
• version：库的版本号，发布的时候读取的就是这个字段。
• author：库作者，会在 npm 网站库首页显示。
• license：开源证书，会在 npm 网站库首页显示。
• repository：代码库地址，会在 npm 网站库首页显示。
• homepage：库的主页地址，会在 npm 网站库首页显示。
• dependencies：你的库依赖的其他库，在开发者 install 你的库的时候会一并下载。

4.配置vue.config.js(webpack.config.js),没有就手动创建,创建完内容如下:

const path = require('path');
const webpack = require('webpack')


const NODE_ENV = process.env.NODE_ENV
module.exports = {
  indexPath: NODE_ENV == 'development' ? './src/main.js' : './index.js',
  outputDir: '/dist/', 
}

5.登录到npm

命令 npm login 

Username: 用户名

Password:密码,密令窗口不会显示

Email: 邮箱

  登录成功

注意:https://registry.npmjs.org/.这个是代码库,可以自己配置的 上传下载要保持一致,注意事项请自己查一下~~

验证是否登录成功的命令

npm whoami  

成功返回用户名;

退出登录npm logout

 6.发布npm包

命令 npm publish

 发布成功.

7,在其他项目下载npm依赖

 

可以在其他项目使用了.使用方法