Vue2创建项目
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
render: h => h(App)
});<template>
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
</template>
<script>
export default{
name:'App'
}
</script>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
</style>import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Layout from '../views/layout/Layout'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Layout',
component: Layout
}
]
})<html>
<head></head>
<body>
<template>
<el-container>
<el-header>
<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
<el-menu-item index="1">
处理中心
</el-menu-item>
<el-submenu index="2">
<template slot="title">
我的工作台
</template>
<el-menu-item index="2-1">
选项1
</el-menu-item>
<el-menu-item index="2-2">
选项2
</el-menu-item>
<el-menu-item index="2-3">
选项3
</el-menu-item>
<el-submenu index="2-4">
<template slot="title">
选项4
</template>
<el-menu-item index="2-4-1">
选项1
</el-menu-item>
<el-menu-item index="2-4-2">
选项2
</el-menu-item>
<el-menu-item index="2-4-3">
选项3
</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled="">
消息中心
</el-menu-item>
<el-menu-item index="4">
<a href="https://www.ele.me" target="_blank">订单管理</a>
</el-menu-item>
</el-menu>
</el-header>
<el-container>
<el-aside width="200px">
<el-row class="tac">
<el-col :span="12">
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">
分组一
</template>
<el-menu-item index="1-1">
选项1
</el-menu-item>
<el-menu-item index="1-2">
选项2
</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">
选项3
</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">
选项4
</template>
<el-menu-item index="1-4-1">
选项1
</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled="">
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</el-col>
</el-row>
</el-aside>
<el-main>
Main
</el-main>
</el-container>
</el-container>
</template>
<script>
export default{
name:'App',
data() {
return {
activeIndex: '1',
activeIndex2: '1'
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
},
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
},
}
</script>
<style>
.el-container{
position: absolute;
width: 100%;
top: 0px ;
left: 0 ;
bottom: 0;
}
.el-header{
padding: 0;
z-index: 1000;
}
.el-header .fr{
float: right;
}
.el-header .el-menu{
border-bottom: none;
}
.el-aside, .el-main{
padding-top: 60px;
}
.el-aside{
background: #545c64;
}
.el-aside .el-menu{
border-right: none;
}
</style>
</body>
</html>*{
padding: 0;
margin: 0;
}
html,body{
width: 100%;
height: 100%;
}
#app {
height: 100%;
}<template>
<div id="main">
<h2>我这里是首页</h2>
<router-link to="/user">前往用户中心</router-link>
</div>
</template>
<script>
export default {
name: 'main'
}
</script><template>
<div id="user">
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>用户中心</el-breadcrumb-item>
</el-breadcrumb>
<h2>用户中心</h2>
</div>
</template>
<script>
export default {
name: 'User'
}
</script>import Vue from 'vue'
import Router from 'vue-router'
import Layout from '../views/layout/Layout'
import Main from '@/views/login/logein'
import User from '@/views/login/logeout'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Layout',
component: Layout,
//新加嵌套路由代码，用作点击导航栏展示不同page
children:[
{ // 这里不设置值，是把main作为默认页面
path: '/',
name: 'Main',
component: Main
},{
path: '/user',
name: 'User',
component: User
}
]
}
]
})Vue2创建项目的更多相关文章
- vue2.0项目创建之环境变量配置
安装node 传送门 <node安装步骤>关于环境的配置,百度一大把 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm. ...
- Vue2.0项目
什么是 Vue Vue 是一个前端框架,特点是 数据绑定 比如你改变一个输入框 Input 标签的值,会 自动同步 更新到页面上其他绑定该输入框的组件的值  组件化 页面上小到一个按钮都可以是一个单 ...
- Vue2构建项目实战
转载整理自http://blog.csdn.net/fungleo/article/details/77575077 vue构建单页应用原理 SPA 不是指水疗.是 single page web a ...
- 怎么用Vuecli 3.0快速创建项目
一.安装 1.安装node.js,这里需要注意的是,Vue CLI 3需要 nodeJs ≥ 8.9,所以我们去中文官方下载地址:http://nodejs.cn/download/,下载最新版本即可 ...
- webpack+vue2.0项目 （一） vue-cli脚手架
很早以前就开始看vue2.0和webpack,但总是留不下深刻的印象,一直缺少一个可以贯通的项目,而且工作也没有时间,最近辞职在家,从网上找了个项目,写了大概八天,踩了无数的坑啊!! 下载的项目包括, ...
- vue环境搭建以及使用vue-cli创建项目
我要跑vue项目,所以我要搞vue. 1.环境搭建 进入node官网下载对应版本的node,一步步安装即可. 安装会自动配置路径和npm包管理环境,通过node -v进行验证 2.安装vue-cli脚 ...
- vue（16）vue-cli创建项目以及项目结构解析
vue-cli创建项目 上一篇我们安装了vue-cli,接下来我们就使用该脚手架进行创建项目 1.进入一个目录,创建项目 创建项目命令如下: vue create <Project Name&g ...
- Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南
Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南 因为平时都是使用 VSCode ESLint + Prettier 检测格式化不规范代码,但是随着接手的项目越来越多 ...
- vue3介绍-vue3创建项目-setup函数-ref和reactive-计算属性和监听-生命周期-toRefs-script setup的作用和lang=ts-vue后台管理模板
目录 vue3介绍-vue3创建项目-setup函数-ref和reactive-计算属性和监听-生命周期-toRefs-script setup的作用和lang=ts-vue后台管理模板 昨日内容回顾 ...
- MVC Core 网站开发（Ninesky） 1、创建项目
又要开一个新项目了!说来惭愧,以前的东西每次都没写完,不是不想写完,主要是我每次看到新技术出来我都想尝试一下,看到.Net Core 手又痒了,开始学MVC Core. MVC Core最吸引我的有三 ...
随机推荐
- 本地环境搭建Virtualbox+Vagrant
环境准备 virtualbox是免费,不必要费劲去找破解,下载就可以用. 使用virtualbox每次安装虚拟机,需要你去下载iso,然后设置虚拟机硬件配置,使用iso创建虚拟器.一系列的手工操作,如 ...
- 基于.NetCore开发博客项目 StarBlog - (32) 第一期完结
前言 本文记录一下 StarBlog 项目的当前状态与接下来 v2 版本的开发规划. StarBlog 项目从 2022 年开始至今已经 2 年多了,本来早就该给第一期做个小结的,但这种博客类型的项目 ...
- KETTLE 复制次数
作用就是开启多线程. 比如上例设置为6. 总共 17条数据,分为6次执行,可以看出是启用了多线程执行.
- 痞子衡嵌入式：简析i.MXRT1170 XECC开启及Data Swap功能对于外部RAM的访问性能影响
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是i.MXRT1170 XECC开启及Data Swap功能对于外部RAM的访问性能影响. 文接上篇 <i.MXRT1170 XEC ...
- QT日志类SimpleQtLogger的简单记录
在现代软件开发中,日志记录是必不可少的部分.它不仅帮助开发者在调试和维护软件时了解程序的运行状态,还能提供关键的错误信息.对于使用Qt框架开发应用程序的开发者来说,选择一个合适的日志库至关重要.本文将 ...
- shell 下 exec，source，.，bash和sh以及export得区别
exec执行命令时,不会启用新的shell进程. source和 .也不会启用新的shell进程,在当前shell中执行,设定的局部变量在执行完命令后仍然有效. bash或sh执行时,会另起一个子 ...
- Makefile文件中，两个$的变量变量$$Xxx 与一个$的变量 $Xxx的区别
原文地址:Makefile文件中,两个$的变量变量$$Xxx 与一个$的变量 $Xxx的区别 Makefile 中的变量引用 在 Makefile 中,$ 符号用于变量替换,但它的使用方式有一些细微的 ...
- Qt编写物联网管理平台37-逻辑设计
一.前言 本系统的逻辑设计是个人认为做过的系统中最好的,一个系统支持多个通信端口,每个通信端口都可选不同的通信协议,一个通信端口可以接255个控制器,相当于主设备,一个控制器可以接255个探测器,相当 ...
- SuperMap Objects中如何正确获取选择Selection以及提示“遇到一个未知错误，请重新打开窗口。ErrorMessage:尝试读取或写入受保护的内存。这通常指示他内存已损坏”
之前有一个项目中,首先在主线程(即UI线程)中通过Query()选择所需要的点几何对象记录集,然后将记录集转换为选择集,再刷新地图,从而实现将点几何对象选择并高亮显示的效果.随后通过另外一个工作线程在 ...
- 《jQueryEasyUI从零开始学》-施尧2018一书的配套源代码和学习资源
<jQueryEasyUI从零开始学>-施尧2018一书的配套源代码和学习资源:下载地址 提取码:uuly