vue コンポーネントと要素コンポーネントをインストールする方法

今回は、vue および element コンポーネントのインストール方法について説明します。vue および element コンポーネントをインストールする際の 注意事項 については、次のとおりです。

1. 新しい vue プロジェクトを作成します

1. まず、nodejs をダウンロードする必要があります。インストール後、コマンド ウィンドウを開いて、npm パッケージ管理ツールを使用します

npmはnodeに統合されているので、npm-vと直接入力するとnpmのバージョン情報が表示されます

2. 一部の npm リソースはブロックされているか、外部リソースであるため、npm を使用して依存パッケージをインストールすると失敗することがよくあります。そのため、npm の国内ミラーである cnpm も必要です。

3. コマンドラインに「npm install -g」と入力します。 cnpm--registry=http://registry.npm.taabao.org をクリックし、インストールが完了するまで待ちます。cnpm を使用して依存パッケージをインストールできます。ここでは、場合によっては npm を使用してインストールするのが最善であると述べます。 cnpm はすべての依存関係をダウンロードしません。npm のダウンロードが遅い場合は、cnpm を試して依存パッケージをインストールしてください。

4. vue-cli 足場構築ツールをインストールします。コマンドラインでコマンド npm install -g vue-cli を実行し、インストールが完了するまで待ちます。

5. vue-cli を使用してプロジェクトをビルドします。新しいプロジェクトを保存するディレクトリを選択してください

6. デスクトップ ディレクトリで、コマンド ラインでコマンド vue init webpack firstVue を実行します。このコマンドについて説明します。このコマンドは、webpack がビルド ツールであるプロジェクトを初期化することを意味します。つまり、プロジェクト全体が webpack に基づいています。ここで、 firstVue はプロジェクト フォルダー全体の名前です。

7. 初期化コマンドを実行すると、プロジェクト名、説明、作成者、その他の情報などのいくつかの基本オプションを入力するよう求められます。フィールドに入力しない場合は、Enter キーを押してデフォルトに戻します。

8. firstVue フォルダーを開きます。プロジェクト ファイルは次のとおりです。

9. npm install コマンドを使用して依存関係パッケージをインストールします (新しく作成したプロジェクト フォルダーにあることを忘れないでください)

10. 依存関係をインストールした後、npm run dev を通じてプロジェクトを実行します。デフォルトのポートは通常 8080 です。ブラウザを開いて「localhost:8080」と入力します

。 11. ポート 8080 が占有されている場合は、設定ファイル

config/index.jsを変更する必要があります

2番目に、Elementを紹介します

1. 現在のディレクトリで次を実行します: npm i element-ui -S

2. src/main.jsにコード(赤色)を追加します

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'	//手动变红
import '../node_modules/element-ui/lib/theme-chalk/index.css'	//手动变红
//具体路径有的不同，vue运行报错请看第五点
Vue.config.productionTip = false
/* eslint-disable no-new */
Vue.use(ElementUI)	//手动变红
new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App }
})

3. 次に、次のように .vue ファイルで直接使用できます: src/components/Hello.vue にいくつかの変更を加えます

<template> 
 <p class="hello"> 
 <h1>{{ msg }}</h1> 
 <h2>Essential Links</h2> 
 <el-button>默认按钮</el-button> 
 <el-button type="primary">主要按钮</el-button> 
 <el-button type="text">文字按钮</el-button> 
 </p> 
</template> 
 
<script> 
export default { 
 name: 'hello', 
 data () { 
 return { 
 msg: 'Welcome to Your Vue.js App' 
 } 
 } 
} 
</script> 
 
<!-- Add "scoped" attribute to limit CSS to this component only --> 
<style scoped> 
h1, h2 { 
 font-weight: normal; 
} 
ul { 
 list-style-type: none; 
 padding: 0; 
} 
li { 
 display: inline-block; 
 margin: 0 10px; 
} 
a { 
 color: #42b983; 
} 
</style>

この記事の事例を読んだ後は、この方法を習得したと思います。刺激的なことについては、php 中国語のその他の関連記事をオンラインでご覧ください。

推奨読書:

JS で WeChat ID のランダムな切り替えを実装する方法

vue.js 下部のナビゲーション バーのサブルートが表示されない場合の対処方法

ダウンロード方法セクション内の Nginx 構成ファイル

以上がvue コンポーネントと要素コンポーネントをインストールする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。