序文
この記事を書くための理由は、コンポーネントライブラリを記録するだけでなく、チュートリアルコンポーネントライブラリを書きたいものを学生に独自のコースを構築することです。コンポーネントライブラリはまた、ほぼ同じことを基本的な棚をセットアップするいくつかの時間を、書いたが、ビルドプロセスを見てみると、そう彼らの技術は出力を持っているので、自分のアイデアを整理し、再び戻ってきて、完璧ではありません。
効果の下で見てninecat-ui.github.io
コンポーネントライブラリのソースコードninecat-UI（あなたが良いと感じた場合、あなたはスタートああを与えることができます）
ここで私は、このUIコンポーネントライブラリ、いくつかのTodolsitで書いチェックされている機能を完了し、あなたが興味を持っているとあれば、私は完全に未完成に一緒に機能することができるものです。
- カスタムドキュメントディレクトリ構造
- ショーへのMDコンポーネントのデモにより、
- 統合されたトラヴィスCI
- 統合されたユニットテスト
- 統合codecov
- 自動的にコンポーネント文書を構築
- よるタグが自動的にNPM公開します
- 統合docsearch
- 統合codepen
- カスタムカラーテーマ
- 多言語の国際化
- JavaScriptとtypescriptです複合用途開発
さて、始めましょう！
右側のコンポーネントライブラリのプロトタイプを探します
あなたがコンポーネントライブラリを書き始める前に、あなたは良いプロトタイプ図面を持っている必要があります。より多くの国内の人気とAntデザインエレメントUIを使用すると、手の練習をしたい場合は、それが直接使用するために使用することができ、対応するコンポーネントライブラリを持っています。
ここでは、対応するUIコンポーネントライブラリのリソースをダウンロードして行くために2つのリンクがあります。
https://element.eleme.cn/2.0/#/zh-CN/resource
https://ant.design/docs/spec/download-cn
私が使用しRsuite、私はかなり良い良心チームを感じる、UIコンポーネントライブラリを。
プロトタイプを使用すると、再び作業を開始することができます！
プロジェクトを初期化します
確かに足場を構築するために使用することはできませんコンポーネントのライブラリを構築するためにゼロから始めているので、ゼロから呼び出され、我々はすべての直接されていないnpm initプロジェクトを開始します。
mkdir ninecat-ui
cd ninecat-ui
npm init
ここでは、プロジェクトに成功を初期化し、必要な依存関係をインストールするには、以下を見てください。
インストールが依存します
コア依存性、ビルドの依存関係、ツール依存：その依存関係をインストールした私の経験に基づいて、依存は、これらのタイプに分かれています。もちろん、これは私の機能に応じている区別、そしてよりプロフェッショナルな外観を分類するhttps://zhuanlan.zhihu.com/p/29855253
ここでは、依存関係をインストールするために、糸を使用しています。今直接依存入力内容を区別しないように依存関係をインストールyarn addライン上、及びその区別は依存関係の種類に属し、そしてそれがpackage.jsonより詳細なドキュメント上のファイルが参照可能package.json再構築再び良いラックを構築します。https：// docs.npmjs.com/files/package.json
：これらの依存関係についての基本的なVUEのプロジェクトのニーズ
VUE、WebPACKの、WebPACKの-CLI、WebPACKの-devのサーバー、@バベル/コア、バベル・ローダー、CSS-ローダー、HTML-WebPACKの-プラグイン、VUE-ローダー
、VUE-テンプレート-compiler
最も簡単なコードを書きます
依存性は、私たちは、プロジェクトのHTMLテンプレート、輸入書類と新しいindex.htmlに、新しいsrcディレクトリのVUEホームページドキュメントルートディレクトリは、index.jsにsrcとindex.vueを作成するかを定義する必要があり、インストールされています。
index.htmlを
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ninecat-ui</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
index.vue
<template>
<div>Hello Ninecat-ui</div>
</template>
<script>
export default {
name:'App'
}
</script>
index.js
import Vue from 'vue'
import App from './index.vue'
new Vue({
render: h => h(App)
}).$mount('#app')
プロジェクト起動して実行するようにまあ内容は、今のWebPACKの簡単な構成を見てする必要があります。
最も単純な構成のWebPACKの追加
ディレクトリとビルドディレクトリを作成し、そのWebPACKの設定ファイルを追加webpack.config.base.js
'use strict'
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader')
const path = require('path')
module.exports = {
entry: path.resolve(__dirname, '../src/index.js'),
output: {
path: path.resolve(__dirname, '../dist'),
filename: "index.js"
},
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
filename: 'index.html',
}),
new VueLoaderPlugin(),
]
}
：一部の学生は、まだこれらの基本構成を理解していない場合は、公式文書がリンク与えられた、ああ、WebPACKの何通じているはずですhttps://www.webpackjs.com/
上記のように構成され、基本的なVUEのプロジェクトが構築されていますが、ほとんど、我々はプロジェクトの起動スクリプトを設定する必要があります。Package.jsonは、スクリプトの中で、次のとおりです。
"scripts": {
"start": "webpack-dev-server --config build/webpack.config.base.js"
},
最後に、私たちのプロジェクトのディレクトリ構造を見てみましょう。
その後、我々はプロジェクトを実行します。yarn start
OK、ここに基本的なVUEビルド良いプロジェクトだ、我々は部品の背後に構築を開始することができます。
第一成分の調製
新しいのルートにまずpackagesファイル、その後、書き込みコンポーネントを開き、次のフォルダにハローを作成します。コンポーネントの役割は、単純な名前を渡して、アセンブリ挨拶、こんにちはxxxのページを表示することができるということだけです。
ここでは、ディレクトリ構造を見てみましょう：
今私は、私たちのHelloコンポーネントについて記述する必要があります。
パッケージ/ハロー/ SRC / index.vue
<template>
<div>
<h2>Hello, {{name}} ！</h2>
</div>
</template>
<script>
export default {
name:'Hello',
props:{
name:{
type:String,
default:'Ninecat UI'
}
}
}
</script>
パッケージ/こんにちは/ index.js
import Hello from './src/index.vue'
// install 是默认的方法,供按需引入。
// 当外界在 use 这个组件的时候，就会调用本身的 install 方法，同时传一个 Vue 这个类的参数。
Hello.install = function(Vue){
Vue.component(Hello.name, Hello)
}
export default Hello
そのような書き込みの理由フォルダのコンポーネントは、コンポーネントが統一輸出を持つことができるようにすることです、各コンポーネントの下のSRCディレクトリのフォルダは、他の機能コンポーネントに拡張することができます。
SRC / index.vue
<template>
<div>
<Hello
:name="name"
/>
</div>
</template>
<script>
import Hello from '../packages/hello'
export default {
name:'App',
components:{
Hello
},
data:function(){
return {
name:'Terence'
}
}
}
</script>
OK、ここでは簡単なこんにちはコンポーネントをカプセル化しますが、今はNPMと一緒にパッケージのコンポーネントは、このコンポーネントライブラリをインストールした後に達成し、その後、こんにちはコンポーネント内部の基準なので、以下の設定とパッケージ構成をエクスポートするために必要とされていなかった回数。
コンフィギュレーションのエクスポートおよび梱包
まあ書か部品は、統一された輸出を必要とする今のコンポーネントである、我々はエクスポート・コンポーネントを調和させる必要があるので、多くのコンポーネントの後ろになります。
パッケージ/ index.js
import Hello from './hello'
const components = {
Hello
}
const install = function (Vue) {
Object.values(components).forEach(component => {
Vue.component(component.name, component);
})
}
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
install,
Hello
}
設定パッケージ
のビルド/ webpack.config.build.js
'use strict'
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
mode: 'production',
entry: {
'ninecatui': './packages/index.js' // 入口文件
},
output: {
path: path.resolve(__dirname, '../package'), // 出口目录
publicPath: '/package/',
library: 'ninecatui', // 包名
libraryTarget: 'umd',
umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
},
externals: {
vue: {
root: 'Vue',
commonjs: 'vue',
commonjs2: 'vue',
amd: 'vue'
}
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all'
}
}
}
},
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
new VueLoaderPlugin(),
]
}
ここでは、ローカルでのテストの基本的なパッケージです。
でpackage.json包装スクリプトを追加し、
"build": "webpack --config build/webpack.config.build.js"
私たちは、プロジェクトをビルドするために見て：npm run build
パッケージフォルダを再生されます、我々はコンポーネントライブラリを引用します。
変更のsrc / index.js
import Vue from 'vue'
import App from './index.vue'
import Ninecatui from '../package/ninecatui'
Vue.use(Ninecatui)
new Vue({
render: h => h(App)
}).$mount('#app')
変更のsrc / index.vue
<template>
<div>
<Hello
:name="name"
/>
</div>
</template>
<script>
export default {
name:'App',
data:function(){
return {
name:'Ninecat UI'
}
}
}
</script>
アクセスのように。
次は、NPMをパッケージ化しようとし、その後、コンポーネントライブラリを参照するためにローカルにインストールされます。
NPMリリース
ローカルのパッケージのテスト
エントリファイルpackage.jsonファイルを変更します。
"main": "package/ninecatui.js",
そして、npm packあなたは、再生することができninecatui-1.0.0.tgz、ファイルを。
このファイルは、NPM経由でインストールすることができ、テストのために、私たちは、現在のプロジェクトに直接それをテストすることができます。
見た目変更するNPM必要マウントする前にpackage.json、インストール時に名前の、または意志の競合を、我々は意志
"name": "ninecatui"
変更
"name":"ninecatui-test"
直接yarn add ./ninecatui-1.0.0.tgzまたはnpm install ./ninecatui-1.0.0.tgz
増加の理由は、./インストール用のローカルパスをパラメータであるからです。
上記の効果は、あなたのローカルインストールにおめでとうが成功した場合、のアプリケーションが正常に使用できるかどうかを確認するために、それを参照を変更しましょう。
修正src/index.js
import Vue from 'vue'
import App from './index.vue'
// 修改引用
import Ninecatui from 'ninecatui'
Vue.use(Ninecatui)
new Vue({
render: h => h(App)
}).$mount('#app')
ニース、通常の使用、命令はローカルで、通常の使用にパッケージされています。のは、NPMに公開してみましょう。
NPMに公開
最初にNPMの公式ウェブサイト上でアカウントを登録します。
プロジェクトのルートディレクトリの下に、ログインNPMのアカウント、ユーザー名、パスワード、メールアドレスを入力して。
npm login
情報は、あなたが成功にログオンすることを示すために、表示されます。
次に実行npm publishします
この図は、ninecatui-test私たちのパッケージです。
検証テストNPMパッケージ
私たちは、VUE-CLI VUEのプロジェクトを作成し、NPMによって導入インストールします。
ダイレクト
vue create hello-world
それから
yarn add ninecatui-test
直接の工夫src/main.jsとsrc/App.vue
SRC / main.js
import Vue from 'vue'
import App from './App.vue'
import Ninecatui from 'ninecatui-test'
Vue.use(Ninecatui)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
SRC / App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<Hello
:name="name"
/>
</div>
</template>
<script>
export default {
name: 'App',
data:function(){
return {
name:'Ninecat UI'
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
おめでとう、最初のNPMパッケージが正常に公開します。NPM少なくとも小さなステップバックを取られ、正常公開だけでなく、プロジェクトエンジニアリングを最適化し続けます。
