搭建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动态调整iframe高度的代码
Apr 10 Javascript
指定js可访问其它域名的cookie的方法
Sep 18 Javascript
javascript 对象定义方法 简单易学
Mar 22 Javascript
写得不错的jquery table鼠标经过变色代码
Sep 27 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
微信小程序报错:this.setData is not a function的解决办法
Sep 27 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
Jan 08 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与javascript的两种交互方式
2006/10/09 PHP
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
几个有用的php字符串过滤,转换函数代码
2012/05/01 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
php猜单词游戏
2015/09/29 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
nodeType属性返回被选节点的节点类型介绍
2013/11/22 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
jQuery qrcode生成二维码的方法
2016/04/03 Javascript
js如何准确获取当前页面url网址信息
2020/09/13 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
Python深入学习之装饰器
2014/08/31 Python
使用Python对Csv文件操作实例代码
2017/05/12 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
python如何支持并发方法详解
2020/07/25 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
浅析python连接数据库的重要事项
2021/02/22 Python
html5实现滑块功能之type=&quot;range&quot;属性
2020/02/18 HTML / CSS
女士时装鞋:Chinese Laundry
2018/08/29 全球购物
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
网络程序员自荐信
2014/01/25 职场文书
如何写求职信
2014/05/24 职场文书
退休欢送会主持词
2015/07/01 职场文书
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers