Vue 設定ガイドについて (詳細なチュートリアル)

Vux は Vue.js の UI ライブラリです。公式 Web サイトはここにあります。ここでは、Vux の構成プロセスを簡単に説明します。興味のある方は、Script House の編集者をフォローして一緒に学んでください

はじめに

Vux ([ブジュ:ズ] と発音、ビューと同じ) は、WeUI と Vue (2) に基づいて開発されたモバイル端末です。 .x) UI コンポーネント ライブラリ。主に WeChat ページを提供します。

webpack+vue-loader+vux に基づいて、vux-loader を使用して、WeUI に基づいて必要なスタイルをカスタマイズできます。

vux-loader は、コンポーネントがオンデマンドで使用されることを保証するため、最終的に vux コンポーネント ライブラリ コード全体をパッケージ化することを心配する必要はありません。

vux は WeUI に完全に依存しているわけではありませんが、全体的な UI スタイルを WeUI の設計仕様に近づけるように努めてください。当初の目標は、使いやすく実用的で美しいモバイル UI コンポーネント ライブラリを作成することでしたが、まだ理想的な状態には程遠いため、全員が問題についてタイムリーにフィードバックを提供し、コードに貢献する必要があります。

プロセス

Vux は Vue.js の UI ライブラリです。公式ドキュメントの構成ガイドでは、ここで Vux の構成プロセスを簡略化します。

1. vux をインストールします

npm install vux --save

2.less-loader をインストールします

vux はソースコードのコンパイルに使用する量が少ないため、プロジェクト内にless-loader が必要です。 。

npm install less less-loader --save-dev

3. vux-loader をインストールし、vuxLoader を設定します:

vux-loader をインストールします:

npm install less vux-loader --save-dev

設定されていない場合、コンポーネントは次のように導入されます:

import AlertPlugin from 'vux/src/plugins/Alert'
import ToastPlugin from 'vux/src/plugins/Toast'

設定 その後、次のようにコンポーネントを導入できます:

import { AlertPlugin, ToastPlugin } from 'vux'

設定プロセスは次のとおりです:

webpack.base.config.js を次のように変更します。ここで、webpackConfig は以前の設定 (つまり、以前は module.export の右側を保存していましたが、今はこの変数として保存します):

const vuxLoader = require('vux-loader')
module.exports = vuxLoader.merge(webpackConfig, {
  options: {
    showVuxVersionInfo: false //关闭vux在console里输出的版本信息
  },
  plugins: [{
    name: 'vux-ui'
  }]
})

上記は私が皆さんのためにまとめたもので、将来皆さんのお役に立てれば幸いです。

関連記事:

Web版電卓をJSで実装する方法

JSを使用してボールの放物線運動を実装する方法

JavaScriptを使用してバイナリツリートラバーサルを実装する方法

以上がVue 設定ガイドについて (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。