cli、ライフサイクル
5394 ワード
一、ライフサイクル(王者)ライフサイクルとは?vueのライフサイクルとは、コンポーネントの作成から破棄までのプロセスを指します.このプロセスでは、特定のフェーズごとにいくつかのメソッド(これらのメソッドはいくつかの機能を備えています)がトリガーされます.これらのメソッドには、(ライフサイクルフック関数/コンポーネントフック) という名前が付けられています.なぜライフサイクルを学ぶのですか?ライフサイクルフックでプロジェクト機能を実現するには、各フック関数の具体的な用途 を知る必要があります.このライフサイクルは誰のライフサイクルですか?アセンブリ プロジェクトのライフサイクルの書き方(機能) 二、swiper
作用:移動端、pc端のスライド操作を実現するために使用する
swiperはサードパーティのライブラリです
swiper公式サイトドキュメントhttps://www.swiper.com.cn/
vueでのswiper実装
開発者の中には、vue-swiperというサードパーティのライブラリを使ってマルチキャストを実現する人もいます.
三、カスタム命令(白銀)
v-html
v-text
v-for
v-if
v-else-if
v-else
v-show
v-on
v-bind
v-model
以上のコマンドはユーザが十分に使用できないため,vueは開発者にカスタムコマンドの方式を提供した.
例:例えば、inputフォーカスを自動的に取得したり、マルチキャストをしたりする命令がほしいです.の
2つのカスタム命令の使用方法があります.グローバル定義----vue.directive() ローカル定義directives:{} 命令のフック関数
カスタム命令フックのパラメータ binding:次のプロパティを含むオブジェクト.
四、cli(王者) cliとは何ですか?cliはvueが提供するプロジェクト環境を迅速に構築するためのツールであり、下位層ではwebpack が使用されている. cliは現在どのようなバージョンがありますか?cli 2 cli 3 cli 3はコンピュータの配置に一定の要求がある cliはどのように使用しますか? cliのインストールnpm/cnpm/yarnはすべて使用できます をインストールできます.
インストール3に失敗した場合は、cnpmを使用して@vue/cli@vue/cli-init 1のインストールを続行できます.インストール成功コマンドライン入力: を証明します.プロジェクトcli 3バージョンの作成 コマンド作成【推奨】 手動選択構成 node-sassをインストールして問題が発生した場合、どのように解決しますか? まずnpmソースnrm use npm に切り替える. cnpmを使用してcnpm i node-sass sass-loader-D をインストール
グラフィックインタフェース を作成標準版 簡易版 please pick a preset(user arrow keys)キーボードの上下キーを使用して構成を選択 defaultデフォルト構成 Manually select features手動選択構成 構成とは、webpack の構成を指す. babel優雅降格es 6—>es 5 eslint js構文検出 CSS Pre-processors css前処理言語less sass/scss stylus Linter/Formatter eslint/jslint Unit Testingユニットテスト E 2 E Testingエンドツーエンドのテスト In dedicated config fies選択した各オプションを1つのファイルで保存(構成) PWA(web app)ブラウザで使用するapp
Save this as a preset for future projects? 上記の選択した構成を保存して、将来のプロジェクトの使用に備える注意:cli 3で使用するパッケージマネージャはyarnをお勧めします.国内のミラーソースを構成することを忘れないでください.
4.いくつかのバージョンのディレクトリを分析する
cli3
目次 node_modulesプロジェクトの依存パッケージ cli 3 webpack構成node_modules中 public静的リソースディレクトリ img js css favicon.icoプロジェクトタイトルのロゴ index.htmlルートインスタンスコンポーネントのテンプレートであり、プロジェクト全体のコンテナ でもある.
srcソースコード開発ディレクトリ(開発者が主に開発したディレクトリフォルダでもある) .gitignore gitアップロード無視ファイル構成 babel.config.js優雅な降格プロファイルは、es 6-->es 5 package.jsonプロジェクト全体の依存プロファイル README.mdプロジェクト全体の起動の説明ファイル yarn.lock真個プロジェクトの依存ファイルの情報 postcss.config.jsプロジェクトcss前処理の構成 .browserslistrcブラウザバージョンのサポート
cli 2標準版
build webpack構成
config webpack構成
node_modules
src
static静的リソース構成
js
css
img
.babelrc優雅なダウングレードプロファイル
.postcssrc css前処理プロファイル
.editorconfigエディタプロファイル
cli 2簡易版
srcソース開発ディレクトリ
webpack.config.js webpackプロファイル
作用:移動端、pc端のスライド操作を実現するために使用する
swiperはサードパーティのライブラリです
swiper公式サイトドキュメントhttps://www.swiper.com.cn/
vueでのswiper実装
1. ， mounted
2. ， updated
3. ：
1.
2.
1. setTimout
2. nextTick
開発者の中には、vue-swiperというサードパーティのライブラリを使ってマルチキャストを実現する人もいます.
三、カスタム命令(白銀)
v-html
v-text
v-for
v-if
v-else-if
v-else
v-show
v-on
v-bind
v-model
以上のコマンドはユーザが十分に使用できないため,vueは開発者にカスタムコマンドの方式を提供した.
例:例えば、inputフォーカスを自動的に取得したり、マルチキャストをしたりする命令がほしいです.の
2つのカスタム命令の使用方法があります.
bind:1回のみ呼び出され、命令が要素に最初にバインドされたときに呼び出されます.ここでは、一度に初期化設定を行うことができます.inserted:バインドされた要素が親ノードに挿入されたときに呼び出されます(親ノードが存在することを保証しますが、必ずしもドキュメントに挿入されているわけではありません).update:コンポーネントのVNode更新時に呼び出されますが、サブVNode更新の前に発生する可能性があります.命令の値が変わったかもしれないし、なかったかもしれない.ただし、更新前後の値を比較することで、不要なテンプレート更新を無視できます(詳細なフック関数パラメータは下を参照).componentUpdated:命令が存在するコンポーネントのVNodeおよびそのサブVNodeがすべて更新された後に呼び出される.unbind:1回のみ呼び出され、命令と要素が結合解除されたときに呼び出されます(命令にバインドされた要素が削除されます).el:DOMを直接操作するために使用できる命令にバインドされた要素.name:v-プレフィックスを含まない命令名.value:命令のバインド値、例えば、v-my-directive="1 + 1"のうち、バインド値は2である.oldValue:命令バインディングの前の値で、updateおよびcomponentUpdatedフックでのみ使用できます.値が変更されるかどうかにかかわらず使用できます.expression:文字列形式の命令式.例えばv-my-directive="1 + 1"において、式は"1 + 1"である.arg:命令に伝達されるパラメータ.オプション.例えばv-my-directive:fooでは、パラメータは"foo"である.modifiers:修飾子を含むオブジェクト.たとえば、v-my-directive.foo.barでは、修飾子オブジェクトは{ foo: true, bar: true }です.vnode:Vueコンパイル生成された仮想ノード.詳細については、VNode APIを参照してください.oldVnode:前の仮想ノードは、updateおよびcomponentUpdatedフックでのみ使用できます.四、cli(王者)
$ yarn add @vue/cli globalこれはcli 3のバージョンですcli 2の足場を使用したい場合は、パッケージ$ yarn add @vue/cli-init global インストール3に失敗した場合は、cnpmを使用して@vue/cli@vue/cli-init 1のインストールを続行できます.
$ cnpm i @vue/cli -gこれはcli 3のバージョンですcli 2の足場を使用したい場合は、パッケージ1をインストールすることができます.$ cnpm i @vue/cli-init -gまだ問題がある場合はcli 3を使用しないでください.cli 2 `$ cnpm i vue-cli -g`
$ vue出力があるかどうかを確認し、コマンドプロンプトを出力すると、インストール成功$ vue create project$ vue ui cli 2 $ vue init webpack project $ vue init webpack-simple project Save this as a preset for future projects? 上記の選択した構成を保存して、将来のプロジェクトの使用に備える注意:cli 3で使用するパッケージマネージャはyarnをお勧めします.国内のミラーソースを構成することを忘れないでください.
4.いくつかのバージョンのディレクトリを分析する
cli3
目次
cli 2標準版
build webpack構成
config webpack構成
node_modules
src
static静的リソース構成
js
css
img
.babelrc優雅なダウングレードプロファイル
.postcssrc css前処理プロファイル
.editorconfigエディタプロファイル
cli 2簡易版
srcソース開発ディレクトリ
webpack.config.js webpackプロファイル