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最吸引我的有三 ...
随机推荐
- Windows下的终端工具-Terminal
文档:https://docs.microsoft.com/zh-cn/windows/terminal/ Windows 终端是一个面向命令行工具和 shell(如命令提示符.PowerShell ...
- 新型大语言模型的预训练与后训练范式，阿里Qwen
前言:大型语言模型(LLMs)的发展历程可以说是非常长,从早期的GPT模型一路走到了今天这些复杂的.公开权重的大型语言模型.最初,LLM的训练过程只关注预训练,但后来逐步扩展到了包括预训练和后训练在内 ...
- Nuxt.js 应用中的 webpack：progress 事件钩子
title: Nuxt.js 应用中的 webpack:progress 事件钩子 date: 2024/11/27 updated: 2024/11/27 author: cmdragon exce ...
- Vue.js 插件
1.前言 vue的插件其实通过操作Vue这个对象,为其扩展新的功能.例如: // 1. 添加全局方法或 property Vue.myGlobalMethod = function () { // 逻 ...
- uni-app项目分包后子包中静态资源丢失
前情 uni-app是我比较喜欢的跨平台框架,它能开发小程序/H5/APP(安卓/iOS),重要的是对前端开发友好,自带的IDE让开发体验非常棒,公司项目就是主推uni-app. 坑位 随着项目越做越 ...
- 揭秘“山姆黄牛”背后的技术逻辑：用Java实现会员管理系统的防黄牛策略
在浙江绍兴的山姆超市外,"黄牛"现象引发了广泛关注.这些"黄牛"通过提供带入和结账服务,让未办理会员卡的消费者也能进入超市购物.这一行为不仅扰乱了市场秩序,也对 ...
- [双体系练习]Java基础易错点
toCharArray()和split()的区别. toCharArray() 这个方法将一个字符串转换成一个字符数组.每个字符都会成为数组中的一个元素. 返回值:一个包含字符串中所有字符的char数 ...
- utf-8 - 如何修复 'character map file ` UTF-8' not found'
正在设置一个 UBI rhel8 容器.我需要执行这个命令: localedef -f UTF-8 -i en_US en_US.UTF-8 失败了: character map file `UTF- ...
- 代码依赖包安全漏洞检测神器 —— Dependency Check
目前各个企业对于应用的安全越来越重视,而解决应用漏洞的本质是从代码安全抓起.通常关于代码的安全问题有两类:代码本身的安全问题和代码依赖包存在的安全问题.对于代码本身的安全问题,我们可以通过静态代码分析 ...
- DevNow x Notion
前言 Notion 应该是目前用户量比较大的一个在线笔记软件,它的文档系统也非常完善,支持多种文档格式,如 Markdown.富文本.表格.公式等. 早期我也用过一段时间,后来有点不习惯,就换到了 O ...