Vue アクティビティ作成プロジェクトへの道は、デザインとナビゲーションバーの開発から始まります-jsチュートリアル-php.cn

Vue アクティビティ作成プロジェクトへの道は、デザインとナビゲーションバーの開発から始まります

不言

リリース： 2018-07-09 11:39:43

オリジナル

2115 人が閲覧しました

この記事は、Vue アクティビティ作成プロジェクトのデザインとナビゲーションバーの開発を主に紹介します。これは、必要な友人に参照してもらうために共有します。

Element の導入など、プロジェクトを直接開始します。 - ここではuiの基本操作は省略しました

プロジェクトのコンポーネント分割

プロジェクトの分析に基づいて、以下の新しいコンポーネントを作成しました。
Vue アクティビティ作成プロジェクトへの道は、デザインとナビゲーションバーの開発から始まります

vue-routerルーティング設計

コンポーネントが作成されたら、ルーティングを設定しましょう
src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Index from 'components/Index'
import Login from 'components/Login'
import Regular from 'components/activity/regular/Regular'
import Topic from 'components/activity/topic/Topic'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: Index
    },
    {
      path: '/login',
      component: Login
    },
    {
      path: '/Topic',
      component: Topic
    },
    {
      path: '/regular',
      component: Regular
    }
  ]
})

ログイン後にコピー

ここで注意すべき点は、インポートのパスがbuild/に設定されていることです
webpack.base.conf.js が解決を見つけて、コンポーネントをコンポーネントのビットに設定します
このようにして、コンポーネントはインポート時に 'src/components' パスを表します

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

ログイン後にコピー

ナビゲーションメニューナビゲーションバーの開発

Muse が使用されているため-ui なので、ナビゲーションバーはドキュメントから直接コピーされます。ここにはコードはありません。ここでは、Vue の構文に関係する部分について説明します。プロジェクトの先頭で、ルーティングに応じて変更されます。Vue には監視リスナーがあり、この効果を実現するために $route の変更を監視するために監視を使用します

Nav.vue

export default {
  name: 'Nav',
  data () {
    return {
      nowRouter: this.$route.name
    }
  },
  watch: {
    $route (to, from) {
      this.nowRouter = this.$route.name
    }
  }
}

ログイン後にコピー

これらを設定し、コマンドを実行します。コンソール

効果を見てみましょうnpm run dev

Vue アクティビティ作成プロジェクトへの道は、デザインとナビゲーションバーの開発から始まります