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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

最近需要新搭建一个前端项目，因此就参考@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官方提供的[email protected]的Element插件,element-ui官方文档

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

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

在项目管理器中导入项目

导入项目


切换到进入项目，切换到插件管理模块，点击添加插件

插件管理


搜索element，选中vue-cli-plugin-element，点击安装vue-cli-plugin-element

安装插件


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

配置插件


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

提交修改


启动vue项目，页面中如果有出现el-button按钮，说明已经成功引入Element-ui

项目初始化后的页面

以上是 基于Element-UI的Vue管理后台搭建 的全部内容， 来源链接： utcz.com/z/377469.html

回到顶部