VUE-ルータ、elementiui、vant組み込まれたアプリケーションのインストール

.vueルータ

1.インストール
①ダウンロード/ CDN
https://unpkg.com/vue-router/dist/vue-router.js
Vueの背後にあるロードVUE-ルータ、それが自動的にインストールされます。

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

②NPM

npm install vue-router

③でindex.js導入ファイル

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

ページの一番下にジャンプすることが必要例えば、書かれている、ホームインデックス：

④でmain.js文書を導入

import router from './router';

3.ルートジャンプ

<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/"></router-link>  //to跳转页面

二.Vant

1.インストールNPM

npm i vant -S

2成分の導入
自動組立（推奨）の導入を要求①は
babel-plugin-import、それが自動的にインポート要求コンパイルプロセスにおける文言に変換される、の導入バベルプラグインである
＃インストールプラグ

npm i babel-plugin-import -D

//における.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
//コードのプラグが自動的ジデマンドモードに変換される形で導入されます
import { Button } from 'vant'。

②手動導入手段を要求する
プラグを使用することなく、必要なコンポーネントを手動で導入することができます

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

③すべてのコンポーネント導入
Vant支持インポート全ての使い捨てコンポーネント、これは推奨されないように、コード・パッケージの容積を増加させるために組み込まれたすべてのコンポーネント
にmain.js組み込まれる文献：

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

Vue.use(Vant);

④CDNを導入することにより
Vant最も簡単な方法を使用すると、HTMLファイルに直接CDNリンクを導入することです

<!-- 引入样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css">

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js"></script>

<script>
// 在 #app 标签下渲染一个按钮组件
new Vue({
  el: '#app',
  template: `<van-button>按钮</van-button>`
});

// 调用函数组件，弹出一个 Toast
vant.Toast('提示');
</script>

三.elementui

インストール1.
①npmインストールを

npm i element-ui -S

②CDNは、インストール
を始めるために、JSとCSSファイルを導入するページ

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

2.はじめ要素は
の導入完了①以下の書かれた内容を：
main.js

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

②需要の導入は、
アセンブリアイテムのみの量を削減するという目標を達成するために、導入を必要とする：
第一には、バベル・プラグイン・コンポーネントをインストールします。

npm install babel-plugin-component -D

すると、.babelrc次のように改正：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

あなただけの、ボタンや選択など、いくつかのコンポーネントを、ご紹介したい場合次に、あなたがする必要がありmain.js、以下の内容を記述します。

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});