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