この記事は、UI コンポーネントに関する関連知識を提供します。主に、UI コンポーネント ライブラリを最初から構築する方法について説明します。コード例もあります。興味のある友人は、以下を参照してください。皆さんが協力してくれることを願っています。
- コンポーネント ライブラリとは別に新しいプロジェクトを作成する必要がある
- 適切なディレクトリ構造を計画する必要がある
- #コンポーネント ドキュメントの記述を定義する必要がある
- ビルドする必要があります 完全な単体テスト
// 全局安装 vue-cli npm install --global vue-cli // 基于 webpack 创建一个的新项目 vue init webpack my-project // 安装依赖 npm install // 运行 npm run devインストール プロセス中の関連オプションは次のとおりです。 コンポーネント ライブラリの単体テスト フレームワークとしてデフォルトで jest をインストールし、コード検査ツールのデフォルトは eslint です。
1.2 ディレクトリの最適化
プロジェクトが正常に作成された後、新しいプロジェクトのディレクトリ構造は次のようになります:
ビルド パッケージ関連のディレクトリと構成- config 構成ファイル ディレクトリ #node_modules プロジェクトにインストールされている依存モジュール
- ##src ソース コード ディレクトリ #static 静的ファイル ディレクトリ
- #test 単体テスト ディレクトリ
- 既存のディレクトリにいくつかの調整を加える必要があります。まず、vant/ant などのいくつかの主流の UI コンポーネント ライブラリにアクセスしました。これらのコンポーネント ライブラリの公式 Web サイトは次のとおりです。非常に直感的なサンプル ページを提供します。この時点で、コンポーネント ライブラリは src ディレクトリの名前を変更します。たとえば、公式のサンプル ディレクトリです。
- さらに、コンポーネントを保存するための新しいパッケージ ディレクトリを追加します。
- これで、ディレクトリ構造は次のようになります:
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
const createLintingRule = () => ({
test: /.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('examples'), resolve('packages'),resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
})
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './examples/main.js' // 打包入口
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('examples'),
}
},
module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /.js$/,
loader: 'babel-loader',
include: [resolve('examples'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}
再実行するとコンパイルが成功します。
1.3 コンポーネント ドキュメントの作成
基本的なコーディング環境をセットアップした後、新しいコンポーネントのコンポーネント ドキュメントを作成する方法を検討する必要があります。
コンポーネント ドキュメントを記述するにはマークダウンを使用することをお勧めしますが、vue でコンポーネント ドキュメントを記述するためにマークダウンを使用するにはどうすればよいでしょうか?ここでは便利なツールをおすすめします。
#vue-markdown-loader
##1.3.1 インストール方法# vue1版本 npm i vue-markdown-loader@0 -D # vue2版本 npm i vue-markdown-loader -D npm i vue-loader vue-template-compiler -D
1.3.2 webpack 設定webpack.base.conf に次の変更を加えています:
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module: {
rules: [
...,
{
test: /.md$/,
use: [
{
loader: 'vue-loader'
},
{
loader: 'vue-markdown-loader/lib/markdown-compiler',
options: {
raw: true
}
}
]
},
...
]
},
plugins: [new VueLoaderPlugin()]1.3.3 コンポーネント ドキュメントの作成ツールを設定した後、コンポーネント ドキュメントの作成のテストを開始します
まず、コンポーネントのドキュメントを保存するために、example ディレクトリに docs フォルダーを追加します。
新しい test.md
# hello worldを作成します
次に、ルーター フォルダーに docs.js ルーティング ファイルを追加して、コンポーネント ドキュメントのパスを保存し、ファイル内のルート ルートに導入します。 。
const docs = [
{
path: '/test',
name: 'test',
component: r => require.ensure([], () => r(require('../docs/test.md')))
}
]
export default docsブラウザで実行すると、コンポーネント ライブラリの最初のコンポーネント ドキュメントが表示されます...
上記で完了です。コンポーネント ライブラリ基本的に環境が整ったので、次は新しいコンポーネントを書き始めてみましょう。#コンポーネントの作成
- ここでは、ボタンをサポートするボタン コンポーネントを src/index.vue に実装しました。 3 つのサイズの
<template>
<div :class="[size]" @click="click()">
<span><slot></slot></span>
</div>
</template>
<script>
/**
* 全局统一弹窗
*/
export default {
name: 'sgButton',
props: {
size: {
type: String,
default: ''
} // 按钮大小 ：small large
},
methods: {
click () {
this.$emit('click')
}
}
}
</script>
<style scoped>
.container{
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ccc;
}
.container.small{
height: 40px;
}
.container.large{
height: 60px;
}
</style>コンポーネントのエントリ ファイルindex.jsに次のコードを追加する必要があります:
// 导入组件，组件必须声明 name
import sgButton from './src'
// 为组件提供 install 安装方法，供按需引入
sgButton.install = function (Vue) {
Vue.component(sgButton.name, sgButton)
}
// 导出组件
export default sgButton次に、パッケージ ディレクトリに新しいエントリ ファイルを追加して、統一された方法ですべてのコンポーネントを処理およびエクスポートします: // 导入button组件
import sgButton from './sg-button'
// 组件列表
const components = [
sgButton
]
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，那么所有的组件都会被注册
const install = function (Vue) {
// 判断是否安装
if (install.installed) return
// 遍历注册全局组件
components.map(component => Vue.component(component.name, component))
}
// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
// 导出的对象必须具有 install，才能被 Vue.use() 方法安装
install,
// 以下是具体的组件列表
sgButton
}
2.3 コンポーネントの紹介 オンデマンドで紹介: import sgUi from '../packages/index' Vue.use(sgUi.sgButton)すべて紹介:
import sgUi from '../packages/index' Vue.use(sgUi)
2.4 测试代码
我们在examples目录的入口文件中全局引入了组件库
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import sgUi from '../packages/index'
Vue.config.productionTip = false
Vue.use(sgUi)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})然后我们编写一个vue页面来看看是否引入成功。
首先examples中新增pages目录，存放我们以后为每个组件单独编写的示例页面，新增examples/pages/buttonExample/index.vue 页面
<template>
<div class="container">
<sg-button>默认按钮</sg-button>
<sg-button :size="'large'">大按钮</sg-button>
<sg-button :size="'small'">小按钮</sg-button>
</div>
</template>
<script>
/**
* button 示例
*/
export default {
name: 'buttonExample',
methods: {
}
}
</script>在这里我们直接调用了三种尺寸的button,运行看下效果：
效果完美，代表我们组件库第一个组件以及整体流程打通！
组件库发布
之前的环节，我们成功实现了我们组件库的第一个组件，但考虑到这只是组件库，组件库内能调用肯定是不够的，类似 vant/ant 这些组件库，我们怎么让其他用户可以使用我们的组件库组件内?
我们可以考虑发布到npm上，后续项目需要的话，我们直接通过npm安装引入的方式来调用。
发布到npm的方法也很简单, 首先我们需要先注册去npm官网注册一个账号, 然后控制台登录即可,最后我们执行npm publish即可.具体流程如下:
// 本地编译组件库代码 yarn lib // 登录 npm login // 发布 npm publish // 如果发布失败提示权限问题,请执行以下命令 npm publish --access public
单元测试
以上がUI コンポーネント ライブラリを最初から構築する方法を段階的に説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
Vue.js vs. React：コミュニティ、エコシステム、およびサポートApr 27, 2025 am 12:24 AMVue.jsとReactにはそれぞれ独自の利点があり、選択はプロジェクトの要件とチームテクノロジースタックに基づいている必要があります。 1。Vue.jsはコミュニティに優しいものであり、豊富な学習リソースを提供しており、エコシステムには公式チームとコミュニティによってサポートされているVuerouterなどの公式ツールが含まれています。 2. Reactコミュニティは、強力なエコシステムを備えたエンタープライズアプリケーションに偏っており、Facebookとそのコミュニティが提供するサポートを頻繁に更新しています。
React and Netflix：関係を探るApr 26, 2025 am 12:11 AMNetflixはReactを使用してユーザーエクスペリエンスを強化します。 1）Reactのコンポーネント機能は、Netflixが複雑なUIを管理可能なモジュールに分割するのに役立ちます。 2）Virtual DomはUIの更新を最適化し、パフォーマンスを向上させます。 3）ReduxとGraphQLを組み合わせて、Netflixはアプリケーションのステータスとデータフローを効率的に管理します。
vue.js vs.バックエンドフレームワーク：区別を明確にしますApr 25, 2025 am 12:05 AMVue.jsはフロントエンドフレームワークであり、バックエンドフレームワークはサーバー側のロジックを処理するために使用されます。 1）VUE.JSは、ユーザーインターフェイスの構築に焦点を当て、コンポーネントおよびレスポンシブデータバインディングを介して開発を簡素化します。 2）ExpressやDjangoなどのバックエンドフレームワークは、HTTPリクエスト、データベース操作、ビジネスロジックを処理し、サーバーで実行します。
vue.jsとフロントエンドスタック：接続の理解Apr 24, 2025 am 12:19 AMVUE.JSは、開発効率とユーザーエクスペリエンスを向上させるために、フロントエンドテクノロジースタックと密接に統合されています。 1）建設ツール：Webpackおよびロールアップと統合して、モジュール開発を実現します。 2）国家管理：VUEXと統合して、複雑なアプリケーションステータスを管理します。 3）ルーティング：Vuerouterと統合して、単一ページのアプリケーションルーティングを実現します。 4）CSSプリプロセッサ：SASSをサポートし、スタイル開発効率を改善するために少なくなります。
Netflix：React（またはその他のフレームワーク）の使用の調査Apr 23, 2025 am 12:02 AMNetflixは、Reactのコンポーネント設計と仮想DOMメカニズムが複雑なインターフェイスと頻繁な更新を効率的に処理できるため、ユーザーインターフェイスを構築するためにReactを選択しました。 1）コンポーネントベースの設計により、Netflixはインターフェイスを管理可能なウィジェットに分解し、開発効率とコード保守性を向上させることができます。 2）仮想DOMメカニズムは、DOM操作を最小化することにより、Netflixユーザーインターフェイスの滑らかさと高性能を保証します。
vue.jsとフロントエンド：フレームワークに深く飛び込むApr 22, 2025 am 12:04 AMVue.jsは、使いやすく強力なため、開発者に愛されています。 1）そのレスポンシブデータバインディングシステムは、ビューを自動的に更新します。 2）コンポーネントシステムは、コードの再利用性と保守性を向上させます。 3）コンピューティングプロパティとリスナーは、コードの読みやすさとパフォーマンスを向上させます。 4）Vuedevtoolsの使用とコンソールエラーのチェックは、一般的なデバッグ手法です。 5）パフォーマンスの最適化には、主要な属性、計算された属性、およびキープアライブコンポーネントの使用が含まれます。 6）ベストプラクティスには、クリアコンポーネントの命名、単一ファイルコンポーネントの使用、ライフサイクルフックの合理的な使用が含まれます。
フロントエンドのvue.jsの力：主要な機能と利点Apr 21, 2025 am 12:07 AMVue.jsは、効率的で保守可能なフロントエンドアプリケーションを構築するのに適した進歩的なJavaScriptフレームワークです。その主な機能には、1。レスポンシブデータバインディング、2。コンポーネント開発、3。仮想DOM。これらの機能を通じて、VUE.JSは開発プロセスを簡素化し、アプリケーションのパフォーマンスと保守性を向上させ、最新のWeb開発で非常に人気を博しています。
Vue.jsはReactよりも優れていますか？Apr 20, 2025 am 12:05 AMVue.jsとReactにはそれぞれ独自の利点と欠点があり、選択はプロジェクトの要件とチームの条件に依存します。 1）Vue.jsは、シンプルで使いやすいため、小さなプロジェクトや初心者に適しています。 2）Reactは、その豊富な生態系とコンポーネント設計のため、大規模なプロジェクトと複雑なUIに適しています。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
ホットトピック
7753
15164314139852129325123429