IDEA搭建第一个简单的ElementUI+Vue项目（Demo）

目录

1、创建第一个vue项目

2、打开工程并运行

3、安装并使用element-ui

4、安装axios插件

---

1、创建第一个vue项目

        打开cmd输入如下命令开始创建项目

vue init webpack [项目名称]

2、打开工程并运行

1>开启IDEA选择File--->Open---->选择项目工程的根目录

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>添加button控件

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

5>给按钮绑定事件（单击按钮跳转到百度页面）

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

6>再次输入 npm run dev 启动项目

7>我们可以看到“小蓝宝子”的按钮已经出现在页面上了

8>单击按钮“小蓝宝子”即可跳转到百度界面

4、安装axios插件

（仅安装供后续使用，这里不详细介绍）

1>输入如下命令安装axios插件

 npm install --save axios

2>使用axios插件

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