コンテンツ
1.最初のvueプロジェクトを作成します
cmdを開き、次のコマンドを入力してプロジェクトの作成を開始します
vue init webpack [项目名称]
2.プロジェクトを開いて、実行します
1> IDEAを開き、[ファイル]--->[開く]---->プロジェクトプロジェクトのルートディレクトリを選択します
2>ターミナルに次のコマンドを入力して実行します
npm run dev
3>ブラウザに入力します:http:// localhost:8080テストページにアクセスします
3.element-uiをインストールして使用します
1>ターミナルで次のコマンドを入力して、element-uiをインストールします
npm install --save element-ui
2> node_modulesフォルダーの下のpackage-lock.jsonで、ElementUIがインストールされており、バージョンが2.15.6であることがわかります。
3>使用ElementUI
import ElementUI from 'element-ui'
Vue.use(ElementUI)
4>ボタンコントロールの追加
<el-button type="primary" v-on:click="btnClick" >小蓝宝子</el-button>
5>イベントをボタンにバインドします(ボタンをクリックしてBaiduページにジャンプします)
methods:{
btnClick:function () {
window.location.href = 'http://www.baidu.com';
}
}
6> npm run devともう一度入力して、プロジェクトを開始します
7>「リトルサファイア」のボタンがページに表示されているのがわかります
8>「LittleBlueTreasure」ボタンをクリックして、Baiduインターフェースにジャンプします
4.axiosプラグインをインストールします
(後で使用するためにのみインストールされ、ここでは詳しく説明しません)
1>次のコマンドを入力して、axiosプラグインをインストールします
npm install --save axios
2>axiosプラグインを使用する
import axios from "axios";
Vue.use(axios)