基于Element-UI的Vue管理后台搭建

简介: 最近需要新搭建一个前端项目,因此就参考@PanJiaChen的Github项目模板vue-admin-template做部分改动,搭建一套前端框架推荐读一下 手摸手,带你用vue撸后台 系列1.

最近需要新搭建一个前端项目,因此就参考@PanJiaChen的Github项目模板vue-admin-template做部分改动,搭建一套前端框架
推荐读一下 手摸手,带你用vue撸后台 系列

1. 使用vue-cli3快速创建模板

具体vue-cli3的使用方式和注意事项可以参考使用Vue-cli 3.0搭建Vue项目

创建时引入以下特性:
  • Babel
  • Router
  • Vuex
  • CSS pre-processors
  • Linter / Formatter
其他配置
  • 不使用history mode
  • CSS pre-processor 使用LESS

个人对LESS比较熟悉,而且SCSS安装时需要python和其他相关,比较麻烦

  • Linter 使用 ESLint + Standard config

使用哪个标准看个人习惯,公司其他项目都使用 Standard,保持统一

  • 保存配置文件(Babel、PostCSS、ESLint,etc),选择 In dedicated config files

配置在指定的文件中,不夹杂在package.json中,比较清晰,后续自定配置多了之后package.json也不会变得太大

2. 引入element-ui

以下是Element-UI官方提供的vue-cli@3的Element插件,element-ui官方文档

我们为新版的 vue-cli 准备了相应的 Element 插件,你可以用它们快速地搭建一个基于 Element 的项目。

// 命令行中输入vue ui, 启动vue ui
vue ui

在项目管理器中导入项目

img_3f465c7cd4782e9f2275976082fa0ebf.png
导入项目

切换到进入项目,切换到插件管理模块,点击添加插件
img_45b464789f3e6b4446360150f81eab37.png
插件管理

搜索element,选中vue-cli-plugin-element,点击 安装vue-cli-plugin-element
img_6cb258778c92ad784b06cb9d5e52a25c.png
安装插件

安装完成后,可以对插件进行相应配置,这里使用默认即可
img_0ae586ebc4fec5d3875b2b51ea528492.png
配置插件

完成配置后,进入到文件改动,可以选择提交修改或者跳过
img_4d03a6783ee15065322ced0b8fecb652.png
提交修改

启动vue项目,页面中如果有出现el-button按钮,说明已经成功引入Element-ui
img_e6541ae37722976198a29b8ac922e52c.png
项目初始化后的页面

目录
相关文章
|
3月前
|
JavaScript
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
这篇文章介绍了如何使用Ant Design Vue UI框架创建一个简单的后台管理模板,包括创建Vue项目、安装和使用ant-design-vue、以及编写后台管理通用页面的代码和样式。
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
|
4月前
|
JavaScript
vue element-ui 中el-message重复弹出问题解决 el-message重复弹出解决办法
vue element-ui 中el-message重复弹出问题解决 el-message重复弹出解决办法
280 49
|
2月前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
169 0
|
4月前
|
JavaScript 前端开发 安全
[译] 在 Vue 组件中分离 UI 和业务逻辑。
[译] 在 Vue 组件中分离 UI 和业务逻辑。
|
4月前
|
JavaScript 前端开发
Vue实现Element UI框架的自定义输入框或下拉框在输入时对列表选项进行过滤,以及右键列表选项弹出菜单进行删除
本文介绍了如何在Vue框架结合Element UI库实现自定义输入框或下拉框,在输入时对列表选项进行过滤,并支持右键点击列表选项弹出菜单进行删除的功能。
103 0
|
4月前
|
JavaScript 容器
Vue+Element UI
该博客文章介绍了如何在Vue中集成Element UI来构建后台管理系统的左侧菜单,包括使用`el-menu`、`el-submenu`和`el-menu-item`等组件,并通过Vue router动态构建菜单项及其路由设置。
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物饲养管理APP附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物饲养管理APP附带文章源码部署视频讲解等
35 1
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的在线学习过程管理系统软件附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的在线学习过程管理系统软件附带文章源码部署视频讲解等
38 1
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的学生毕业管理小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的学生毕业管理小程序附带文章源码部署视频讲解等
40 1
|
5月前
|
JavaScript API
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
805 0
下一篇
DataWorks