vue-cli3+adminlte快速搭建后台管理模板...
2019-03-02 13:45
1801 查看
应下个项目的需求需要做一个后台管理系统,如果不想写繁琐的css样式以及自适应的话,可以考虑adminlte ,之前有使用或adminlte结合node.js ,ejs模板搭建过后台管理系统,可是应用到vue这种基于mvvm单页面应用的话,区别还是很大的。
搭建过程中遇到很多意想不到的BUG 还好最后都被一一解决了 ,下面给大家介绍搭建adminlte模板,个人认为是结合vue是非常严谨的方式。如果此文有何可优化,欢迎各路大神指教一二。
首先百度上各种说先装bootstrap,jquery 什么什么的 个人觉得并不是这样 并没有这么麻烦 这样的话版本难以统一 会出现何种bug
个人推荐以下方式
1: 首先搭建vue-cli3项目
[code]1:npm install @vue/cli -g //安装vue-cli 3.0 2:vue create mypoject //创建项目
3:选择项目需要的一些特性
4:以上配置就不详细说了..........省略
5.执行 npm install admin-lte -s 安装adminlte集成
6:找到nodemodel里面的admin-lte
7:粘贴到public文件夹下面 去掉admin-lte外文件夹直接粘贴里面的所有内容到 public文件夹 index.html同级
8:打开index.html 具体参照public下面的starter.html文件引入 此处贴上我的引入顺序 特别注意的是body处 和app处 需加上相应class名
9:打开app.vue文件删除不必要的东西 只留简易模板 拷贝starter.html body部门的内容拷贝到 app.vue template里面
10:运行项目 执行 npm run serve 就可以看到我们的后台模板了
希望能对大家有效果!
相关文章推荐
- 使用前端后台管理模板库admin-lte
- 使用前端后台管理模板库admin-lte(转)
- 简易后台管理系统Vue前端快速搭建教程
- 使用Vue-cli搭建后台简单管理系统vue.js2.0
- IDEA上面安装vue插件,并极速搭建vue后台管理模板
- 使用Vue-cli快速搭建项目
- 快速搭建Vue-cli项目
- Admin管理后台模板
- [置顶] Asp.net Core + EF Core + Bootstrap搭建的MVC后台通用管理系统模板(跨平台版本)
- 在vue-cli搭建的项目中增加后台mock接口
- 快速解决vue-cli不能初始化webpack模板的问题
- 使用Django快速搭建简单的数据管理后台
- vue-cli webpack模板项目搭建及打包时路径问题的解决方法
- ABP+AdminLTE+Bootstrap Table权限管理系统第一节--使用ASP.NET Boilerplate模板创建解决方案
- 基于 Laravel-Admin 在十分钟内搭建起功能齐全的后台模板
- vue--管理后台手把手搭建-----(2)
- vue2.0项目快速搭建工具——vue-cli
- 使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
- vue-cli 快速搭建脚手架
- 使用vue-cli webpack 快速搭建项目的代码