Vue2.0 mint-uiが踏んだ穴を構成する

最近開発プロジェクトの時にvueを採用しつつある.js+mint-uiのテクノロジースタックですが、昨日開発環境を配置し始めたとき、いろいろなエラーに遭遇しました.2つの公式ドキュメントに従って配置しても、エラーが発生します.夜、退勤してから帰って一晩配置して、やっと配置しました.だから、後で再び穴を踏まないように記録しました.
vue.js紹介
Vue.jsは、Webインタラクティブインタフェースを作成するために使用されます.その特徴は

HTMLテンプレート+JSONデータを簡潔にし、Vueインスタンスを作成するのは簡単です.

データドライバは、依存するテンプレート式と計算属性を自動的に追跡します.

コンポーネント化インターフェースは、デカップリングされ、多重化されたコンポーネントで構築される.

軽量~24 kbmin+gzip、依存なし.

高速で効率的な非同期バッチDOM更新.

モジュールはNPMまたはBowerを介してインストールされ、ワークフローにシームレスに組み込まれています.

vue.js中国語公式サイト
mint-uiの紹介
Mint UIはお腹が空いたか?フロントエンドチームがオープンソースのVueベースです.jsのモバイルエンドコンポーネントライブラリの特徴は:

Mint UIは豊富なCSSとJSコンポーネントを含み、日常のモバイル端末の開発ニーズを満たすことができる.これにより、スタイルの統一されたページを迅速に構築し、開発効率を向上させることができます.

本当の意味でのオンデマンド・ロード・コンポーネント.宣言されたコンポーネントとそのスタイルファイルのみをロードでき、ファイルのボリュームが大きすぎることにこだわる必要はありません.

モバイル端末の性能の敷居を考慮して、Mint UIはCSS 3を採用して各種の動効を処理して、ブラウザが不要な再描画と再配置を行うことを避けて、それによってユーザーに流暢で滑らかな体験を得ることができます.

はVueを頼りにしている.jsの効率的なコンポーネント化スキームにより、Mint UIは軽量化された.全て導入したとしても圧縮後のファイル体積は~30 kb(JS+CSS)gzipのみである.

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の公式サイトに従ってプロジェクトに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)

さて、公式サイトによると、上記のコードはMint UIの導入を完了しました.
プロジェクトの実行
最後に公式サイトの内容によりAPP.vueにbuttonコンポーネントを書いてみましょう

<span class="hljs-built_in">export</span> default{
  el: <span class="hljs-string">'#app'</span>,
  methods: {
    handleClick: <span class="hljs-function"><span class="hljs-title">function</span></span>() {
      this.<span class="hljs-variable">$toast</span>(<span class="hljs-string">'Hello world!'</span>);
    }
  }
}

はい、環境構築が完了しました.プロジェクトを実行しましょう.

npm run dev

そしてパチパチパチパチ
エラーの解決
まず、ローカルプロジェクトにCSS解釈器をインストールする必要があります.npm 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"},
        ]
        
      }

es 2015などのエラーを報告する場合は、babelrcファイルは次のように変更されました.

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

さいしゅううんてん
環境の構成ができたら、最後にもう一度実行します.npm run dev
やっとできました.これで、環境構成が完了しました.