一、安装npm镜像
(1)下载node.js, 配置node.js的环境变量
检测PATH环境变量是否配置了Node.js,点击开始=》运行=》输入"cmd" => 输入命令"path"
检查Node.js版本
在命令窗口输入:npm install -g cnpm –registry=https://registry.npm.taobao.org
二、安装全局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
五、需要安装的环境
(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)
(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
(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前端工程操作实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。
本文向大家介绍vue+element-ui+ajax实现一个表格的实例,包括了vue+element-ui+ajax实现一个表格的实例的使用技巧和注意事项,需要的朋友参考一下 实例如下: 效果图: 以上这篇vue+element-ui+ajax实现一个表格的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。
本文向大家介绍vue实现日历表格(element-ui),包括了vue实现日历表格(element-ui)的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了vue实现日历表格的具体代码,供大家参考,具体内容如下 效果如图: html:后面的日期是循环出来的 这里注意一下:key="index + item" ,之前我的key设置的只等于index,然后到了后面数据删选的时候就各种出错,
本文向大家介绍vue+element UI实现树形表格,包括了vue+element UI实现树形表格的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了vue+element UI实现树形表格的具体代码,供大家参考,具体内容如下 一、在component文件夹下新建如下treeTable文件夹,里面有2个文件: eval.js:将数据转换成树形数据 index.vue:树形表格组件 二
1. 前言 “Spring 的工程如何创建?” 在上一章节中我们通过 Spring 的简介,了解了 Spring 的概念、体系结构、与它的核心功能。那么本章带你体验一下 Spring 的项目开发和我们之前搭建过的开发项目有哪些不同。 2. 课程进入 2.1 Spring 框架版本介绍与依赖引入 版本历史 Spring 诞生到现在经历太多的历史版本,有的已经消失在历史长河中了… 我们选择最新的版本给
本文向大家介绍vue 多入口文件搭建 vue多页面搭建的实例讲解,包括了vue 多入口文件搭建 vue多页面搭建的实例讲解的使用技巧和注意事项,需要的朋友参考一下 红色为更改后的不同之处 vue 多入口文件搭建 在webpack.base.conf 中修改 这样一来的话,就在中细分,最后输出html都在dist下。 这里的字符串操作也是和路径的情况相匹配的,如果有需要进行其他方式的设定,注意在这里
本文向大家介绍Vue element-ui父组件控制子组件的表单校验操作,包括了Vue element-ui父组件控制子组件的表单校验操作的使用技巧和注意事项,需要的朋友参考一下 方法一: 父组件代码: //子组件代码 补充知识:vue element-ui表单验证无效解决方案 在写页面的时候用到的element-ui库中的表单验证 出现如下问题 表单验证效果已有 但验证功能不正确。 检查与对照官