webpack+vue.js+elementUI试做后台管理页面_OverrideRe的博客-CSDN博客_vue.js开发后台
webpack+vue.js+elementUI试做后台管理页面
OverrideRe
于 2017-07-11 13:00:59 发布
20525
收藏
分类专栏：
前端学习
文章标签：
前端开发
前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nicorui/article/details/74945839
版权
前端学习
专栏收录该内容
1 篇文章
0 订阅
订阅专栏
前言
由于上次搭好了SSM后端框架，就想着顺便把以前那个博客网站的后台管理系统给做了，系统的后端环境是有了，前端页面用什么开发呢？之前简单的看了vue.js，所以就决定用vue.js做前端页面，然后搜了一些vue.js配套的ui，找到了elementUI。而在看vue.js的时候看到上面说了npm安装，于是就想起了这个，就想知道这是什么，于是各种Google，差不多了解了现在的前端开发是什么样的了。感觉是跟后端差不多，要安装服务程序，要用包管理工具，用包管理工具从远程仓库中拉去各种框架的包来搭建开发环境，设计好目录结构，然后开始开发，开发完了打包带走。因为开发前端也要服务器，不是以前的静态页面跳转，所以在测试时的时候前端页面访问后端的时候需要跨域访问，还好SpringMVC只要简单配置一下就可以了。 以下只说明如何在windows环境下快速地搭建开发环境进行开发，不进行任何介绍，相关介绍网上都有很多。
搭建开发环境
安装webpack
首先要安装Node.js，Node.js集成了npm（node package manage），所以安装了Node.js就自然有了npm，可以用 $ npm -v 命令查看有没有安装npm。 npm介绍：npm使用介绍
有了npm就可以安装webpack了，打开命令行工具输入以下命令安装webpakc：
npm install webpack -g
后面的-g表示全局安装，此时webpck应该安装到了全局环境下，可以用 命令：webpack -h试试看。
npm就像Maven一样，帮你从远程仓库拉取各种包，也跟Maven一样有个国外的访问很慢的中央仓库，又跟Maven一样有国内自己的镜像：
npm install -g cnpm --registry=https://registry.npm.taobao.org
可以用这个命令安装淘宝的镜像，然后就可以将用cnpm命令取代npm命令了，速度会快一点。
现在Node.js，npm，webpack都安装好了，所以可以用webpack搭建开发环境了，可以参考这两个简介： webpack中文指南 入门webpack，看这篇就够了
安装vue-cli
但是自己手动搭建开发环境太慢了，我们用的是vue.js，刚好可以用vue cli来快速地搭建基于vue.j的开发环境，命令行输入下面的命令安装vue-cli：
npm install vue-cli -g
然后找一个目录准备创建项目，使用
vue init <template-name> <project-name>
命令进行项目的创建和初始化，template-name是vue-cli提供的几种模板名字，可以不输入。 vue -cli参考资料：Vue-cli图文视频教程 初始化命令界面： 上面的问号都是yes or no。
目录结构：
目录中的node_moduless文件夹是没有的，进行项目创建和初始化之后是没有一些依赖包的，这个时候我们就要进入项目的目录下，使用
npm install
命令来初始化依赖包，初始化需要的包都在package.json里面设置好了，这样一个基本的项目环境搭建好了。
npm run dev
输入上面的命令运行项目
运行成功。 至此，项目的开发环境成功搭建，接下来就要进行项目的开发了。
项目示例
项目开发都是在src文件夹下进行的。 因为是基于Vue.js和elementUI进行的项目开发，所以当然要导入Vue.j包和elementUI包：
npm install --save vue element-ui
要进行页面跳转，所以要用到vue-router2：
npm install --save vue-router
要从后端获取数据，所以要ajax请求，用vue官方推荐的axios：
npminstall --save axios
本来还想把vuex加进去，但是想想项目太小了就算了。
开发工具Sublime Text3的插件配置
方式一： 安装Sublime text 3插件很方便，可以直接下载安装包解压缩到Packages目录（菜单->preferences->Browse Packages）。 方式二：使用Package Control组件安装 也可以安装package control组件，然后直接在线安装：
1.按Ctrl+`调出console 2.粘贴以下代码到命令行并回车：
import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
3.重启Sublime Text 3。 4.如果在Perferences->package settings中看到package control这一项，则安装成功。 5.按下Ctrl+Shift+P调出命令面板 6.输入install 调出 Install Package 选项并回车，然后在列表中选中要安装的插件。
由于我是用vue开发的，所以当然要安装vue相关的插件，在弹出的列表里输入vue就有vue相关的插件。 Emmet插件当然也是必装的。
目录结构
还可以根据不同模块在各个文件下面进行细分
项目展示
上面的博客管理是要与后台交互的
下面的是elementUI部分组件的展示
参考资料汇总
npm： npm使用介绍 webpack： webpack中文指南 | 入门webpack，看这篇就够了 vue-cli： Vue-cli图文视频教程 vue-router2： vue-router2 axios： axios
源码：前端，后端
当然，还有很多功能没实现，最近一段时间有事，大概可能弄不了多少，反正是不定时捣鼓。
OverrideRe
关注
关注
点赞
收藏
打赏
评论
webpack+vue.js+elementUI试做后台管理页面
前言由于上次搭好了SSM后端框架，就想着顺便把以前那个博客网站的后台管理系统给做了，系统的后端环境是有了，前端页面用什么开发呢？之前简单的看了vue.js，所以就决定用vue.js做前端页面，然后搜了一些vue.js配套的ui，找到了elementUI。而在看vue.js的时候看到上面说了npm安装，于是就想起了这个，就想知道这是什么，于是各种Google，差不多了解了现在的前端开发是什么样的了。感
复制链接
扫一扫
专栏目录
vue+element后台管理系统模板1
11-13
基于vue+element的后台管理系统的模板，有登录，首页，列表，新增，404组件。有全屏功能，有切换当前主题功能。
评论 3
您还未登录，请先
登录
后发表或查看评论
记录--iview 使用爬坑
林恒的博客
09-14
24
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助
前段时间公司需要开发一个后台管理系统，时间比较急迫，一两天时间。想一想自己一点一点的搭建起来可能性不太大，就想着有没有现成的可以改一改，就找到了基于Vue.js和iview组件库的现成后台，拿来改改就可以了 iview admin。
一、介绍：
1. iview UI组件库是基于Vue.js的UI组件库(相比之下大家都知道的)。...
webpack5后台管理
js_admin的博客
09-21
69
1、系统基于panjiachen后台管理系统模板，升级webpack5。
2、github地址:https://chengmanxiang/webpack5-vue2-admin
3、线上地址：webpack5 vue2
基于element-ui 搭建管理后台
最新发布
liubangbo的专栏
10-24
1694
此框架采用了vue-cli 脚手架创建的项目，选中vuex vue-router，然后按官方文档安装element-ui 并按需加载。之前接触的框架，网络接口一般定义在一个文件中，所有业务模块用到的网络接口都写到一个文件中，文件比较长，维护起来也费尽。在项目中如果多人协作开发，定义通用常量还是比较重要的，防止出现奇怪bug。在这个通用框架中我们定义了一个假路由数据，如果你们后端返回的动态路由和这个假路由一样，那么这个框架就可以直接拿来用了，直接上手写业务。左侧为菜单栏，右侧包含头部，面包屑，主内容区。
Vue.js(一) Vue.js + element-ui 扫盲
热门推荐
人不风流枉少年
12-09
5万+
一：node.js是什么
我们知道javascript代码只能在浏览器上运行，只有浏览器能够解析js代码，如果想要javascript代码能够在服务器端运行就必须提供一个Javascript的运行环境(runtime environment)，这就是node.js。
node.js是对Chrome V8引擎进行了封装，是一个能让JavaScript运行在服务端的开发平台，它让JavaScript成...
进击前端＜一＞ 使用Vue.js搭建后台管理系统
骐骥筋力成，志在万里外
02-03
1309
vue.js是核心 * element UI是一个支持vue.js的UI组件库 * mock.js：由于没有后端接口，所以需要使用本地数据来假装成后端的数据。
文章目录技术栈初始化项目项目结构分析用法根实例根实例管理区域渲染页面修改首页注册组件router-view修改初始化页面使用路由新建管理平台页面Login.vue后台管理首页AdminIndex.vue客户管理页面ClientManage.vue产品管理页面ProductManage.vue修改路由子路由版嵌套router-view定义子路由..
使用elementUI制作简易登录页面
NanChen的博客
11-17
5528
<template>
<div id="app">
<div id="admin">
<div class="pos" v-loading="loading">
<h1 class="adminh1">用户登录</h1>
<el-form
:model="ruleForm"
status-icon
:rules=".
使用webpack搭建简单的vue+element-ui项目，并实现模块按需加载
crazy_jialin的博客
05-24
7790
本文讲述一下在vue项目中搭建element-ui框架，并实现模块的按需加载。
准备工作：在此之前，需要大家搭建一个简单的vue+webpack项目，本文讲述的操作是基于这个项目的，所以，需要大家准备一下，具体操作步骤请参考本人上一篇博客( https://blog.csdn.net/crazy_jialin/article/details/80422964 )。
第一步：安装elem...
vue、webpack及粗略的ElementUI
weixin_42287451的博客
06-29
64
Vue:前端体系、前后端分离
1. 概述
2. 前端知识体系
2.1.前端三要素
2.2、结构层（HTML）
​太简单，略
2.3、表现层（CSS）
什么是CSS预处理器
2.4、行为层（JavaScript）
JavaScript框架
UI框架
JavaScript构建工具
2.5、三端统一
混合开发（Hybrid App）
微信小程序
2.6、后端技术
2.7、主流前端框架
​Vue.js
iView
ElementUI
ICE
VantUI
AtUI
CubeUI
使用Element ui 编写登录页面
前端开发小白9527
03-14
1万+
1 完整引入element ui
执行命令安装npm i element-ui -S
mian.js中 完整引入
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
2 登录页 login.vue
<template>
一篇文带你使用vue完成一个完整后台
CSDN凉宸
05-26
1万+
介绍
vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你
vue-element-admin定位是后台集成方案，不适合当基础模板进行二次开发，项目集成了许多用不到的功能，会造成代码沉余
vue-admin-template是一个后台基础模板，建议使
nodeJs + webpack+vue+ element ui 环境安装
汉堡请不要欺负面条
03-22
2万+
一.安装nodeJs
1.打开NodeJs官网：https://nodejs.org/en/download/ 点击下载
2.双击安装，安装过程基本直接“NEXT”就可以了。（windows的安装msi文件在过程中会直接添加path的系统变量，变量值是你的安装路径，例如“C:\Program Files\nodejs”）
3.安装完成后可以使用cmd（win+r然后输入cmd进入）测试下是...
webpack4+vue3.0+ElementUi创建基于vue3的项目
Mr_XiMu的博客
01-15
1235
webpack4+vue3.0创建基于vue3的项目一、创建步骤1.1、创建命令1.2、Please pick preset(选择预定配置）1.3、Check the features needed for your project (选择你项目需要添加的功能)1.4 Choose a version of Vue.js that you want to start the project with (选择项目使用的vue版本)1.5 Use history mode for router? (路由是否使用
vuejs 开发的管理系统后台
03-07
vuejs 开发的管理系统后台 简单好用 不需要怎么修改 就可以直接使用
使用webpack创建vue项目并整合elementUI
littleWell的博客
03-27
738
由于vue在导入elementUI时遇到了许多问题，就像配置maven 依赖一样，遇到了很多问题，以此总结。
下文已经配置好的可以根据目录跳过：
1)环境安装与确认
2)使用webpack创建vue项目
3)整合elementUI
4)引入报错问题
环境确认:
在整合elemenUI环境之前，确认一下 Node.js 环境 和 npm 环境
Node.js环境确定: node -v
npm环境...
vuejs 和 element 搭建的一个后台管理界面
weixin_30596023的博客
11-20
952
介绍：
　　这是一个用vuejs2.0和element搭建的后台管理界面。
相关技术：
　　vuejs2.0：渐进式JavaScript框架，易用、灵活、高效，似乎任何规模的应用都适用。
　　element：基于vuejs2.0的ui组件库。
　　vue-router：一般单页面应用spa都要用到的前端路由。
　　vuex：Vuex 是一个专为 Vue.js 应用程序开发的状态管...
vue入门 | 使用vue.js2.0 + ElementUI开发后台管理系统详细教程（一）
wulixiaoxiao1的博客
02-26
8425
转载自：http://www.jianshu.com/p/d87d7140944e
导语
本次将会从头到尾详解，怎样使用vue和ElementUI快速开发后台管理系统，以及在开发过程中遇到的一些bug
在线demo源码
如果运行时报错，请检查几个包的版本
node.js 6.9.2cnpm 3.10.10vue 2.1.6element-ui 1.0.9
vue开发的一个后台系统
xiaoping_1988的博客
09-16
7952
vue开发的一个后台系统
vue入门 | 使用vue.js2.0 + ElementUI开发后台管理系统详细教程
catherine的博客
02-24
2万+
导语本次将会从头到尾详解，怎样使用vue和ElementUI快速开发后台管理系统，以及在开发过程中遇到的一些bug在线demo源码如果运行时报错，请检查几个包的版本node.js 6.10.0npm 3.10.10vue 2.1.6element-ui 1.0.9项目结构分析活动发布步骤一步骤二步骤三步骤四活动管理列表页活动详情页活动详情步骤一步骤二步骤三步骤四报名管理签到数据统计评价管理开发前准...
vue.js与后台交互
qq_35149546的博客
05-22
1796
1.vue.js与后台数据交互：交互方法
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
©️2022 CSDN
皮肤主题：大白
设计师：CSDN官方博客
返回首页
OverrideRe
CSDN认证博客专家
CSDN认证企业博客
码龄6年
暂无认证
31
原创
20万+
周排名
195万+
总排名
5万+
访问
等级
749
积分
20
粉丝
10
获赞
评论
14
收藏
私信
关注
热门文章
webpack+vue.js+elementUI试做后台管理页面
20525
Java自带的XML解析
2949
SSM框架整合（IntellIj IDEA+Maven+Spring+SpringMVC+MyBatis）之MyBatis
2501
线程安全与锁优化
2180
垃圾收集器
2080
分类专栏
java
22篇
spring
3篇
练手项目
1篇
算法
2篇
jvm
6篇
git
1篇
前端学习
1篇
源码
2篇
最新评论
Java自带的XML解析
weixin_45677740:
spring整合orm
webpack+vue.js+elementUI试做后台管理页面
Harry_Luo:
你好 有git地址吗
webpack+vue.js+elementUI试做后台管理页面
xsh80144242:
学习了
http://t.cn/RKSsoCW
webpack+vue.js+elementUI试做后台管理页面
qq_34264050:
111111
Java内存模型与线程
No Silver Bullet:
博文写的不错，帮你推至首页。
欢迎访问并关注我的博客：http://blog.csdn.net/sunhuaqiang1
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
AQS源码阅读
jdk1.8 ConcurrentHashMap源码阅读
SSM框架整合（IntellIj IDEA+Maven+Spring+SpringMVC+MyBatis）之Spring Framework
2019年2篇
2017年22篇
2016年7篇
目录
目录
分类专栏
java
22篇
spring
3篇
练手项目
1篇
算法
2篇
jvm
6篇
git
1篇
前端学习
1篇
源码
2篇
目录
评论 3
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
打赏作者
OverrideRe
你的鼓励将是我创作的最大动力
¥2
¥4
¥6
¥10
¥20
输入1-500的整数
余额支付
(余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付
您的余额不足，请更换扫码支付或充值
打赏作者
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值