搭建VUE+ElementUI开发环境以及路由页面

要搭建Vue+Element UI的开发环境，并创建一个简单的路由页面，你需要按照以下步骤操作：

1. 安装Node.js和npm（如果尚未安装）。
2. 使用npm安装Vue CLI。
3. 创建一个新的Vue项目并选择需要的配置。
4. 安装Element UI。
5. 设置Vue路由。
6. 创建一个简单的组件并使用Element UI。

以下是具体的命令和代码示例：

# 安装Vue CLI
npm install -g @vue/cli
 
# 创建一个新的Vue项目
vue create my-project
 
# 进入项目目录
cd my-project
 
# 安装Element UI
npm install element-ui --save
 
# 在Vue项目中引入Element UI
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
 
Vue.use(ElementUI);
 
# 设置Vue路由
npm install vue-router --save
 
# 创建router.js
// router.js
import Vue from 'vue';
import Router from 'vue-router';
import HomePage from './components/HomePage.vue';
 
Vue.use(Router);
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HomePage',
      component: HomePage
    }
  ]
});
 
# 创建一个简单的Element UI组件
// HomePage.vue
<template>
  <div>
    <el-button @click="handleClick">点击我</el-button>
  </div>
</template>
 
<script>
export default {
  methods: {
    handleClick() {
      this.$message('按钮被点击');
    }
  }
};
</script>

在这个例子中，我们创建了一个简单的Vue项目，引入了Element UI库，并定义了一个包含Element UI按钮和点击事件的简单组件。这个过程展示了如何设置Vue和Element UI的基础开发环境，并提供了一个开始构建更复杂应用的基础。