整合vue+Element UI 开发管理系统

1、 安装 Node.js 和 npm
确保安装了 Node.js 和 npm。可以通过 Node.js 官网 下载。

2、 创建 Vue 项目
安装cli

npm  install -g @vue/cli

使用 Vue CLI 创建一个新的 Vue 项目。
vue  create  admin-system

cd admin-system

npm run serve

出现这个页面表示vue创建成功

安装 Element UI

npm install element-ui --save

配置 Element UI

在 main.js 中引入 Element UI：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
 
Vue.use(ElementUI)
 

npm run serve
 

使用 Element UI 组件

在 Vue 组件中使用 Element UI 组件。例如，在 App.vue 中添加一个按钮：

<template>
  <div id="app">
    <el-button type="primary">这是一个 Element UI 按钮</el-button>
  </div>
</template>

重启 npm run serve 

3、项目的典型结构

admin-system
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── router/
│   ├── store/
│   ├── App.vue
│   └── main.js
└── package.json