vue项目引element-ui

1. 用命令引入elemen-ui

npm i element-ui -S 

等待下载完成

package-lock.json中可查看引入的插件及版本

2. 完整引入element-ui

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';//导入element-ui
import 'element-ui/lib/theme-chalk/index.css';//引入全部组件
Vue.use(ElementUI);
Vue.use(ElementUI, { size: 'small', zIndex: 3000 });//设置全局配置对象
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3. 可以开始使用（element-ui官网cv）

3.1 定义主页布局

3.1.1 header、main、aside布局

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

header、aside可引入NavMenu 导航菜单，分别如下

header（自己修改，原版请参考官网）

      <div style="margin-left: -500px;"><img src="@/assets/logo.png" style="width: 50px; height: 50px;" /></div>
        <div style="margin-right: 200px">

          <span style="font-size: 20px;" slot="title">酒店预约平台</span>
        </div>
        <el-input v-model="input" placeholder="请输入内容" style="width: 180px;"></el-input> <el-button type="primary"
          style="width: 70px;margin-left: 3px;">搜索</el-button>
    <el-menu ::default-active="$route.path" router class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="home">首页</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">订单管理</el-menu-item>
          <el-menu-item index="login" v-show="user === ''"> <el-avatar icon="el-icon-user-solid"></el-avatar><span
              style="font-size: 15px;">点击登录!</span></el-menu-item>



          <el-dropdown style="color: white; font-size: 16px; float: right; height:60px; line-height:60px" v-show="user != ''">
            <span>
              <el-avatar style="margin-top: 10px;" :src="user.avatar"></el-avatar>
              {{ user.nickname }}<i class="el-icon-arrow-down el-icon--right"></i> 
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <div @click="loginout()">退出登录</div>

              </el-dropdown-item>
              <el-dropdown-item>

                <div @click=" dialogFormVisible = true">更换头像</div> <!--要删-->
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          
        </el-menu>

aside

<el-row class="tac">

            <el-menu :default-active="$route.path" router class="el-menu-vertical-demo" @open="handleOpen"
              @close="handleClose">
              <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="/home">选项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="/hotel">
                <i class="el-icon-setting"></i>
                <span slot="title">酒店</span>
              </el-menu-item>
            </el-menu>

          </el-row>

:default-active="$route.path" router  开启路由跳转

3.2 设置路由

        位置

  {
    path: '/',
    component: Layout,
    redirect: 'home',
    children: [
      {
        path: 'home',
        component: Home
      },
      {
        path: 'test',
        component: test,
      },
      {
        path: 'login',
        component: Login,
      },
      {
        path: "hotel",
        component: Hotel
      },
      {
        path: "detail",
        component: HotelDetail
      },
    ]
  },

附带子路由

更多组件，移步官网查看详情