天天看点

基于Element-UI的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官方提供的vue-cli@3的Element插件,

element-ui官方文档
我们为新版的 vue-cli 准备了相应的 Element 插件 ,你可以用它们快速地搭建一个基于 Element 的项目。
// 命令行中输入vue ui, 启动vue ui
vue ui
           

在项目管理器中导入项目

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

导入项目

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

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

插件管理

搜索element,选中vue-cli-plugin-element,点击

安装vue-cli-plugin-element

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

安装插件

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

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

配置插件

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

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

提交修改

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

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

项目初始化后的页面