搭建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 中字符串连接的性能的一些问题
May 07 Javascript
js获取时间(本周、本季度、本月..)
Nov 22 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
vue-router跳转页面的方法
Feb 09 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
Vue组件中的data必须是一个function的原因浅析
Sep 03 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 Javascript
ES6 Map结构的应用实例分析
Jun 26 Javascript
解决vuex刷新状态初始化的方法实现
Aug 15 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 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.ini中添加extension=php_mysqli.dll指令的说明
2007/06/14 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
django中的ajax组件教程详解
2018/10/18 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
详解webpack打包vue时提取css
2017/05/26 Javascript
nodejs更改项目端口号的方法
2018/05/13 NodeJs
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
Angular6项目打包优化的实现方法
2019/12/15 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
[01:00:17]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第二场 1月25日
2021/03/11 DOTA
python判断字符串是否纯数字的方法
2014/11/19 Python
详细介绍Python函数中的默认参数
2015/03/30 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
Pytorch之Variable的用法
2019/12/31 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
Html5自定义字体解决方法
2019/10/09 HTML / CSS
英语文学专业学生的自我评价
2013/10/31 职场文书
医学专业大学生求职的自我评价
2013/11/27 职场文书
民族学专业求职信
2014/07/28 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书