スクラッチからの Vue2.0 設定 mint-ui (コード付き)-jsチュートリアル-php.cn

スクラッチからの Vue2.0 設定 mint-ui (コード付き)

php中世界最好的语言

リリース： 2018-06-06 14:24:30

オリジナル

2140 人が閲覧しました

今回は、Vue2.0用にmint-uiをゼロから設定する方法（コード付き）をお届けします。Vue2.0用にmint-uiをゼロから設定する場合の注意点は何ですか？実際のケースを見てみましょう。。

最近、プロジェクトを開発する際に vue.js+mint-ui テクノロジースタックを徐々に採用してきましたが、昨日開発環境の設定を開始したところ、公式ドキュメントに従って設定してもさまざまなエラーに遭遇しました。 2 社ともエラーが報告されるため、夕方仕事を終えてから一晩中設定に戻り、最終的に設定を行ったので、後で同じことが起こらないように記録しました。。

vue.js の紹介

Vue.js は、Web インタラクティブインターフェイスを作成するためのツールです。その機能は

簡潔な HTML テンプレート + JSON データで、Vue インスタンスを作成するだけで、非常に簡単です。
データドリブン依存するテンプレート式と計算されたプロパティを自動的に追跡します。
コンポーネント化では、分離された再利用可能なコンポーネントを使用してインターフェースを構築します。
軽量 ~24kb min+gzip、依存関係なし。
高速、正確、効果的な非同期バッチ DOM 更新。
モジュールフレンドリー NPM または Bower 経由でインストールし、ワークフローにシームレスに統合します。

vue.js 中国語公式ウェブサイト

mint-uiの紹介

Mint UIは、Ele.meフロントエンドチームによるVue.jsに基づくオープンソースのモバイルコンポーネントライブラリです

特徴は次のとおりです:

Mint UI には豊富な CSS と JS コンポーネントが含まれており、日々のモバイル開発ニーズを満たすことができます。これにより、統一されたスタイルのページを迅速に構築し、開発効率を向上させることができます。
オンデマンドでのコンポーネントの真のロード。ファイルサイズが大きすぎることを気にせずに、宣言されたコンポーネントとそのスタイルファイルのみをロードできます。
モバイル端末のパフォーマンス閾値を考慮して、Mint UIはCSS3を使用してさまざまなアニメーションを処理し、ブラウザの不必要な再描画や再配置を回避し、ユーザーがスムーズでスムーズなエクスペリエンスを得ることができます。
Vue.js の効率的なコンポーネント化ソリューションに依存している Mint UI は軽量です。すべてインポートしたとしても、圧縮ファイルのサイズは gzip でわずか約 30kb (JS + CSS) です。

Mint UI中国語公式サイト

Vue.jsプロジェクトを作成します

まずvue公式サイトに記載されている方法に従ってローカルにvueプロジェクトを作成します

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

ログイン後にコピー

Mint UI環境を設定します

その後Mint UI の公式 Web サイトに従ってください。 Mint UI 環境をプロジェクトに導入します

npm i mint-ui -S

ログイン後にコピー

次に、すべてのコンポーネントをプロジェクトの main.js ファイルに導入します

import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'
Vue.use(MintUI)

ログイン後にコピー

さて、公式 Web サイトによると、上記のコードで導入が完了しました。ミントUI。

プロジェクトを実行します

最後に、公式サイトの内容に従ってAPP.vueにボタンコンポーネントを記述します

<template>
 <p id="app">
 <mt-button @click.native="handleClick">按钮</mt-button>
</p>
</template>
<script>
export default{
 el: '#app',
 methods: {
  handleClick: function() {
   this.$toast('Hello world!');
  }
 }
}
</script>
<style>
</style>

ログイン後にコピー

さて、環境が整ったのでプロジェクトを実行してみましょう

npm run dev

ログイン後にコピー

すると、様々なエラーが報告されます

エラーを解決するには

まずローカルプロジェクトにCSSインタープリターをインストールする必要があります

npm i css-loader style-loader -Dnpm i css-loader style-loader -D

然后在build文件夹下面的webpack.base.conf.js文件里面配置如下代码

{
    test: /\.css$/,
    include: [
     /src/,
     '/node_modules/mint-ui/lib/'  
    ],
    use:[
     {loader:"style-loader"},
     {loader:"css-loader"},
    ]
    
   }

ログイン後にコピー

如果你报es2015之类的错误，则需要将.babelrc文件修改为：

{
 "presets": [
  ["es2015", { "modules": false }]
 ],
 "plugins": [["component", [
  {
   "libraryName": "mint-ui",
   "style": true
  }
 ]]]
}

ログイン後にコピー

最后运行

环境配置好后，我们最后再运行一下。

npm run dev

次にビルドフォルダーの下にインストールします次のコードは webpack.base.conf.js ファイルで構成されています

rrreee

es2015 などのエラーを報告する場合は、.babelrc ファイルを次のように変更する必要があります:

rrreee

最後に実行します

環境が整ったら設定が完了したら、最後に実行します。

npm run devこれで環境設定は完了です。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書: 🎜🎜🎜vueルーターの動的ルーティング操作のサブルーティング🎜🎜🎜🎜🎜vue+webpackを使用して非同期読み込みを行う方法🎜🎜🎜

以上がスクラッチからの Vue2.0 設定 mint-ui (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。