基于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,选中vue-cli-plugin-element,点击安装vue-cli-plugin-element
安装插件

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

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

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

3. 引入其他常用的库

$ yarn add axios js-cookie normalize.css nprogress
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 webpack2和vue2已经不是新鲜东西了,满大街的文章在讲解webpack和vue,但是很多内容写的不是...
    技术宅小青年阅读 6,601评论 4 43
  • 夏天…… 太阳……… 打工仔…… 中午…… 干了一上午的活,没有地方午休,全在地板上或坐或躺的休息。 还好,我们还...
    火悠悠阅读 287评论 0 1
  • 今天周三,天气晴,晴空万里。这就是我今下午的心情,心情愉悦! 今天是无作业日,老师的作业很少。我就让儿...
    任俊宇阅读 146评论 0 0
  • 徐铭鸿2018.8.24 5.0 W5周检视(8.20~8.24) 目标是用来实现的! 第5个90天践行3个小目标...
    铭鸿minghong阅读 265评论 0 0