Vuejs实例-00Vuejs2.0全家桶结合ELementUI制作后台管理系统
Vuejs2.0全家桶结合ELementUI制作后台管理系统
0: 系统环境的介绍
1: Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目
2: Vuejs实例-02Vue.js项目集成ElementUI
3: 使用Vue-Router插件构建单页面应用(这个不知道如何编写文章,但是已经在项目中实现,请查看项目源码)
4: 使用Vuex管理组件状态(这个不知道如何编写文章,但是已经在项目中实现,请查看项目源码)
5: 后续追加...
系统环境的介绍
开发的一个软件,有时候由于开发和生产环境的不同,会遇到一些莫名的问题,为了减少或者避免这样的问题,先公布我的开发环境。
本系列文章,所使用的开发环境:
- 操作系统: windows10
- 代码编辑器: Sublime Text3
- node版本:v6.10.0
- npm版本:4.5.0
- VUejs版本:2.2.6
- Element版本:1.2.9
- 浏览器: Google Chrome58、IE11、Edge20、Firefox53
- cnpm版本:4.5.0
package.json
{
"name": "vue-element-admin",
"version": "1.0.0",
"description": "vuVuejs实例-Vuejs2.0全家桶结合ELementUI制作后台管理界统系统",
"author": "<772863869@qq.com> weiqinl ",
"private": true,
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e"
},
"dependencies": {
"vue": "^2.2.6",
"vue-router": "^2.3.1"
},
"devDependencies": {
"autoprefixer": "^6.7.2",
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chalk": "^1.1.3",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.11.1",
"friendly-errors-webpack-plugin": "^1.1.3",
"html-webpack-plugin": "^2.28.0",
"http-proxy-middleware": "^0.17.3",
"webpack-bundle-analyzer": "^2.2.1",
"cross-env": "^4.0.0",
"karma": "^1.4.1",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-phantomjs-shim": "^1.4.0",
"karma-sinon-chai": "^1.3.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.30",
"karma-webpack": "^2.0.2",
"lolex": "^1.5.2",
"mocha": "^3.2.0",
"chai": "^3.5.0",
"sinon": "^2.1.0",
"sinon-chai": "^2.8.0",
"inject-loader": "^3.0.0",
"babel-plugin-istanbul": "^4.1.1",
"phantomjs-prebuilt": "^2.1.14",
"chromedriver": "^2.27.2",
"cross-spawn": "^5.0.1",
"nightwatch": "^0.9.12",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"opn": "^4.0.2",
"optimize-css-assets-webpack-plugin": "^1.3.0",
"ora": "^1.2.0",
"rimraf": "^2.6.0",
"url-loader": "^0.5.8",
"vue-loader": "^11.3.4",
"vue-style-loader": "^2.0.5",
"vue-template-compiler": "^2.2.6",
"webpack": "^2.3.3",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.18.0",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
源码
源码正在更新:git项目源码
Vuejs实例-00Vuejs2.0全家桶结合ELementUI制作后台管理系统的更多相关文章
- React全家桶+Material-ui构建的后台管理系统
一.简介 一个使用React全家桶(react-router-dom,redux,redux-actions,redux-saga,reselect)+Material-ui构建的后来管理中心. 二. ...
- React全家桶打造共享单车后台管理系统项目_第1篇_项目环境搭建_首页编写
1.项目介绍 项目github地址:https://github.com/replaceroot/React-manageSystem 项目整体架构: 课程大纲: 第一章:React基础知识 ...
- React全家桶+AntD 共享单车后台管理系统开发
第1章 课程导学对课程整体进行介绍,并且说明学习的必要性.第2章 React基础知识React基础知识以及生命周期的介绍,并使用React官方脚手架初始化基础项目,同时介绍了新一代打包工具Yarn.第 ...
- Vue + Element-ui实现后台管理系统(2)---项目搭建 + ⾸⻚布局实现
项目搭建 + ⾸⻚布局实现 上篇对该项目做了个总述 :Vue + Element-ui实现后台管理系统(1) --- 总述 这篇主要讲解 项目搭建 + 后台⾸⻚布局实现 : 整体效果 后台首页按布局一 ...
- SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇(一): 搭建基本环境、整合 Swagger、MyBatisPlus、JSR303 以及国际化操作
相关 (1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y- ...
- Vue + Element-ui实现后台管理系统(4)---封装一个ECharts组件的一点思路
封装一个ECharts组件的一点思路 有关后台管理系统之前写过三遍博客,看这篇之前最好先看下这三篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-system ...
- Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件
封装一个Form表单组件和Table组件 有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-syste ...
- SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇(五): 数据表设计、使用 jwt、redis、sms 工具类完善注册登录逻辑
(1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y-h/p ...
- vue+element-ui JYAdmin后台管理系统模板-集成方案【项目搭建篇2】
项目搭建时间:2020-06-29 本章节:讲述基于vue/cli, 项目的基础搭建. 本主题讲述了: 1.跨域配置 2.axios请求封装 3.eslint配置 4.环境dev,test,pro(开 ...
随机推荐
- 一张图,理解JAVA体系结构、运行机制、JVN运行机制、Java平台(初学)
初学JAVA,学一门语言不仅仅是学其语法,逻辑思维能力,还有每一门语言都有自己独特的一方面,所以才有那么多语言要学啊 = =,所以想要真的学好语言,其编译机制,运行机制多少也要涉猎一些啊.这是初学JA ...
- AutoMapper 使用总结
初识AutoMapper 在开始本篇文章之前,先来思考一个问题:一个项目分多层架构,如显示层.业务逻辑层.服务层.数据访问层.层与层访问需要数据载体,也就是类.如果多层通用一个类,一则会暴露出每层的字 ...
- Git知识总览(二) git常用命令概览
上篇博客我们从 git clone 和 git status 两个命令开始,引出了一系列的git操作命令, 请参见:<Git知识总览(一) 从 git clone 和 git status 谈起 ...
- Java框架之Hibernate(二)
本文主要介绍: 1 Criteria 接口 2 用 myeclipse 反向生成 3 hibernate 主键生成策略 4 多对一 5 一对多 6 使用List 集合的一对多 7 多对多 一.Cri ...
- JavaScript图片库(简单的应用案例)
这个图片库小例子的效果如图所示,点击网页上某个图片链接时你将看到两种效果:占位符图片呗替换成这个链接所指向的图片,同时描述性文字也被替换为这个链接的title属性值. 利用一个简单的图片库应用 ...
- QA: 自闭合标签要不要手动闭合?
起 自闭合标签末尾要不要加 /,这个问题一直 "困扰" 着我.但是抱着无所谓的态度,一直没有仔细去看下. 以 img 标签为例,一般有以下三种写法: <img src=&qu ...
- HashSet源码阅读
HashSet的实现基于HashMap 看几个简单的初始化方法 public HashSet() { map = new HashMap<>(); } public HashSet(Col ...
- C# 实现邮件发送
要实现邮件发送功能首先需要准备两三个邮箱测试,在这里呢准备了2个QQ邮箱和一个微软邮箱,详细请看代码. 我这里是使用QQ邮箱向另外两个邮箱发送邮件的,在开始写代码之前你需要登录你QQ邮箱进行以下几个操 ...
- Grafana最新版本4.3.1安装(后端使用mysql)
环境 CentOS release 6.5 (Final) 64bitzabbix_server (Zabbix) 3.0.3 grafana-4.3.1mysql-5.6.21 一.安装grafan ...
- Android自定义安全键盘
在银行APP里经常要自定义键盘,例如实现下面这样的效果 首先在xml文件里定义键盘 <Keyboard xmlns:android="http://schemas.andr ...