Vue を使用して Toutiao を模倣する (詳細なチュートリアル)

この記事では、Toutiao を模倣した Vue の詳細な例を主に紹介し、関連するコードを説明します。これに興味のある友人は参照してください。

前書き

しばらくの間、Vue を使ってモバイル端末を書きたいと思っていましたが、年末であまり忙しくないので、それに取り組み始めました。数日前の時点ではほとんど読めません

私も純粋にフロントエンドページを書いているので、実際のリクエストをシミュレートするために、API を自分で直接生成できます。 Easy Mock で
このプロジェクトの Easy Mock アカウントとパスワードに直接ログインすることもできます:

アカウント: vue-toutiao
パスワード: 123456

インターフェースを変更したい場合は、コピーを作成して変更してください

バックエンドインターフェイスを自分で開発したい場合。私のブログ Vue + Node + Mongodb を読んで完全なブログ プロセスを開発してください

テクノロジー スタック:

vue + webpack + vuex + axios

構造:

• build: webpack 設定

• config: プロジェクト設定パラメータ

• src

• assets: 静的リソースファイル、画像の保存など

• components: 共通コンポーネント。たとえば、ポップアップ ウィンドウなどです。 。 。

• ディレクティブ: 共通コマンドのカプセル化

• router: ルーティングテーブル

• store: 状態管理vuex

• styles: スタイルファイル

• utils: 共通ユーティリティクラス

• ビュー:ページを表示します

• static: 静的ファイル: favicon.ico などを保存します

• このプロジェクトはパッケージ化に DllPlugin を使用します。プロジェクトを開始するときに、必ずスクリプト コマンドを 1 回実行して構成を生成してください

。デモ:

いくつかの共通知識のポイント

1. ルートの遅延読み込み

{
  path: '/development',
  name: 'development',
  component: (resolve) => {
    require(['../views/development.vue'], resolve)
  }
}

または

const _import_ = file => () => import('views/' + file + '.vue')

{
  path: '/development',
  name: 'development',
  component: _import_('development')
}

2. ログインインターセプト

に合格しましたbeforeログインが必要かどうかを決定するためにルートの各フック関数が使用されます

// 如：系统设置需要登陆
{ 
  path: '/system', 
  name: '系统设置', 
  meta: { 
    login: true
  },
  component: _import_('System/index')
}

router.beforeEach((to, from, next) => {
  if (to.meta.login) { //判断前往的界面是否需要登陆
    if (store.state.user.user.name) { // 是否已经登陆
      next()
    }else{
      Vue.prototype.$alert('请先登录!')
        .then( () => {
          store.state.user.isLogin = true
        })
    }
  }else{
    if (to.meta.page) store.state.app.pageLoading = true
    next() 
  }
  
})

3. アニメーションの切り替え

ルーターに設定されているanimate属性を検出して、どのような種類の切り替えアニメーションを行うかを決定します

Router.prototype.animate = 0

// 获取每个路由meta上面的slide 来判断它做什么动画
{ 
  path: '/system', 
  name: '系统设置', 
  meta: { 
    slide: 1 
  },
  component: _import_('System/index')
}


watch: {
  $route (to, from) {
    /*
    0: 不做动画
    1: 左切换
    2: 右切换
    3: 上切换
    4: 下切换
    ...
     */
    let animate = this.$router.animate || to.meta.slide
    if (!animate) {
      this.animate = '' 
    }else{
      this.animate = animate === 1 ? 'slide-left' :
        animate === 2 ? 'slide-right' :
        animate === 3 ? 'slide-top' :
        animate === 4 ? 'slide-bottom' : ''
    }
    this.$router.animate = 0
  }
}

4.再生

IOS ではビデオ コントロールを非表示にできないため、キャンバスを描画することでビデオを非表示にし、ビデオを再生する効果を実現できます

5 アイコンは Alibaba のベクター グラフィックスを使用しています

6。

7. 簡単なモック

上記は私があなたのためにまとめたものです。

関連記事:

vue でオブジェクトのプロパティが変更されたときにビューが更新されない問題に対処するにはどうすればよいですか?

vue2.0の異なる画面適応のためのpxとrem変換の問題

Vueでプログレスバー付きのファイルドラッグとアップロード機能を実装する方法

以上がVue を使用して Toutiao を模倣する (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。