プロジェクトの問題点、困難や解決策の一つ
1pxの境界線の問題は1、実際の表示は、1ピクセルの1ピクセルを加えることはできません原因画面上の別のデバイスに、開発の終了を移動し、どのように携帯電話の端を解決するには？
2.最後のクリッククリックイベントを移動し、解決する方法を、300ミリ秒を遅らせるだろうか？
解像度：Fastclickプラグを導入し、携帯端末の決意が300msの遅延;
NPM Fastclick --saveインストール、
フォルダmain.jsは、次のコードの記述ルータファイル
FastClick「Fastclick」からインポート
fastClick.attach（document.body）を
3.ファイル.vueにのみ使用されるVUE限界CSSファイル下スコープ。
アプリケーションの4 iconfontフォントアイコン：
ステップ：4.1 iconfontは、プロジェクトを作成し、アカウントを登録し、目的のアイコンが、このプロジェクトに追加され、プロジェクトがローカルコンピュータのフォルダにダウンロードされsrc->資産̶> iconfontインチ
4.2直接ファイルのインポート「./assets/iconfont.css」に導入main.jsに、ローカルパスでURL iconfont.cssのフォントを変更します。
4.3 <スパンクラス= "iconfont" >＆＃のxe624; </ span>のフォントは、アイコンを表示します。
5.スタイラススタイルのアプリケーション：
ステップ：5.1インストール：NPM --saveスタイラスをインストールし、時にはインストール--saveスタイラス・ローダーNPMをダウンロードするために必要な;
5.2使用：<スタイルLANG =「スタイラスは、」 /スコープ>。
スタイラス変数を格納するフォルダvaribles.stylus 5.3、
<スコープスタイルLANG =「スタイラス」/>タグは、その後、@import「../../assets/varibles.stylus」に導入します
背景：変数を使用する@bgColor。
真ん中6. @他のCSS CSSスタイルディレクトリの導入は、あなたが~@/assets/css/reset.cssを書く必要があることに注意し、srcディレクトリのパス、すなわち、@ /資産/ CSS / reset.cssです。
7.簡易パス、エイリアスがパスを単純化するために使用され、そのような@のCSS /のような単純化された資産/ CSS / AS /：
ステップ：ビルドファイルwebpack.base.conf.js 7.1
解決：{
拡張：[」の.js'、 '.vue'、 '.json']、
別名：{
'VUEの$'： 'VUE / DIST / vue.esm.js'、
'@'：解決（ 'SRC'）、// @ srcディレクトリがあります別名
'のCSS'：解決（ 'SRC / CSS'）// これは効果簡単にするCSSSのSRC / CSSのパスを有する代替のためのSRC / CSSの別名である
}
}
7.2再始動プロジェクトVUE、VUEのRUNのDEVを、
8 VUE、恐ろしいです回転-swiperウィジェットアプリケーション：
のステップ：プラグインのグローバルmain.jsを導入：
NPMは--save [email protected]のインストール
VueAwesomeSwiper「VUE-恐ろしい-Swiper」からインポート
輸入"swiper / DIST / CSS / swiper.css"
Vue.use（VueAwesomeSwiper）
2.
<swiper：オプション= "swiperOption">
<！ -スライド- >
<swiper-スライド>
<IMGクラス= "swiper-IMG" SRC = "のhttp：//img1.qunarzz。 COM /鮑彪注/融合/ 1807 / A1 / 41a802abfc4f0202.jpg_750x200_9f0cf69c.jpg "ALT = "去哪网"/>
</ swiper-スライド>
<swiper-スライド>
<IMGクラス= "swiper-IMG" SRC ="のhttp： //img1.qunarzz.com/piao/fusion/1806/de/df09fa61aed2d502.jpg_750x200_67472739.jpg」ALT = "去哪网" />
</ swiper-スライド>
<！ -オプションのコントロール- >
<divのクラス= 「swiper、ページネーション」スロット= "改ページ"> </ div>
</ swiper>
9.カルーセルは、ジッタを表示されます
溶液：固定値設定素子アスペクト比：
.wrapper
オーバーフロー：隠された
幅：100％
高さ：0
パディング底：31.25パーセント//常にハイ幅、すなわち31.25パーセント
伸長：親要素の表示：フレックスレイアウト、子要素フレックス：1;最小幅： 0、 残り適応親要素の幅を示し、親要素の幅を超えません。
10. axios：クロスプラットフォームの要求を実装
ステップを：10.1 NPM axios --save //または<SCRIPT SRC = "https://unpkg.com/axios/dist/axios.min.js"> </ SCRIPT>インストール
10.2インポートからAxios「Axios」
10.3方法：.json {//アナログデータの後端を介してファイルは、内部静的index.jsonに、ファイルを受信
getHomeInfo（）{
axios.get（」./静的/モック/ index.json 「）.then（this.getHomeInfoSucc）
}、
console.log（RES）
}
}
設定で10.4>次のように設定しないindex.jsは、ローカル静的/ index.json /モックファイルに自動的にコールAPI / index.jsonインタフェースによって達成することができる
{：proxyTable
「/ API "：{
ターゲット：" HTTP：// LOCATION：8098の」、
pathRewrite：{
"^ / API "："/静的/モック"
}
}
}
11.ベター・スクロール-使用：
1.ダウンロードNPM良くスクロール：スクロール--saveベターインストール-NPMを;
2.スクロール導入ベター：輸入Bscrollを"ベター・スクロール"から;
3.カスタムラベルDOM：<DIV REF = "DIV"> </ div>
bscrollの4例：this.scroll =新しいBscroll（。この$のrefs.div） することができます。
注意：Bscrollはthis.scroll.scrollToElement（DOM）、指定された位置のDOM APIにスクロール提供。
12.これによって生成される。$参考文献循環が配列であります
。変化量の定義は、この$通過13.親コンポーネントcity.vueに、値e.target.innerTextを放出する
ことによって、親要素<V-α：文字=「 letterCities」@変更=「letterChange」> </ V- アルファ>サブアセンブリ受け入れ伝統的な値
親コンポーネントサブアセンブリは、プロセスlists.vueクロッシング値の値を渡すために
移送アセンブリすなわち間接的兄弟
14.実行の頻度は非常に速く、それによってコードの最適化を達成する、摺動しないように、すなわち、16msのは、一度実行されず、スロットル時間タイマー機能を介して達成しました
15. vuexの使用：あなたは、大規模な単一ページのアプリケーションを開発する予定がない場合は、Vuexの冗長を使用して面倒なことができます。それは確かにそうである-アプリケーションが十分に単純であれば、
あなたはVuexを使用しないでください。あなたが必要とするシンプルなグローバルイベントバスは十分です。ただし、大規模な単一ページのアプリケーションで構築する必要がある場合、あなたはより良い外部コンポーネントの状態を管理する方法を検討する可能性がある、
Vuexは自然な選択になります。
ステップ：15.1 vuexをインストール：NPM vuex --saveをインストールし、
15.2 srcフォルダ、保存処理vuexに使用されたフォルダを作成し、
店舗のフォルダ内に作成15.3 index.js;
index.jsで15.4書き込みに：
「VUE」からインポートVueの
「vuex」からインポートvuex
Vue.use（vuex ）; // Vue.use（プラグイン名）によって）そのようなvuexようなプラグインを（使用されVUEは
新しいVuex.Store倉庫エクスポートデフォルト新しいVuex.Store（{//、およびエクスポートエクスポート作成する
状態：{//ストアグローバル公開データ
市：「重慶」、都市のヘッドホーム//ショーデフォルト重慶
}、
アクション：{// changeCity = ctx.commit名前と変異に渡されたデータ値を表し、これにより、$のstore.dispatchモジュールを介して送信されるデータを受信する項目
changeCity（CTX、項目）{
ctx.commit（「changeCity」、アイテム）
}
}
//注：この$のstore.commitデータを通過された場合、それによって突然変異を介して直接処理状態の値を変更する、直接行動を必要としない
変異：{//はctx.commitによって送信されたアクションを受け入れますデータ処理、すなわち、都市等しいアイテムの内部状態を変更させ
changeCity（状態、項目）{
state.cityアイテム=;
}
}
}）
main.jsで15.5：
「./store」ストアからインポート
新しい新しいヴュー（{
EL： '#app'、
ルータ、
店舗、
コンポーネント：アプリケーション{}、
テンプレート： '</ app>の'
}）
モジュール{{この$はstore.state.city。}}で15.6を使用することができる;
15.7ストア修飾。データのこの$のstore.dispatch（「changeCity」 、項目）; changeCityの名前を配布する行為ストアの倉庫vuexに、データ項目の値がストアに渡され
、それがこの$のstore.commit（「changeCityある場合。 」直接店舗倉庫へ、アイテム）は、それによって変異を介して直接処理状態の値を変更すること、行動をvuex必要はありません
16.localStorageローカルストレージ：
defaultCity = '重慶'を聞かせて、
試してみる{//無効なユーザーがのlocalStorageを避けるために、与えられている
IF（localStorage.city）{
defaultCity = localStorage.city
}
}キャッチ（E）{}
エクスポートVuex新しい新しいデフォルト。ストア（{
状態：defaultCity、ヘッドホーム//都市を表示する、またはデフォルトがlocalStorage.city重慶であります
}）
17.キープアライブ最適化されたコード、重複したデータ収集を送るAjaxの回避、キープアライブ重複キャッシュデータ：
<=インクルード除外キープアライブ「名コンポーネント名」> //除外=「名前コンポーネント名」コンポーネントを必要としないことを意味しますキャッシュは、すなわち、ページの再読み込みに各ジャンプはライフサイクルを搭載し
、<ルータビュー/>
</キープアライブ>
つまり、キャッシュに1キープアライブタグ<ルータビュー/>外部タブを包ん（マウントは、ページの初期化に完成取り付けられた、またはライフサイクル機能を行う、現在のページに戻ってジャンプしたとき）、VUEがアクティブライフサイクルに追加
、すなわちページ{//なぜならキープアライブとライフサイクルのうちより）（活性化時の初期ロードと実行としてマウントされ、各時間ページジャンプが現在のページを返すためには、まだ実行されますが、キープアライブのようにマウントすることは実行されません
（this.lastCity！== this.city）場合は{ / 選択された都市の変更は、Ajaxが再び発生した場合/現在のページに戻ってジャンプし、そうでない場合は、Ajax起こらない
this.lastCity = this.city;
this.getHomeInfoを（）;
}
}
18. <ルータ-linkタグ= "李"：= " '/デフォルト/' + list.id"に> </ルータ・リンク> 文言がラベルLiが、むしろ、内部のテキストの変更色を表す回避<LI> </ LI>で、ページにジャンプする機能が付属しています。
「 『<ルータリンクタグ=『DIV』=』」である。> </ルーターリンクは> 戻る表す=まで
19値によってルーティングパラメータ：
{
パス：「/詳しく/：ID 」
コンポーネント：詳細
}
20.スクロールイベントVUEのページ：window.addEventListenerは（ 『スクロール』、this.headerScroll 、真の） 真追加時々イベントをトリガするためにスクロールするには、ページのスクロール距離は、常に0である
、おそらく体理由は、HTMLそこオーバーフロー：隠されたプロパティは、それを削除します。
有効（）{//ページがウィンドウがグローバルであるため、スクロール時に、他のページがトリガされ、ライフサイクルの現在の時刻コンポーネントがトリガされた表示なので、あなたは、現在のページを非表示にする必要があり、別のページを交換したりするときさ、スクロールイベントの削除
ウィンドウを.addEventListener（真の"スクロール"、this.headerScroll）
}、
}
21. A VUE再帰成分：すなわち、コンポーネントは、コンポーネント自体を呼び出し、
名前によって「detailComponent」名前、コールする<詳細成分：リスト=「パラメータ」> </コンポーネントDetail->
22部品名VUEアクション名：
（1）再帰的な要素を、タグ名<compontent名> </ compontent名>
（2）アセンブリが必要とされる必要がないときにキャッシュ<キープアライブ除外=「名前のコンポーネント名を」> <ルータビュー/> </キープアライブ>
23.現在のページの端部に転がり避け、別のページにジャンプも下である：
中router- VUE項目に> index.js：
輸出新しい新しいデフォルトルータ（{
路線：[
{
パス： '/'、
コンポーネント：ホーム
}、{
パス： '/シティ'、
コンポーネント：市
}、{
パス： '/ディテール/：ID'、
成分：ディテール、
}、
{
パス：「/写真」、
コンポーネント：Picsの
}]、
scrollBehavior（savedPosition、から、の）とき {// 現在のページの端部での圧延を避けるために、行動VUE-ルータをスクロールは、他のページにジャンプ下部にある
リターン{X ：0、Y：0}
}
}）
24 VUEアニメーションプログラムコンポーネント：
（1）新しいアニメーション要素anim.vueを作成します。<移行>の<slot> </スロット> </遷移>
（2）を内部スタイル入力し.Vを定義し、.V -leave-へ.V-enter-、アクティブ、 すべての時間のスタイル.V-リーブ・アクティブアニメーション。
（3）アセンブリの他の構成要素とアニメーションの中に導入され、その後、ラベルをラップするアニメーション要素タグにアニメーション効果を実行する必要があります。
インタフェースFBI 25 VUE項目：サーバから取得したアナログデータにすぐにJSONデータ：
手順：CONFIG-下> index.js：
DEV：{
assetsSubDirectory： '静的'、
assetsPublicPath： '/'、
proxyTable：{
"/ API"：{
ターゲット： "HTTP：// localhostの80"、//このサービスアドレスに、すなわち、送信/ APIのAJAXは、そのアドレスからデータを取得
}
}、
26 VUEパッケージのオンラインプロジェクト：コマンドラインにプロジェクトは、NPMの実行ビルドを入力して、ルートディレクトリの下に、このようなxampp->のhtdocsフォルダのようdistのファイルを、サービス上のそのファイルの内容を、生成されます。
元のリンク： https://blog.csdn.net/qq_42231156/article/details/82949939