Vueの中のVux配置ガイド

1675 ワード

vue vux 設定

概要
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を使ってソースコードをコンパイルしますので、プロジェクトにはless-loaderが必要です。


npm install less less-loader --save-dev

3.vux-loaderをインストールし、vuxLoaderを配置する：
インストールvux-loader:


npm install less vux-loader --save-dev

vux-loaderを配置しなくてもいいです。配置しないとコンポーネントを導入するのはこのようです。

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

設定後は、このようにコンポーネントを導入することができます。


import { AlertPlugin, ToastPlugin } from 'vux'

設定の流れは以下の通りです。
webpack.base.com nfig.jsでは、webpackConfigは前の構成（つまり前のmodule.exportの右側のブロックは、現在この変数として保存されています）を修正しました。


const vuxLoader = require('vux-loader')
module.exports = vuxLoader.merge(webpackConfig, {
  options: {
    showVuxVersionInfo: false //  vux console        
  },
  plugins: [{
    name: 'vux-ui'
  }]
})

締め括りをつける
以上は小编でご绍介したVueの中のVux配置ガイドです。皆さんに何かお聞きしたいことがあれば、メッセージをください。小编はすぐにご返事します。ここでも私たちのサイトを応援してくれてありがとうございます。

Vueでグローバルコンポーネントの実現方法をカスタマイズします。

AndroidはWeChat 5をまねてスライドガイドを実現します。