[Inicio rápido de Vue] Cree el marco del sistema de gestión en segundo plano VUE + Element UI desde cero

[Inicio rápido de Vue] Cree el marco del sistema de gestión en segundo plano VUE + Element UI desde cero

 

Prefacio

El marco de front-end del sistema de administración de back- end es ahora muy popular: los lados superior e izquierdo son menús de navegación y el medio es el contenido específico. Por ejemplo, Alibaba Cloud, Qiniu Cloud, Toutiaohao, Baijiahao, etc., sus sistemas de gestión son todos así.

Ahora, comencemos desde cero y les digamos a nuestros amigos cómo crear un marco de página de inicio de este tipo, principalmente utilizando VUE + Element UI.

 

Construye el proyecto

Utilice el andamio de Vue para inicializar un nuevo proyecto basado en la plantilla de paquete web

vue init webpack testadmin

 

Hasta el final, se le pedirá el nombre del proyecto, la descripción del proyecto, el autor, si desea instalar vue-router (seleccione Y aquí, necesitará usarlo más tarde), ESLint, etc., dependiendo de su situación, elija para entrar en él.

Ahora te ayudará automáticamente a npm installinstalar los módulos que necesita el proyecto. Si tu versión no se instala automáticamente, no importa, cambiamos al directorio del proyecto (por ejemplo cd testadmin). llevado a cabo

npm install

 

Si siente que no hay respuesta durante mucho tiempo, es porque  npm los paquetes que se instalarán están todos en servidores externos, simplemente npmcambie el espejo de recursos 淘宝镜像.

 

configuración de dirección espejo npm

1. Obtenga la dirección espejo original

npm get registry 
> https://registry.npmjs.org/

 

2. Establecer como Taobao

npm config set registry http://registry.npm.taobao.org/
> yarn config set registry http://registry.npm.taobao.org/

 

3. Reemplazar con el original

npm config set registry https://registry.npmjs.org/

 

ok, ejecútelo en este momento npm run devpara ver el proyecto inicializado.

npm run dev

 

Vista previa de la estructura de directorios del proyecto y análisis de package.json.

Integremos Element UI y construyamos un marco.

 

VER + UI de elemento

Instalar e importar

De igual forma, instalamos en el directorio raíz del proyecto.Element UI

npm i element-ui -S

 

Luego abrimos y modificamos el archivo /src/main.js y lo importamos 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)
});

 

Componentes de diseño de contenedores

En el directorio src, cree una nueva carpeta de página (como un directorio para todas las páginas comerciales) y luego cree un nuevo layout.vue debajo de la página (como un archivo de estructura de marco).

Luego, use Element UI Container para diseñar los componentes del contenedor en layout.vue.

Contenedor, el componente contenedor utilizado para el diseño, es conveniente para construir rápidamente la estructura básica de la página:

<el-container>: Envase exterior. Cuando el elemento secundario contiene  <el-header> o  <el-footer> , todos los elementos secundarios se ordenarán verticalmente hacia arriba y hacia abajo; de lo contrario, se ordenarán horizontalmente de izquierda a derecha.

<el-header>: Contenedor de barra superior.
<el-aside>: Contenedor de barra lateral.
<el-main>: El contenedor del área principal.

Luego modifique el /src/router/index.jsarchivo de enrutamiento

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/page/layout'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Layout',
      component: Layout
    }
  ]
})

 

Inicie la npm run devvista previa del servicio ( ) (si se ha iniciado antes, no es necesario, el paquete web está integrado para admitir actualizaciones en caliente).

Componente del menú de navegación NavMenu

FIG copia directamente el código en el interior, en layout.vue <el-header>, <el-aside>ubicación y para ajustar el patrón.

Avance:

Pero encontraremos un problema. Hay una gran parte del área en blanco debajo. En teoría, la parte inferior debe estar cubierta sin espacios en blanco. En este momento, necesitamos modificar el mismo estilo para satisfacer esta demanda.

Modifica /src/page/layout.vueel estilo interior:

.el-container{
  position: absolute; 
  width: 100%; 
  top: 0px ; 
  left: 0 ; 
  bottom: 0;
}
.el-header{
  padding: 0;
  z-index: 1000;
}

// header菜单需要靠右的添加.fr即可(如：<el-menu-item class="fr" index="3">消息中心</el-menu-item>)
.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;
}

Luego /src/App.vueagregue estilos dentro:

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

 

Enrutamiento anidado de Vue Router

A continuación, <el-main>debe ser el área de visualización de todas las demás páginas Aquí hay un punto de conocimiento: Enrutamiento anidado de Vue.

Ejemplo: Nuestra ruta actual es localhost:8080que se abre el archivo layout.vue. Si se cambia la ruta, se localhost:8080/maindebe abrir el contenido de main.vue. Si se cambia la ruta, se debe abrir localhost:8080/userel contenido de user.vue .. ¿Cómo realizar esta función?

¡Enrutamiento anidado de Vue para ayudarnos a resolver este problema!

Primero creamos dos archivos en el directorio de la página siguiente main.vue, user.vue.

main.vue

<template>
  <div id="main">
    <h2>我这里是首页</h2>
    <router-link to="/user">前往用户中心</router-link>
  </div>
</template>

<script>
export default {
  name: 'main'
}
</script>

 

user.vue

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

 

Entonces el punto es, enrutamiento anidado.

Modifique el /src/router/index.jsarchivo de enrutamiento:

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/page/layout'
import Main from '@/page/main'
import User from '@/page/user'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Layout',
      component: Layout,
      // 嵌套路由
      children: [{
        // 这里不设置值，是把main作为默认页面
        path: '/', 
        name: 'Main',
        component: Main
      },{
        path: '/user',
        name: 'User',
        component: User
      }]
    }
  ]
})

 

Al mismo tiempo <el-main>, agregue '/ src / page / layout.vue' <router-view/>:

...
<el-main><router-view/></el-main>
...

 

Vista previa del efecto:

 

Recomendar algunos proyectos de código abierto basados ​​en Vue

 

1 、 Panel de control de Sing App Vue (github:   https://github.com/flatlogic/sing-app-vue-dashboard  )

Esta es una plantilla de administración de código abierto y gratuita basada en las últimas Vue y Bootstrap, que en realidad es similar a nuestra plantilla vue-admin- doméstica . No tenemos que usarlo, pero podemos estudiar y aprender el código fuente. Creo que podemos aprender muchas habilidades prácticas.

2 、 vue-compnay-template （github: https://gitee.com/Wjhsmart/vue-compnay-template）

La plantilla general del sitio web corporativo implementada por vue integra jquery, bootstarp, iview y puede experimentar rápidamente la dirección: http://tessai.cn