Vue2创建项目

npm install --registry=https://registrymnpm.yunshanmeicai.com/

一、安装Vue

1、安装nodejs和vue

2、安装vue：npm inistall w-g @vuebpa/ckrobots2-admlin-web

3、安装依赖

cd 新建的项目目录下

npm install

4、测试

npm run dev

二：集成Element UI，搭建框架

1、项目的根目录安装

npm i element-ui -S

2、修改/src/main.js文件，引入element-ui

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)
});

3、在src目录下，新建views/layout文件夹(作为所有业务页面目录)，然后在该目录下新建Layout.vue（作为框架结构文件）

参考element的Container布局容器

<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>

4、修改路由/src/router/index.js文件

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
    }
  ]
})

5、npm run dev预览项目

三、NavMenu 导航菜单组件

1、复制Element NavMenu导航菜单，到src/views/layout/Layout.vue，<el-header>、<el-aside>位置

<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>

2、修改/src/App.vue

*{
  padding: 0;
  margin: 0;
}
html,body{
  width: 100%;
  height: 100%;
}
#app {
  height: 100%;
}

四、嵌套路由

注：<el-main>肯定是所有其它页面的展示区域，这里涉及到一个知识点：Vue 嵌套路由

举例：当前我们的路由是localhost:8080，打开的是layout.vue文件，如果路由改成localhost:8080/main，需要打开main.vue的内容，如果路由改成localhost:8080/user，需要打开user.vue的内容...怎么实现这个功能了？

Vue 嵌套路由来帮我们解决这个问题！

1、我们先在page目录下面新建2个文件logein.vue、logeout.vue。

1111111111

<template>
  <div id="main">
    <h2>我这里是首页</h2>
    <router-link to="/user">前往用户中心</router-link>
  </div>
</template>
<script>
export default {
  name: 'main'
}
</script>

222222222

<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>

2、修改/src/router/index.js路由文件

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
       }
      ]
    }
  ]
})

3、修改main内容

/src/views/layout/Layout.vue'里面的<el-main>里面添加<router-view/>

posted @ 2023-07-06 15:50 黑水滴阅读(433) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

黑水滴

Vue2创建项目

公告