IDEA builds the first simple ElementUI+Vue project (Demo)

content

1. Create the first vue project

2. Open the project and run

3. Install and use element-ui

4. Install the axios plugin

---

1. Create the first vue project

        Open cmd and enter the following command to start creating the project

vue init webpack [项目名称]

2. Open the project and run

1>Open IDEA and select File--->Open---->Select the root directory of the project project

2> Enter the following command in the terminal to execute

npm run dev

3> Enter in the browser: http://localhost:8080 to access the test page

3. Install and use element-ui

1> Enter the following command in the terminal to install element-ui

npm install --save element-ui

2> In the package-lock.json under the node_modules folder, you can see that ElementUI has been installed, and the version is 2.15.6

 3> Use Element UI

import ElementUI from 'element-ui'
Vue.use(ElementUI)

4>Add button control

<el-button type="primary" v-on:click="btnClick" >小蓝宝子</el-button>

5> Bind events to the button (click the button to jump to the Baidu page)

methods:{
    btnClick:function () {
      window.location.href = 'http://www.baidu.com';
    }
  }

6> Enter npm run dev again to start the project

7> We can see that the button of "Little Sapphire" has appeared on the page

8> Click the button "Little Blue Treasure" to jump to the Baidu interface

4. Install the axios plugin

(Only installed for subsequent use, not detailed here)

1> Enter the following command to install the axios plugin

 npm install --save axios

2> Use axios plugin

import axios from "axios";
Vue.use(axios)