搭建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 相关文章推荐
JavaScript中出现乱码的处理心得
Dec 24 Javascript
js confirm()方法的使用方法实例
Jul 13 Javascript
JavaScript中的包装对象介绍
Jan 27 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
javascript基础知识
Jun 07 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
javascript基础知识讲解
Jan 11 Javascript
AngularJs 常用的过滤器
May 15 Javascript
JavaScript实现简单进度条效果
Mar 25 Javascript
微信小程序地图实现展示线路
Jul 29 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
用PHP和ACCESS写聊天室(一)
2006/10/09 PHP
php中通过smtp发邮件的类,测试通过
2007/01/22 PHP
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
PHP实现的封装验证码类详解
2013/06/18 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
在PHP程序中使用Rust扩展的方法
2015/07/03 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
详解php用static方法的原因
2018/09/12 PHP
PHP常见的几种攻击方式实例小结
2019/04/29 PHP
Nigma vs Alliance BO5 第三场2.14
2021/03/10 DOTA
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
2015/09/07 Javascript
Javascript中神奇的this
2016/01/20 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
jsTree使用记录实例
2016/12/01 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
原生js实现无缝轮播图
2020/01/11 Javascript
vue实现淘宝购物车功能
2020/04/20 Javascript
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
汽车制造与装配专业自荐信范文
2014/01/02 职场文书
房地产融资计划书
2014/01/10 职场文书
大学校园生活自我鉴定
2014/01/13 职场文书
中学教师培训制度
2014/01/31 职场文书
乡下人家教学反思
2014/02/01 职场文书
有关爱国演讲稿
2014/05/07 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
小学数学新课改心得体会
2016/01/22 职场文书
OpenCV实现普通阈值
2021/11/17 Java/Android
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript