要素+ VUE +のVUE-ルータで

すぐに基本的な手順

 npm install -g vue-cli
npm init webpack 
cnpm i element-ui -S

/src/main.jsを変更

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from '[email protected]@element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false
Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

App.vueを変更

<template>
  <div id="app">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

インストールサイドメニューバー

//NavMenu
<template>
    <div>
        <el-row class="tac">
            <el-col :span="24">
                <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                unique-opened
                router
                background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                    <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>导航一</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="1-1">选项1</el-menu-item>
                        <el-menu-item index="1-2">选项2</el-menu-item>
                        <el-menu-item index="1-3">选项3</el-menu-item>
                        <el-menu-item index="1-4">选项4</el-menu-item>
                    </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>导航二</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="2-1">选项1</el-menu-item>
                        <el-menu-item index="2-2">选项2</el-menu-item>
                        <el-menu-item index="2-3">选项3</el-menu-item>
                        <el-menu-item index="2-4">选项4</el-menu-item>
                    </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-col>
    </el-row>
    </div>
</template>
<script>
export default {
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

この時、次の結果ページ

「@ /コンポーネント/からの輸入NavMenu NavMenu」の@の意味
次のコードのビルド/ webpack.base.conf.jsは、別名の別名である、で、SRCパス@記号を表すためである
@そう/コンポーネント/ navMenuはSRC /コンポーネント/ navMenuです。このようなWebPACKのは、ドキュメントを導入する方法を知っています。
これの利点は、SRCを書くために周りに行かなければならないことです。

 resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

サイドメニューバーの高度な
機能は、我々は必要です：

メニューのみを展開することができ
、対応する構成要素にジャンプし、二次メニューが自動的に経路を変更することができCPCを
メニューがルートにも使用されるので、それは、からなるプロファイル抽象好ましい
最初の点第二のポイントは、従事要素上の設定ファイルを持っている方が良いです。

ユニークなオープン：拡張のみサブメニューを維持するかどうかを
VUE-ルータモードを使用するかどうか、このモードを有効にすると、アクティブにナビゲーションが時にジャンプするパスとしてインデックスにルーティングされます：ルータを
一時的にルートを追加します：main.js変更し
、それぞれをHTMLについて書く必要がありますだけでHTMLを使用していない、JSことができ、許容できないメニューを追加します。
ファイルディレクトリメニュー-config.jsの作成、SRCのconfigディレクトリ内のディレクトリを作成します。
外側の配列は、メニューを表し、内側の配列は、2つのサブメニューを表します。

//menu-config.js
module.exports = [{
  name: '基础',
  id: 'basic',
  sub: [{
    name: 'Layout布局',
    componentName: 'BasicLayout'
  }, {
    name: 'Container布局容器',
    componentName: 'BasicContainer'
  }]
},
{
  name: 'Form',
  id: 'Form',
  sub: [{
    name: 'Radio单选框',
    componentName: 'FormRadio'
  }, {
    name: 'Checkbox多选框',
    componentName: 'FormCheckbox'
  }]
}]

この文書の導入NavMenu.vueと、このメニューをレンダリングするために、V-ための循環を使用します。

//NavMenu.vue
<template>
  <el-row class="tac">
    <el-col :span="24">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        unique-opened
        router
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-submenu v-for="item in menu" :index="item.id" :key="item.id">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span v-text="item.name"></span>
          </template>
          <el-menu-item-group
            class="over-hide"
            v-for="sub in item.sub"
            :key="sub.componentName"
          >
            <el-menu-item index="sub.componentName" v-text="sub.name"></el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
import menu from '@/config/menu-config'
export default {
  data () {
    return {
      menu: menu
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

、オーバーフロービットの親要素を展開したときにここで説明するのは、私は、二次メニュー過隠すカテゴリに二次メニューを追加しました。
お使いのブラウザを開き、メニューを見て、この時間はすでにレンダリングのプロファイルに基づいています。

ヘッダの追加
componets Header.vueの下にフォルダを作成するための、および、中App.vueを導入
参照するには、ブラウザを開くには、この時間は、すでに少し格好良いではありません。体に境界線がある。しかし、それは良いああを見ていない

再び美化
Normalize.css CSSのリセットを使用して
フォント素晴らしいVUE-素晴らしいアイコンライブラリを使用
VUE-awesomeが、インストールNormalize.cssを

npm install normalize.css -D
npm install vue-awesome -D

main.jsを変更

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import 'element-ui/lib/theme-chalk/index.css'
import ElementUI from 'element-ui'
import 'vue-awesome/icons'
import Icon from 'vue-awesome/components/Icon'
Vue.use(ElementUI)
Vue.component('icon', Icon)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

//mormalize.css我引用了没有作用就删除了

コンポーネントのルーティングおよび遅延ロード
新しい四つの成分

//BasicContainer.vue
<template>
    <div>
        这是:container布局容器
    </div>
</template>
<script>
export default {
  name: ' BasicContainer'
}
</script>

//BasicLayout
<template>
    <div>
        这是Layout布局
    </div>
</template>
<script>
export default {
  name: 'BasicLayout'
}
</script>

//FormCheckbox
<template>
    <div>
        这是:checkbox多选框
    </div>
</template>
<script>
export default {
  name: 'FormCheckbox'
}
</script>

//FormRadio
<template>
    <div>
        这是radio单选框
    </div>
</template>
<script>
export default {
  name: 'FormRadio'
}
</script>

注：バベルを使用している場合は、バベルが正しく文法を解析できるようにするために、構文ダイナミックインポートプラグインを追加する必要があります。
言い換えれば、あなたは最初の構文ダイナミックインポートをインストールする必要があり、そうでない場合は遅延ロードはできません。

cnpm install --save-dev babel-plugin-syntax-dynamic-import

ルート/ index.jsファイルを変更します

import Vue from 'vue'
import Router from 'vue-router'
import menus from '@/config/menu-config'

Vue.use(Router)

var routes = []
menus.forEach((item) => {
  item.sub.forEach((sub) => {
    routes.push({
      path: `/${sub.componentName}`,
      name: sub.componentName,
      component: () => import(`@/components/${sub.componentName}`)
    })
  })
})
export default new Router({routes})

ジャンプ見つけ進行ルートが表示されませ

この記事から学びます。https：//segmentfault.com/a/1190000012015667

おすすめ