Vue CLI 3+Vantプロジェクト構築

注記:以下のコマンドはnpmを使用します.yarnを使用している場合は、以下のリンクをクリックして参照できます.
Vue CLI 3
インストール:

npm install -g @vue/cli

プロジェクトを作成するには

vue create my-project    // my-project     

プロジェクトの作成が完了したら、プロジェクトのルートディレクトリに入ります.

cd my-project

Vantまたは他のUIコンポーネントライブラリが不要な場合は、プロジェクトを直接実行できます.

npm run serve

必要なら下を見てください.ここで私が使っているのはVant(軽量で信頼できるモバイル端末Vueコンポーネントライブラリ)です.
 
Vant
インストール:

npm install --save vant

コンポーネントの導入:
方式一babel-plugin-importの使用(推奨) babel-plugin-importはbabelプラグインで、コンパイル中にimportの書き方を自動的にオンデマンドで導入する方法に変換します.
#babel-plugin-importプラグインのインストール

npm i babel-plugin-import -D

#新規作成.babelrcファイル、ルートディレクトリに「.babelrc」ファイルを新規作成するか、次のコマンドを使用します.

type null>.babelrc

    # .babelrcでの構成

//   ：webpack 1      libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

//      babel7    ，    babel.config.js    
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

#その後、コンポーネントにvantのコンポーネントを必要に応じて導入し、vueにコンポーネントを登録して使用できます.

import {Button} from 'vant';
export default {
  name: 'App',
  //          
  components:{
    [Button.name]:Button
  }
}

 
方式二コンポーネントのオンデマンド導入
#プラグインを使用しない場合は、必要なコンポーネントを手動で導入できます.

import Button from 'vant/lib/button';
import 'vant/lib/button/style';

 
方式三すべてのコンポーネントをインポート
#注意:babel-plugin-importプラグインを構成すると、すべてのコンポーネントのインポートは許可されません.

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

 
そして運転できるようになりました

npm run serve