Q1: インストールタイムアウト (インストールタイムアウト)
計画は次のとおりです。
cnpm : 国内对npm的镜像版本
/*
cnpm website: https://npm.taobao.org/
*/
npm install -g cnpm --registry=https://registry.npm.taobao.org
// cnpm 的大多命令跟 npm 的是一致的,比如安装,卸载这些
yarn 和 npm 改源大法
//使用 nrm 模块 : www.npmjs.com/package/nrm
npm config : npm config set registry https://registry.npm.taobao.org
yarn config : yarn config set registry https://registry.npm.taobao.
Q2: コンパイルが必要なパッケージをインストールします。Python がインストールされていない、ビルドが失敗するなどのメッセージが表示されます。
一部の npm パッケージのインストールにはコンパイル環境が必要なため、mac と Linux の両方で問題ありません。それらのほとんどは完了しています。Windows ユーザーは Visual Studio と Python 2+ のいくつかのライブラリに依存しています。Windows 友達は全員、windows-build-tools python 2 をインストールします。バツ
Q3: 'xxModule' が見つかりません - 一部の依存関係またはモジュールが見つかりません
この場合、通常、エラー メッセージで情報をスローしたパッケージがわかります。通常は、このモジュールをアンインストールし、インストールして、再インストールすることができます。
Q4：データ関数はオブジェクトを返さなければなりません
問題は、次のように、vue インスタンス内で単一コンポーネントのデータがオブジェクトを返さなければならないことです。
export default {
name: 'page-router-view',
data () {
return {
tabs: [
{
title: '财务信息',
url: '/userinfo'
},
{
title: '帐号信息',
url: '/userinfo/base'
}
]
}
}
}
なぜデータ オブジェクトを返すのか? 公式の説明は次のとおりです: コンポーネントは複数のインスタンスの作成に使用される可能性があるため、データは初期データ オブジェクトを返す関数として宣言する必要があります。データが純粋なオブジェクトのままであれば、すべてのインスタンスが同じデータ オブジェクトへの参照を共有することになります。つまり、コンポーネントを再利用すると、データが同時に同じ場所を指すことができなくなり、本体全体に影響を与える壊れた問題が発生する...
Q5: コンポーネントのネイティブ コントロールにイベントを追加しましたが、なぜ有効にならないのですか。
<!--比如用了第三方框架,或者一些封装的内置组件; 然后想绑定事件-->
<!--// 错误例子1-->
<el-input placeholder="请输入特定消费金额 " @mouseover="test()"></el-input>
<!--// 错误例子2-->
<router-link :to="item.menuUrl" @click="toggleName=''">
<i :class="['fzicon',item.menuIcon]"></i>
<span>{
{
item.menuName}}</span>
</router-link>
<!--上面的两个例子都没法触发事件!!!-->
<!--究其原因,少了一个修饰符 .native-->
<router-link :to="item.menuUrl" @click.native="toggleName=''">
<i :class="['fzicon',item.menuIcon]"></i>
<span>{
{
item.menuName}}</span>
</router-link>
<!--明明官方文档有的,一堆人不愿意去看,,Fuck-->
<!--https://cn.vuejs.org/v2/guide/components.html#给组件绑定原生事件-->
Q6: axios を使用していますが、IE ブラウザがそれを認識しないのはなぜですか (IE9+)
那是因为 IE 整个家族都不支持 promise, 解决方案:
npm install es6-promise
// 在 main.js 引入即可
// ES6的polyfill
require("es6-promise").polyfill();
Q7: 関数内で this.xxx= を使用したのに、「Cannot set property 'xxx' of unknown」がスローされるのはなぜですか?
これもまたルーチンです...これは現在実行中のコンテキストにバインドされています...
一般に、axios または他の Promise、または setInterval を使用する場合、これらはデフォルトで最も外側のグローバル フックを指します。
簡単に言うと、「最も外側のコンテキストはウィンドウで、vue の内側はインスタンスではなく Vue オブジェクトです。」;
解決：
一時保存方法: 関数の最初に this をキャッシュし、that = this; (es6 にする、es5 は var を使用する)
アロー関数: コンテキストを現在の実行領域に強制的に関連付けます。
Q8: これらの記述方法を使用した Vue チュートリアルをいくつか見たのですが、これはどういう意味ですか @click.prevent,v-demo.ab;
これら 2 つの例を見てみましょう。
@click.prevent: イベント + 修飾子。この機能はクリックしますが、デフォルトの動作を防止します。
v-demo.ab: カスタム コマンド + 修飾子。特定のコマンドによって異なります。ほとんどの修飾子は、イベントのバブリングの防止、デフォルトの動作の防止、ネイティブ コントロールへのアクセス、キーボードの組み込みなど、正確な拡張機能をイベントに追加するために使用されます。ショートカットなど。
モディファイアをカスタマイズできますか? それも可能です。キー値修飾子のエイリアスは、グローバル config.keyCodes オブジェクトを通じてカスタマイズできます。
Q9: インポートした小さな画像が data:image/png;base64xxxxxxxx としてレンダリングされるのはなぜですか?
これは、Webpack の対応するプラグインによって処理され、K より小さい画像 (指定された形式) はレンダリングのために直接 Base64 形式に変換されます。
webpack.base.conf.js のルールで URL ローダーを具体的に設定します。これの利点は、ネットワーク速度が良くない場合、コンテンツがコンテンツより先に読み込まれ、HTTP リクエストの数が減少して、 Webサイトのサーバーに負担がかかります。
Q10：コンポーネントテンプレートには、ルート要素が 1 つだけ含まれている必要があります。複数の要素に v-if を使用している場合は、xxxxx
一般に、単一コンポーネントによってレンダリングされる DOM 領域にはルート要素が必要であり、兄弟要素は表示できません。v-if および v-else-if 命令を使用して、他の要素の共存を制御できます。
もう 1 つの簡単な説明は、一意の親クラスであるラッパーが存在するということです。たとえば、div (ブロックを含む親) は内部にいくつでも兄弟やネストを含めることができますが、最も外側の要素は同じレベルに表示することはできません。
Q11: クロスドメインの問題を解決する方法! たとえば、要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません。
この種の問題はよくあることなので、詳しくは説明しません...一般的に話しましょう。
1: CORS、フロントエンドとバックエンドはそれに応じて構成する必要があります、IE10+
2: nginx リバースプロキシ、これで最後 <-- これはオンライン環境で使用できます
たとえば、オフライン開発モードでは、vue-cli を使用する場合、webpack には proxyTable のようなものが導入されており、インターフェイスのリバース プロキシとしても使用できます。
// 在 config 目录下的index.js
proxyTable: {
"/bp-api": {
target: "http://new.d.st.cn",
changeOrigin: true,
// pathRewrite: {
// "^/bp-api": "/"
// }
}
}
// target : 就是 api 的代理的实际路径
// changeOrigin: 就是是变源,必须是...
// pathRewrite : 就是路径重定向,一看就知道
もちろん、依然として強力な JSONP メソッドも存在します! ただし、JSONP メソッドには多くの制限があり、一部の特殊な情報の取得に適しています。
Q12: 走査する必要がある配列値が更新され、値が割り当てられているのに、ビューが更新されないのはなぜですか?
公式ドキュメントでも、変更された一部のメソッドのみが元のメソッドと同じ使用姿勢を提供します (ただし、ビューの更新をトリガーすることができます)。
一般に、最も一般的に使用される方法 (魔法の変更方法を除く) は、 this.$set(obj, item, value); を使用することです。
Q13: コンポーネント間のスタイルを継承またはオーバーライドできないのはなぜですか?
シングルコンポーネント開発モードでは、CSS モジュール化機能がオンになっているかどうかを確認してください! つまり、スコープ化されています (vue-cli で設定されており、この属性が追加されている限り自動的に有効になります)。
<style lang="scss" scoped></style>
なぜ継承したりオーバーライドしたりできないのでしょうか?それは、各クラス、ID、さらにはラベルが CSS の後に自動的にハッシュを追加するからです! 例:
// 写的时候是这个
.trangle{
}
// 编译过后,加上了 hash
.trangle[data-v-1ec35ffc]{
}
これらは css-loader で設定されます。
Q14: ルーティング モードを履歴に変更した後、ホームページを初めて起動したときはエラーが報告されませんが、アクセス ルートを更新するとエラーが報告されます。
クエリのメイン ページは、対応するサーバー用に設定する必要があります。これは、メイン ルート エントリのガイドとしても考慮できます。
公式文書もありますが、文書を読むのが好きではなく、常に当事者になりたがる人々が常にいます。
Q15: ページをインターセプトするか、ページが受信される前に何かをしたいのですが、それは可能ですか?
そう、各種ルーター用のフックです!! もちろんスクロール位置を記憶することも可能です、詳しくは公式サイトのドキュメントをご確認ください。
Q16：TypeError: xxx は関数ではありません
こういう問題は明らかに書き方の問題です…頭使えますか!!
Q17：Uncaught ReferenceError: xxx が定義されていません
インスタンス内のデータに対応する変数が宣言されていません。モジュールをインポートしてこのエラーが報告された場合は、エクスポートが正しく記述されていない可能性があります。
Q18：レンダリング関数のエラー：「タイプエラー：未定義のプロパティ 'xxx' を読み取れません」
これらの問題のほとんどは、echart を導入してライフサイクルをよく理解してから初期化するなど、初期化の姿勢が間違っていることに起因します。
Vue コンポーネントはこれを行うことがあります (ネストされたコンポーネントまたは props 転送の初期化)...これは基本的な問題でもあります
Q19：予期しないトークン: 演算子 xxxxx
お兄さん、これは一見文法的な間違いですが、基本的には記号の問題で、一般的にはエラーが報告される際にどの行やコンポーネントが示されるかです。
Q20: npm run build の直後にアクセスできません。
上司! アクセスするには少なくともローカル サーバーをセットアップする必要がありますよね?
Q21: CSSbackground で画像パッケージ化を導入した後、アクセスパスが間違っています
画像はパッケージ化後のルート ディレクトリにあるため、相対パスを使用する場合はエラーを報告する必要があります。
Webpack 設定ファイルの static を魔法のように ./static に変更できますが、お勧めできません。画像などをassetsディレクトリに放り込んで相対パスにするとパッケージ化後は正常になります。
Q22: モジュールをインストールすると、コマンド ウィンドウにサポートされていないプラットフォーム xxx が出力されます。
一般に、ノードのバージョンに互換性がない場合と、システムに互換性がない場合の 2 つの場合があります。
解決策: インストールしないか、インストール要件を満たします。
Q23: 予期せぬタブの特徴
一般に、スキャフォールディングで初期化するときに eslint をオンにします。ルールに従うかルールを変更するか、webpack で eslint 検出を直接オフにします。
Q24：コンポーネントのマウントに失敗しました: テンプレートまたはレンダリング関数が定義されていません
コンポーネントのマウントに失敗しました。問題はいくつかあります
コンポーネントが正しく導入されていない、
マウント ポイントの順序が間違っている、自分でトラブルシューティングを行う
Q25：不明なカスタム要素: - コンポーネントは正しく登録されましたか?
コンポーネントが正しく導入されていないか、正しく使用されていません。順番に確認してください。
対応するコンポーネントをインポート
する コンポーネント内で
宣言する dom領域でタグを宣言する
Q26: アクシオスの投稿リクエストがバックグラウンドで受け付けられない！
Axios はデフォルトで json 形式で送信し、バックグラウンドがそれをサポートしているかどうかを確認します。従来の形式のシリアル化しか受け入れられない場合は、エスケープ メソッドを自分で記述する必要があります... もちろん、より問題のない解決策として、小さなモジュール qs 。
npm install qs -S
// 然后在对应的地方转就行了..单一请求也行,拦截器也行...我是写在拦截器的.
// 具体可以看看我 axios 封装那篇文章
//POST传参序列化(添加请求拦截器)
Axios.interceptors.request.use(
config => {
// 在发送请求之前做某件事
if (
config.method === "post"
) {
// 序列化
config.data = qs.stringify(config.data); // ***** 这里转义
}
// 若是有做鉴权token , 就给头部带上token
if (localStorage.token) {
config.headers.Authorization = localStorage.token;
}
return config;
},
error => {
Message({
// 饿了么的消息弹窗组件,类似toast
showClose: true,
message: error,
type: "error.data.error.message"
});
return Promise.reject(error.data.error.message);
}
);
Q27：無効なプロパティ: プロパティ「xxx」の型チェックに失敗しました。ブール値が予期されましたが、文字列を取得しました。
この種の問題は通常、コンポーネント内の props タイプが range タイプを受け入れるように設定されているが、渡した値が必要なタイプではないことが原因です。コードをより厳密に記述してください。OK?
Q28: DOM 領域のバインド命令にフィルターを使用できますか?
// 不行,看下面的错误例子
<li v-for="(item,index) in range | sortByDesc | spliceText">{
{
item}}</li>
// `vue2+`的指令只能用语 mustache`{
{}}` , 正确姿势如下:
<span>{
{
message | capitalize }}</span>
Q29: […Array],…mapState,[SOME_MUTATION] (state) {},increment ({ commit }) {} なんだこの書き方は！
ES6+ (ES2015) の基本を学習しました。上記は配列の構造化、オブジェクトの構造化、オブジェクト スタイル関数、オブジェクトの構造化、代入の受け渡しの順です。
Q30: Vue Web サイトの UC アクセスが空白になったり、フレックス レイアウトが乱れたりするのはなぜですか。
おいで、おいで、角を曲がって... UC はモバイル界の IE として知られていますが、このタイトルは無駄なものではありません。フレックスボックスのレイアウトが乱雑なのは、通常、互換性計画を書き留めていないことが原因です。つまり、さまざまなプレフィックスや複合属性の分割が含まれています。
UC アクセスが空白の場合、確実に発生する状況があります。つまり、ES6 のコードの劣化が十分ではありません。その他の状況は、ルーティング設定の問題である可能性があります (自分で除外する必要があります)。現在の開発では、インポートすることをお勧めします。オンデマンドで、パッケージング量を減らすために、 babel-preset-env を使用して制御します。
しかし、これを行うと、一部のカーネルが古くなります...ふふ...さようなら。したがって、コードを完全に ES5 にすることが最善です!! 一部の機能はランダムに使用できず、ES6 プロキシなどの対応するポリフィルがないことに注意してください。
Q31：これ。セット∣これ。セット | これ。set ∣ th hi s . xxx この $ は何を意味しますか? jQuery からのものですか?競合しますか?
もう少し詳しく見てみましょう。
Vueと jQuery と jQueryJavaScript や java と同様に、jQuery とは何の関係もありません。VueはVueの組み込み関数の一部
をカプセル化してから、それらをエクスポートして Vue の組み込み関数の一部をカプセル化してから、それらをvueのいくつかの組み込み関数をカプセル化します。次に、エクスポートが始まります... これは明らかに jQuery の特許ではありません;
jQuery の $ はセレクターです!! DOM 領域を取得します... 2 つの関数は完全に矛盾しています。
Q32：「クリック」のイベントハンドラエラー：「xxx」
この問題のほとんどは、作成したコードが原因で発生します。イベントはトリガーされますが、コンポーネント内に対応する実装または変数がないため、イベント エラーがスローされます。
解決策: エラーを観察し、ゆっくりとトラブルシューティングを行ってください。
Q33: コンポーネント間の通信にはどのような種類がありますか?
基本的に最も一般的に使用されるものは次のとおりです。
父から息子への受け渡し:
息子から父への小道具:
ブラザー通信の発行: イベントバス: 情報転送の仲介として機能する中間コンポーネントを見つけるだけです
vuex: 情報ツリー
Q34: vuex ユーザー情報をブラウザ (sessionStorage または localStorage) に保存する必要があるのはなぜですか?
vuex ストアは更新できないため、ブラウザのキャッシュに保存され、ユーザーが更新すると値が再度取得されます。
Q35: 「Vue + Vue Router + Vuex」または「express + vue + mongodb」について学べるプロジェクトはありますか?
Github では多くの検索が行われており、これらの質問をする人は頭を使っています。
Q36: nginx をオンラインで使用する場合、どのように導入すればよいですか? リバース プロキシなども必要です。
1. ノード側のサービス ポートをリバース プロキシとしてサーバーのポート 80 に配置します (ここでは、デモンストレーションのためにポート 3000 を使用します)
#先定义一个website变量，方便管理以后端口的变更，不会影响到后续的80端口其他的操作
upstream website{
server 127.0.0.1:3000;
}
server {
listen 80;
#业户逻辑... ...
####
location / {
proxy_pass http://website;
proxy_redirect default ;
}
####
}
Q37: 「Vue は知っていますが、jQuery やネイティブ JS を学ぶ必要がありますか?」
jQuery は今でも多くの企業で使用されており、ソース コードから学ぶべきことはたくさんあります。ネイティブ js が基盤であり、どのフロントエンド フレームワークであっても、最終的には js によって実装されます。強固な基盤があってこそ、もっと深く学びましょう... フレームワークは開発をスピードアップし、
効率を向上させるだけですが、この業界での長期的な足場の基礎ではありません。
フロントエンド担当者には幅だけでなく深さも必要です... これだけはどうすればもっと先に進むことができますか...
Q38: npm run dev がポート エラーを報告します! エラー: listen EADDRINUSE :::8080
Webpack を使用してスキャフォールディングを自分で構築する場合は説明する必要はありません。Vue-cli での Webpack 設定: config/index.js
dev: {
env: require("./dev.env"),
port: 8080, // 这里这里,若是这个端口已经给系统的其他程序占用了.改我改我!!!!!!
autoOpenBrowser: true,
assetsSubDirectory: "static",
assetsPublicPath: "/",
proxyTable: {
"/bp-api": {
target: "http://new.d.st.cn",
changeOrigin: true,
// pathRewrite: {
// "^/bp-api": "/"
// }
}
},
Q39: v-if をいつ使用するか、v-show を使用するか!
まず、この 2 つの主要な違いについて話しましょう。
v-if: DOM 領域は生成されず、ドキュメントは挿入されません...条件が満たされると動的にページに挿入されます! 一部の配列オブジェクトまたは走査する必要のある値については、これが最適ですこのコントロールを使用するには、トラバーサルを処理する前に値が取得されるまで待機します。そうでない場合、操作が速すぎる場合は、データがまだ要求されていないなどのエラーが報告されます。 v-show: DOM
領域コンポーネントのレンダリングと同時にレンダリングされますが、CSS を使用して非表示にしているだけです。ドロップダウン メニューや折りたたみメニューについては、基本的にデータはあまり変更されません。これを使用するのが最も適しています...そして、それを改善できます。ユーザー エクスペリエンスでは、ページの再描画は行われないため、DOM 操作によって再描画が行われます。
つまり、DOM 構造があまり変わらない場合は v-show を使用し、データを大幅に変更する必要がある場合やレイアウトを変更する必要がある場合は v-if を使用します。
Q40:html5のタグとは何ですか？
ご想像のとおり、html5 タグには実際にそのようなタグがありますが、Vue のテンプレートは少し異なり、ブラウザーの解析用ではありません。
これは、ループの作成と判断を容易にするために使用される一時的なラベルとして理解できます。
最終的にテンプレートはブラウザ ページに解析されず、Vue 解析プロセス中にラッピング レイヤーとして機能するだけです! 最終的に表示されるのは、内部処理された結合された DOM 構造です。
Q41：スコープ付きスロットの「scope」属性…。2.5 以降は「slot-scope」に置き換えられました
この問題は、古いプロジェクトが vue2.5+ にアップグレードされた場合にのみ発生し、スコープを今すぐスロット スコープに置き換える必要があるというプロンプトが表示されますが、スコープは一時的に使用でき、将来は削除されます。
Q42：Uncaught ReferenceError : Vue が定義されていません!
順番に除外します。
Vue は正しくインポートされていますか?
Vue は正しくインスタンス化されていますか?
Vue で使用される姿勢は正しいですか (たとえば、Vue 変数を直接設定しています!!! たまたま未定義であるだけです。具体的な問題を分析しましょう)
Q43：UglifyJsからのstatic/js/xxxxxxx.jsのエラー
この問題が発生する状況の 1 つは、導入した js が圧縮バージョンの js (xxx.min.js) に直接インポートされ、Webpack で UglifyJs (JS を圧縮する) が有効になり、二重圧縮が有効になっている場合であることはわかっています。ほとんどの場合、それは間違っています!!
解決策: 標準の非縮小 JS を導入する
Q44: props は (v-bind) を使用せずに値を渡すことができますか?
はい、ただし、デフォルトで渡される型は文字列に解析されます! 他の型を渡したい場合でも、バインディングはバインディングのままです。
Q45：Uncaught TypeError : getter しか持たないプロパティ xxx を設定できません
問題は、操作したいプロパティではゲッターのみが許可され、セッターは許可されないことです。
解決策? 他人のものを使用する場合は、他人のルーチンに従わなければなりません。そうでない場合は、自分で行うしかありません。
Q46: 単一コンポーネント内の「@/components/layout/xxx」からのインポート xxx の @ は何ですか?
これは webpack についての知識です。見かけたら教えてください... webpack はエイリアス (つまり、パスのエイリアス) を設定できます。これは、Linux または Mac を触ったことがある人なら誰でも知っています。
上記と同じです。独自の足場を構築できるのであれば、私が言う必要はありません... vue-cli を見てください。
ファイル名: build -> webpack.base.conf.js
resolve: {
extensions: [".js", ".vue", ".json"], // 可以导入的时候忽略的拓展名范围
alias: {
vue$: "vue/dist/vue.esm.js",
"@": resolve("src"), // 这里就是别名了,比如@就代表直接从/src 下开始找起!!!
"~": resolve("src/components")
}
},
Q47: SCSS(SASS)以下ならスタイラスペンの方が良いですよ！
3 つはいずれもプリプロセッサであり、
scss が最も古くから存在し、より多くの機能を実行できますが、通常の入れ子記述方法、継承、mixin であれば、これら 3 つはほぼ同じです。他の 2 つは基本的に同じです。ただし、記述にいくつかの違いがあります。
scss: css のように書かれ、sass と整列
: 実際には scss ですが、別の方法で書かれています... インデントに依存することが少なくなります :
基本的に css と整列します
スタイラス: 同じです、インデントに依存します... pug と同じです (Jade ）
使用環境の違い：
scssはrubyまたはnode-sassでコンパイルでき、
lessはless.jsまたは対応するローダーで解析でき、
stylusはローダーの助けを借りてのみ解析でき、その外観はノードに基づいています。
デカップリングとプラグインに特化した新星も登場!!! それがポストプロセッサであるPostCSSです! 興味のある方はご自身で勉強してみてください。プラグインの助け！
Q48：x エラーでコンパイルに失敗しました: この依存関係は見つかりませんでした。
コンパイル エラー。対応する依存関係が見つかりませんでした。解決策は次のとおりです。
対応するモジュールが存在しないことがわかっている場合は、直接インストールしてください。インストールした大きなモジュール (axios など) 内のサブモジュール (依存パッケージ) に問題がある場合は、大きなモジュール全体をアンインストールして再インストールしてください。役に立たないかもしれません！
Q49：SyntaxError: 予期しない識別子です。
構文エラー。エラー メッセージを参照して、トラブルシューティングのための対応するページを見つけてください。
Q50: npm または Yarn のインストール依存関係によってロック ファイルが生成されるのはなぜですか?また、その用途は何ですか。
ロック ファイルの機能はバージョン番号を統一することであり、これはチームのコラボレーションに非常に役立ちます。
ロックがない場合は、package.json の ^, ~ に従ってください。
異なる人が異なる時期にインストールしたバージョン番号は、必ずしも同じであるとは限りません。
一部のパッケージには重大な変更 (破壊的更新) が含まれており、開発をスムーズに進めることが困難になります。
Q51: コンポーネントはキャッシュできますか?
はい、キープアライブを使用します。
しかし、コードがあります... 大量のメモリを消費します... そこで、何も考えずにすべてのコンポーネントをキャッシュします!!! パフォーマンスが向上することは言うまでもありません... 数回切り替えると、一部のハードウェアがそれを保持できなくなります、ブラウザがクラッシュまたはフリーズします...
したがって、キープアライブは通常、一部のリスト ページをキャッシュし、あまり多くの操作は行われません。それ以上は結果セットの置き換えだけです...ルーティング コンポーネントのメタにフラグ ビットを追加し、v-if と組み合わせて、オンデマンドでキャッシュを追加します。わかりました。
Q52: package.json の依存関係と devDependency の違い!
実際、厳密でない場合は特に違いはありませんが、厳密な場合は公式の了解に従い、厳密な場合はその通りです。
dependency : vue、vue-router など、オンラインまたはビジネスでアクセスできるコア コード モジュールを格納します。
devDependency: 開発モードで依存される開発モジュールは、コードを解析してコードをエスケープするためにのみ使用できますが、運用環境に追加のコードを生成しません。たとえば、対応する依存関係に babel-core パッケージをインストールする方法は?
npm install --save xxxx // dependencies
npm install --save-dev xxxx // devDependencies
//也能用简易的写法(i:install,-S:save,-D:save-dev)
npm i -S xxxx // npm install --save xxxx
npm i -D xxxx // npm install --save-dev xxxx
Q53: chromedriver のインストール時にエラーが報告される!! 姿勢は正しい npm i -D chromedriver
そうですね、素晴らしい GFW... 解決策: インストールには国内のソースを指定するだけです。
npm install --save-dev chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/di
Q54: Vue、React、Angular のどれを学ぶのが良いですか? どの仕事が見つけやすいですか?
Vue は進歩的な開発であり、従来の開発から MVVM モデルに移行する人にとって、Vue は簡単に始めることができ、学習コストも比較的低くなります。
しっかりした基礎と勤勉な精神を持っている場合は、NG5 または反応 16 を選択できます。
NG5 では、typescript と rxjs を学習する必要があり、デコレーターやバックエンド インジェクションの概念など、多くの新しいものも使用します。ng には独自の MVVM プロセスのセットがあります。
Vue と React のコアはビューだけなので、好みに合わせて選択できます
Reactの書き方はjsxと同様に関数型記述が多いですが、公式のものはflowがあり、もちろんtsでも使えます、あまり触ったことがなかったので…勉強になりました料金;
どちらが仕事を見つけやすいかについては!!! 教えてください...1 つのフレームワークしか知らない場合、それは適格なフロントエンドとは言えません。
求められるのは現場力と解決力!!! 技術と給料は比例する!!
容姿や経歴、学歴、雄弁さなどによって加点されることもありますが、これらの条件を考慮する前にこれらの条件の基礎を身につけておく必要があります!!!
Q55: 追加と編集を同時に行う必要がある複雑なコンポーネントがありますが、フィールドを変更しないようにするにはどうすればよいですか?
フィールドが変更されないことはどのように理解できますか? つまり、追加と編集は同時にデータのコピーを共有します。
1 つは、ルートが変更され、コンポーネントは同じようにレンダリングされますが (再レンダリングやコンポーネントの破壊は発生しません!)、機能は異なります (新規およびコンパイル済み)。
たとえば、編集から追加に切り替える場合、データは空白で割り当てられておらず、値が割り当てられるまで待機している必要があります。
現時点では、特に適したものがあります。それは immutable-js です。
これはデータの一意性をシミュレートできます! または不変性と呼ばれます!
Q56: 「最初の画面の読み込みが遅い！！なぜ壊れるのか！パッケージファイルが大きい」
順番に除外して確認します。
jquey などのサードパーティ ライブラリの使用を削減します。これは削除可能です。DOM 操作はめったに使用されず、開発には基本的にネイティブ ライブラリで十分です。
モーメントが導入された場合、webpack は国際化された言語パッケージを除外します。
Webpack は通常、js と css を圧縮しますが、努力すれば DLL をインポートすることもできます。
ルーティング コンポーネントは遅延読み込みを使用します。
ルーティングトランジションとロード待機エフェクトを追加しても、根本的な原因は解決されないかもしれませんが、少なくとも待機が少しは快適になりますよね!!!
全体として、梱包後のサイズは一般的にそれほど大きくありません。
しかし、より高速にしたい場合は、サーバーサイド レンダリング (SSR) のみを使用することができ、ブラウザーがテンプレートや命令を解析できなくなる可能性があります。
HTMLを直接返す…SEOにも使える…
Q57: Vue SPA を最適化 (SEO) することができません! 解決策はありますか?
はい、SSR (サーバー側レンダリングでニーズを満たすことができます)。リクエストは処理された HTML として返されるためです。また、現在では、Nuxt.js のような vue 用の人気のあるサーバー側開発フレームワークが存在します。
Q58: Vue はハイブリッド アプリを作成できますか?
もちろん、両方向でも可能です。
コドルバ + ネイティブスクリプト
Weex
Q59: Vue はデスクトップ上で作成できますか?
もちろん、electronとnode-webkit(nw)もありますが、私はelectronしか知りません。
Electron
Electron-vue: Electron 用の Vue-cli スキャフォールディング テンプレート
Q60: Vue 開発の場合、プロジェクトには jQuery が引き続き必要ですか?
ケースごとに話し合う:
開発を簡素化するために Vue を導入しただけの古いプロジェクトであれば、まだ使用できます...
プロジェクトをリファクタリングしますか? または新しいプロジェクトを立ち上げることは、実際には必要ありません。開発のアイデアが異なります。以前は使用していた多くの操作use DOM は基本的にデータ駆動型になりました。少数の必要な DOM 操作をネイティブに実行できます。パッケージ サイズも小さく、速度も速いので、ぜひ試してみてください。
この記事は以下から転載されています: JS Daily Question
WeChat 公開アカウント: JS Daily Question