使用VUEは、NPMに、独自のUIコンポーネントのパッケージを公開します

すべての統一されたミスを避けるために、ファイルにパッケージ名を使用するようにした後、NPMは、アップロードする独自の検索パッケージ名を先に行くことができます。
NPMの公式サイト

1.インストール

vue init webpack-simple jed-nui
JED-ヌイは、私は、NPMのパッケージ名は、重複していない行く前にオーバー見つけ、そのプロジェクト名の使用にされます

2.アセンブリで書かれたプロジェクト、に行きます

そこ基づくべきVUEは難しくありません

ファイルのディレクトリを作成します。

├── src
│   ├── packages //存放组件包
│           ├── button
|                   ├── index.js   //配置文件
|                   ├── index.vue  //组件
│                   └── main.sass  //组件样式表
|       ├── index.js  //统一配置

だから、一般的な構造

コンポーネントを書きます

エクスポート時には、注意を払うように（プロジェクト名に使用したいので）何のUIに飢えたように、コンポーネント名を追加しますel-button

export default {
name:"jed-button",
....
}

app.vueに対応する効果が発生するかどうか確認するために、導入されました

3.関連

3.1構成プラグ

パッケージ内に配置されたプラグアセンブリで行わindex.js

import JedButton from './index.vue';
JedButton.install = Vue => Vue.component(JedButton.name, JedButton);//.name就是开始说的vue文件暴露出来的name名，JedButton整个组件
if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(JedButton);
}
export default JedButton;

私たちは皆、私たちのパッケージは、本当にプラグインで、唯一vue.use（プラグイン名）を介して利用可能であることを知っています。
特定の参照VUEプラグイン公式文書

私たちは、上記のように設定できますが、あまりにも多くのコンポーネントあれば、我々は統一された構成index.js構築することができる唯一のコンポーネントがある場合は
、パッケージのルートディレクトリの下に統一されたコンフィギュレーション・index.jsは、

import JedButton from “./button/index.js”
import JedForm from "./form/index.js"
//引入全部js文件
const components=[JedButton,JedForm]
const install=function(Vue,opts={}){
components.forEach((elem,i)=>{
Vue.component(elem.name, elem);
})
}
export default install

これは、基本的には離れて取得したいしても大丈夫です

3.2コンフィギュレーションwebpack.config.js

var path = require('path')
var webpack = require('webpack')
const NODE_ENV = process.env.NODE_ENV;
module.exports = {
  // entry: './src/main.js',
  // output: {
  //   path: path.resolve(__dirname, './dist'),
  //   publicPath: '/dist/',
  //   filename: 'build.js'
  // },
  entry: NODE_ENV == 'development' ? './src/main.js' : './src/packages/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',//路径
    filename: 'jed-nui.js',//打包之后的名称
    library: 'jed-nui', // 指定的就是你使用require时的模块名
    libraryTarget: 'umd', // 指定输出格式
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },

話すことは何も主にパッケージファイル名は公表され、あなたのNPMのパッケージ名を使用するのが最適である思い出させた後、ありません。

3.3 配置package.json

{
  "name": "jed-nui",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "hansu123 <[email protected]>",
  "license": "MIT",
  "private": false,//设置成公开的
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.5.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  },
  "keywords": [
    "jed-nui"
  ],//随便设置不设置
  "main": "dist/jed-nui.js",
  //关键，这里的路径一定是你webpack.congfig.js中的filename,否则你在项目引入的时候会报错，cant resolve
  //如果不设置的话，你在项目引入你发布的包的时候需要import包的相对路径，得自己找很麻烦
  "files":[
    "dist",
    "src"
  ]
  //打包后在包中存在的文件，这个你可以在安装自己的包后在node_modules中查看
}

これらがOKに変更する場合がノーマル

.IGNOREを変更

.DS_Store
node_modules/
npm-debug.log
yarn-error.log

# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln

4.ローカルテスト

npm run build
npm pack

これは、プロジェクトTGZ内のファイルを生成します。
ここに画像を挿入説明

別のテストにVueのプロジェクト

npm i ./jed-nui-1.0.0.tgz

導入

main.jsで

import jedUI from "jed-nui"
Vue.use(jedUI)

app.vueでの使用に

<jed-button type="danger">hansu</jed-button><br>
<jed-button type="warning">hansu</jed-button><br>
<jed-button type="danger" size="large">hansu</jed-button>

最終結果
jedUI

5.npmリリース

アカウントを登録するには、公式サイトに行く5.1

NPMの公式サイト

リリース5.2

NPMログイン
NPM公開

驚くことではないが、次のエラーが発生します。

質問1

cnpmを使用しないでください

cnpm倉庫がちょうど倉庫のコピーをNPM、それが作品を公開負いませんので、あなたはcnpmは、コマンドの実行が失敗した公開を使用します。

ハンドオーバ元の画像

npm config set registry=http://registry.npmjs.org

淘宝網のミラースイッチ

npm config set registry=https://registry.npm.taobao.org/

質問2

Unable to authenticate？

6.ローカルのindex.htmlを変更します

変更するので、私たちは、SRCのindex.htmlの中でパスを変更する必要がありますSRCパスをパックした後、ページが何もしていません

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>jed-nui</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./dist/jed-nui.js"></script>
  </body>
</html>

詳細は空腹のコンポーネントを参照してください、それUI作ります

どのようなオープンソースのドキュメント空腹UI