搭建element-ui的Vue前端工程操作实例


Posted in Javascript onFebruary 23, 2018

一、安装npm镜像

(1)下载node.js, 配置node.js的环境变量

检测PATH环境变量是否配置了Node.js,点击开始=》运行=》输入"cmd" => 输入命令"path"

检查Node.js版本

搭建element-ui的Vue前端工程操作实例

在命令窗口输入:npm install -g cnpm ?registry=https://registry.npm.taobao.org

搭建element-ui的Vue前端工程操作实例

二、安装全局vue-cli

(1)npm install -g vue-cli 回车,验证是否安装成功,在命令行中输入vue,出来vue的信息说明安装成功

三、全局安装 vue-cli

(1)npm install --global vue-cli

四、创建一个基于 webpack 模板的新项目

(1)vue init webpack my-project (项目名)
(2)cd my-project
(3)npm install
(4)npm run dev

搭建element-ui的Vue前端工程操作实例

五、需要安装的环境

(1)npm install sass-loader --save-dev
(2)npm install gulp-sass
(3)npm install --save axios
(4)npm install element-ui -S
(5)npm install vuex --save

六、需要引入的包(element-ui)

(1) import ElementUI from 'element-ui'
(2) import 'element-ui/lib/theme-default/index.css'
(3) import Vue from 'vue'
(4) 使用:Vue.use(ElementUI)

七、项目代码结构

项目源码:https://github.com/davis0511/school-ui

(1)

搭建element-ui的Vue前端工程操作实例

(2)首页Home.vue

<template>
	<el-row class="container">
		<el-col :span="24" class="header">
		 <el-col :span="20" class="logo">
		  <img src="./assets/logo4.png" /> <span>学校管理<i class="txt">系统</i></span>
		 </el-col>
		 <el-col :span="4" class="userinfo">
				<el-dropdown trigger="click">
					<span class="el-dropdown-link userinfo-inner"><img :src="this.sysUserAvatar" /> {{sysUserName}}</span>
						<el-dropdown-menu slot="dropdown">
						<el-dropdown-item>我的消息</el-dropdown-item>
						<el-dropdown-item>设置</el-dropdown-item>
						<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
		  </el-col>
		</el-col>
		<el-col :span="24" class="main">
			<aside>
			<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect"
			theme="dark" unique-opened router>
				<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
					<el-submenu :index="index+''" v-if="!item.leaf">
						<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
						<el-menu-item v-for="child in item.children" :index="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
					</el-submenu>
					<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
				</template>
			</el-menu>
			</aside>
			<section class="content-container">
				 <div class="grid-content bg-purple-light">
					<el-col :span="24" class="breadcrumb-container">
						<strong class="title">{{$route.name}}</strong>
						<el-breadcrumb separator="/" class="breadcrumb-inner">
							<el-breadcrumb-item v-for="item in $route.matched">
								 {{ item.name }}
							</el-breadcrumb-item>
						</el-breadcrumb>
					</el-col>
					<el-col :span="24" class="content-wrapper">
						<transition>
						<router-view></router-view>
						</transition>
					</el-col>
				</div>
			</section>
		</el-col>
	</el-row>
</template>
<script>
 export default{
		data() {
			return { 
				sysUserName:''
			}
	 },
		methods:{
				onSubmit() {
				console.log('submit!');
				},
				handleopen() {
				//console.log('handleopen');
				},
				handleclose() {
				//console.log('handleclose');
				},
				handleselect: function (a, b) {
				},
				//退出登录
				logout: function () {
					var _this = this;
					this.$confirm('确认退出吗?', '提示', {
					//type: 'warning'
					}).then(() => {
					sessionStorage.removeItem('user');
					_this.$router.push('/login');
					}).catch(() => {
      
				}); 
			}
		}
 }
</script> 
<style scoped lang="scss">
.container {
	position: absolute;
	top: 0px;
	bottom: 0px;
	width: 100%;
	.header {
		height: 60px;
		line-height: 60px;
		background: #1F2D3D;
		color: #c0ccda;
		.userinfo {
				text-align: right;
				padding-right: 35px;
				.userinfo-inner {
				color: #c0ccda;
				cursor: pointer;
				img {
				width: 40px;
				height: 40px;
				border-radius: 20px;
				margin: 10px 0px 10px 10px;
				float: right;
				}
			}
		}
		.logo {
			font-size: 22px;
			img {
			width: 40px;
			float: left;
			margin: 10px 10px 10px 18px;
			}
			.txt {
			color: #20a0ff
			}
		}
	}
	.main {
		background: #324057;
		position: absolute;
		top: 60px;
		bottom: 0px;
		overflow: hidden;
		aside {
		width: 230px;
		}
	.content-container {
		background: #f1f2f7;
		position: absolute;
		right: 0px;
		top: 0px;
		bottom: 0px;
		left: 230px;
		overflow-y: scroll;
		padding: 20px;
		.breadcrumb-container {
			margin-bottom: 15px;
			.title {
				width: 200px;
				float: left;
				color: #475669;
			}
			.breadcrumb-inner {
				float: right;
			}
  }
	 .content-wrapper {
			background-color: #fff;
			box-sizing: border-box;
	 }
  }
 }
}
</style>

(3)App.vue

搭建element-ui的Vue前端工程操作实例

(4)main.js

import Vue from 'vue'
import Router from 'vue-router' 
import App from './App'
import routes from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(Router) 
Vue.use(ElementUI)
const router = new Router({
 routes
});
Vue.config.productionTip = false
new Vue({ 
 router, 
 render: h => h(App)
}).$mount('#app')

(5)router.js

import Home from './Home' 
import classes from './class/classes' 
import student from './student/student' 
let router = [
 {
  path: '/',
  name: '学校',
  component: Home,
  redirect: '/classes',
 iconCls: 'fa fa-id-card-o',
 children: [
{ path: '/classes', component: classes, name: '班级管理' },
{ path: '/student', component: student, name: '学生管理' }
  ] 
 }
]; 
export default router;

八、完成之后,npm run dev; 界面渲染如下:

搭建element-ui的Vue前端工程操作实例

以上这篇搭建element-ui的Vue前端工程操作实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
Apr 01 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 Javascript
JavaScript中提前声明变量或函数例子
Nov 12 Javascript
jquery加载图片时以淡入方式显示的方法
Jan 14 Javascript
Javascript 获取鼠标当前的位置实现方法
Oct 27 Javascript
Canvas 绘制粒子动画背景
Feb 15 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 Javascript
Vue框架中正确引入JS库的方法介绍
Jul 30 Javascript
微信小程序文字显示换行问题
Jul 28 Javascript
超简单的微信小程序轮播图
Nov 22 Javascript
vue实现员工信息录入功能
Jun 11 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
Feb 23 #Javascript
Vue2 模板template的四种写法总结
Feb 23 #Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 #Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
Feb 23 #Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 #Javascript
angular动态表单制作
Feb 23 #Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 #Javascript
You might like
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
php blowfish加密解密算法
2016/07/02 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
PHP7新功能总结
2019/04/14 PHP
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
jquery 倒计时效果实现秒杀思路
2013/09/11 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
D3.js实现直方图的方法详解
2016/09/25 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
python如何查看微信消息撤回
2018/11/27 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
行政助理岗位职责范文
2013/12/03 职场文书
大专会计自我鉴定
2014/02/06 职场文书
预备党员的自我评价
2014/03/12 职场文书
读书之星事迹材料
2014/05/12 职场文书
小学班主任工作随笔
2015/08/15 职场文书
如何将numpy二维数组中的np.nan值替换为指定的值
2021/05/14 Python
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis