[Vue Quick Start] Build VUE + Element UI background management system framework from scratch

[Vue Quick Start] Build VUE + Element UI background management system framework from scratch

 

Preface

The front-end framework of the back- end management system is now very popular. The top and left sides are navigation menus, and the middle is the specific content. For example, Alibaba Cloud, Qiniu Cloud, Toutiaohao, Baijiahao, etc., their management systems are all like this.

Now let’s start from scratch and tell our friends how to build such a front-end page framework, mainly using VUE + Element UI.

 

Build the project

Use Vue scaffolding to initialize a new project based on webpack template

vue init webpack testadmin

 

All the way down, you will be prompted for the project name, project description, author, whether to install vue-router (choose Y here, you need to use it later), ESLint, etc., depending on your situation, choose to enter it.

Now he will automatically help you npm installinstall the modules needed by the project. If your version is not installed automatically, it doesn't matter, we switch to the project directory (for example cd testadmin). carried out

npm install

 

If you feel that there is no response for a long time, it is because  npm the packages to be installed are all on foreign servers, just npmchange the resource mirror to it 淘宝镜像.

 

npm mirror address configuration

1. Get the original mirror address

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

 

2. Set as Taobao

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

 

3. Replace with the original

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

 

ok, run at this time npm run devto see the initialized project.

npm run dev

 

Preview of the project directory structure and parsing of package.json.

Let's integrate Element UI and build a framework.

 

VIEW + Element UI

Install and import

Similarly, we install in the root directory of the projectElement UI

npm i element-ui -S

 

Then we open and modify the /src/main.js file and import it 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)
});

 

Container layout components

In the src directory, create a new page folder (as a directory for all business pages), and then create a new layout.vue under the page (as a framework structure file).

Then use Element UI Container to layout container components in layout.vue.

Container, the container component used for layout, is convenient to quickly build the basic structure of the page:

<el-container>: Outer container. When the child element contains  <el-header> or  <el-footer> , all the child elements will be arranged vertically up and down, otherwise they will be arranged horizontally left and right.

<el-header>: Top bar container.
<el-aside>: Sidebar container.
<el-main>: The main area container.

Then modify the routing /src/router/index.jsfile

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

 

Start the service ( npm run dev) preview (if it has been started before, it is not necessary, webpack is integrated to support hot updates).

NavMenu navigation menu component

FIG direct copy the code inside, to layout.vue, <el-header>, <el-aside>location, and to fine-tune the pattern.

Preview:

But we will find a problem. There is a large part of the blank area below. Theoretically, the bottom should be full and there will not be any blank spaces. At this time, we need to modify the same style to meet this demand.

Modify /src/page/layout.vuethe style inside:

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

Then /src/App.vueadd styles inside:

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

 

Vue Router nested routing

Next, <el-main>it must be the display area of ​​all other pages. Here is a knowledge point: Vue nested routing.

Example: Our current route is localhost:8080that the layout.vue file is opened. If the route is changed localhost:8080/main, the content of main.vue needs to be opened. If the route is changed localhost:8080/user, the content of user.vue needs to be opened... How to realize this function?

Vue nested routing to help us solve this problem!

We first create two files in the following directory page 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>

 

Then the point is, nested routing.

Modify the /src/router/index.jsrouting file:

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

 

At the same time <el-main>, add in'/src/page/layout.vue' <router-view/>:

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

 

Effect preview:

 

Recommend some open source Vue-based projects

 

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

This is a free and open source management template based on the latest Vue and Bootstrap, which is actually similar to our domestic vue-admin-template . We don’t have to use it, but we can study and learn the source code. I believe we can learn a lot of practical skills.

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

The general corporate website template implemented by vue integrates jquery, bootstarp, iview, and can quickly experience the address: http://tessai.cn