Vue+要素プロジェクトの構築

序文

最近、いくつかの小さな動きがありました。2つのプロジェクトを進める必要があり、フロントエンドのものをピックアップする必要があります。

環境

私の現在の環境はまだvue2なので、この開発はまだ主にvue2です。もちろん、切り替えるのは難しくありません。ここで環境を構成する必要はありません。疲れます。アイリスバージョンの問題を忘れることはできません。ある日、行ってみました。

vue-cliプロジェクトの作成

私のローカルvueバージョンはまだ2.5x
なので、プロジェクトを作成できません。vuecreateができないか、初期化されたwebpack名しかvueできません
。プロジェクトの作成についていくつか言いたいだけです。最初のnpmは実際には遅いので、使用することはお勧めしません。最初にcnpmをダウンロードすることをお勧めします。

 npm install -g cnpm --registry=https://registry.npm.taobao.org

次に、プロジェクトの作成を開始するのに適した場所を見つけます。

ここでの言葉はまだ古いルールです。最初のいくつかのはいの後、最初にルーティングを選択し、次に「いいえ」と「
ここに画像の説明を挿入
その他のいいえ」の後にプロジェクトを入力することをお勧めします
ここに画像の説明を挿入
。ここでは、ルーティングコードを生成するのに役立ちますが、それを実行します。ここに小さな変身。

後付け1

プロジェクトの構造。
ここに画像の説明を挿入

レトロフィットII

ここに画像の説明を挿入

後付け3

アイコンを変更
ここに画像の説明を挿入

テスト

効果がわかります。
ここに画像の説明を挿入
この時点で、基本的なプロジェクトの変革は完了です。
次に、要素uiコンポーネントライブラリをインポートします。(実際、現時点では、前回作成したプロジェクトの依存関係を直接取得することを選択できます)

使用要素

まず、ダウンロードする必要があります

cnpm i element-ui -S

この場合、実際に-gを追加して、グローバルにダウンロードすることを選択できます。

次に、コンポーネントをインポートします


/*引入element组件*/
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

ここに画像の説明を挿入

ローダーをインストールします

これは主に要素uiをロードするcssです

cnpm install sass-loader node-sass --save-dev


テスト

では、次にテストしましょう。
ボタンテストをコンポーネントに導入します。
ここに画像の説明を挿入

ここに画像の説明を挿入

要約する

プロセスをもう一度思い出してから、コンポーネントに移動しました。
今回はもっと時間がありますが、結局のところ、私は初心者ではないので、もっと速いはずです。

おすすめ

転載: blog.csdn.net/FUTEROX/article/details/123629133