vue-cli + element-ui を使用してプロジェクトをすばやく構築し、それについて学習します

フロントエンド アーキテクチャに関しては、vue-cli + element-ui を使用してプロジェクトを構築することを学ぶ必要があります。記事の内容はコンパクトなので、根気よく勉強していただければ幸いです。

1. はじめに

vue2.0 の登場により、学習しやすく完全な API 中国語ドキュメントと豊富なエコシステムが備えられ、非常に人気のあるフロントエンド MVVM になりました。 フレームワーク、<code>vue2.0的到来，凭借这其简单易学、完善的API中文文档、丰富的生态系统，成为国内目前十分受欢迎的前端MVVM框架， 

element-ui是基于 vue2.0的 ui框架，由饿了么团队开发维护的，目前是vue的ui库中最受欢迎的一个框架

element-ui官网
vue专题网站

在vue专题中可以看到各个ui框架的受欢迎程度

二、代码操作

使用vue-cli + element-ui

element-ui は、vue2.0 に基づいて開発された ui フレームワークです。 Ele.me チームによって維持されています。現在、vue の ui ライブラリで最も人気のあるフレームワークです

vue-clielement-ui 公式 Web サイト
vue の特別 Web サイトnpm install
webpack.conf.js各 ui フレームワーク の人気度を確認できます。 vue 特別トピック内
.babelrc

2. コード操作

vue-cli + element-ui を使用するには 2 つの方法があります

オプション 1: git clone https://github.com/ElementUI/element-starter.git ①まず
を使ってプロジェクトをビルドします、
②その後、cnpm intsall下载依赖的模块（没有淘宝镜像 cnpm 可以使用npm install、
の対応するモジュールとプラグインを使用します ③npm run dev跑项目

模板的基本架构如下——和使用vue-cli 脚手架搭建的项目基本没有区别，十分干净

项目跑起来后可以看到一个简单的页面——就比使用vue-cli搭建的项目的页面多了一个element-ui按钮组件

接下来就可以使用element-uiに進み、各種ファイルのローダーを設定し、

④

に移動してプラグインを設定します

プロジェクトがまだ作成を開始していない場合は、オプション 1 を使用しないでください。プロジェクトが開始されてからしばらく経っている場合は、上記の点に従い、すべてのステップを慎重に処理する必要があります。注意しないと、エラーが報告されました。これは、element-ui が提供するテンプレートを使用することです

オプション 2:

① gitコマンド

を使用して公式テンプレートをダウンロード

(ローカル コンピューターに git がインストールされていない場合は、https://github.com/ElementUI/element-starter と入力し、緑色の [クローンまたはダウンロード] ボタンをクリックし、[ZIP のダウンロード] をクリックしてテンプレートをダウンロードします)

② プロジェクトのルートディレクトリで cnpm intsall を使用して依存モジュールをダウンロードします (cnpm は淘宝ミラーなしで使用できます

)

③ プロジェクトのルート ディレクトリで npm run dev を使用してプロジェクトを実行します

テンプレートの基本構造は次のとおりです - 基本的に

スキャフォールディングを使用して構築されたプロジェクトと何ら変わりはなく、非常にクリーンです

プロジェクト後が実行されていると、シンプルなページが表示されます。

element-ui ボタン コンポーネントが 1 つだけ多いです。 Upload/image /702/400/674/1536825402620969.png" title="1536825402620969.png" alt="vue-cli + element-ui を使用してプロジェクトをすばやく構築し、それについて学習します"/>🎜🎜それから、element-ui ライブラリを使用できます~🎜 🎜ElementUI 簡単なアプリケーションの場合は、リンクをクリックして次の記事にアクセスできます🎜🎜 vue2.0 を使用して、バックグラウンドの追加、削除、変更、管理インターフェイスをすばやく構築します🎜🎜3. その他🎜🎜パラメーターをインストールします🎜🎜1依存関係を書き込みます🎜

npm install module_name -S

npm install module_name --save

🎜2. devDependency を書き込みます🎜

npm install module_name -D

npm install module_name --save-dev

🎜3. グローバル インストール (コマンド ラインを使用)🎜

npm install module_name -g

🎜関連する推奨事項: vue-cli を使用して要素 UI コンポーネントをインポートする方法🎜🎜🎜🎜 vue + element-ui でインポートとエクスポート🎜🎜

以上がvue-cli + element-ui を使用してプロジェクトをすばやく構築し、それについて学習しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。