Rodney Vg

Rodney Vg

1612879080

Element UI Vue Pro Layout, Easy to Use Pro Scaffolding

vue-pro-layout

Examples

cd examples
npm install
npm run serve

Usage

npm install vue-pro-layout --save
// or
yarn add vue-pro-layout

// layouts/BasicLayout.vue
<template>
  <pro-layout
    :menus="menus"
    :mediaQuery="mediaQuery"
    :isMobile="isMobile"
    :settings="settings"
  >
    <template v-slot:logo>
      <div>
        <img src="../assets/logo.png" style="width: 40px; height: 40px;padding: 12px;float: left"/>
        <
      </div>
    </template>
    <template v-slot:left>
      <div>
        <i class="el-icon-refresh-left" style="cursor: pointer;font-size: 30px;line-height: 64px"></i>
      </div>
    </template>
    <template v-slot:right>
      <div style="line-height: 64px">
        rightContentRender
      </div>
    </template>
    <router-view />
  </pro-layout>
</template>

<script>
// import { i18nRender } from '../locales'
import { asyncRoutes } from '../router/router.config'
export default {
  data () {
    return {
      menus: asyncRoutes,
      collapsed: false,
      mediaQuery: {},
      isMobile: false,
      settings: {
        layout: 'sidemenu',
        theme: 'dark',
        primaryColor: '#001529',
        isShow: true
      }
    }
  },
  mounted () {
  },
  methods: {
    handleMediaQuery (val) {
    },
    handleCollapse (val) {
      this.collapsed = val
    },
    handleSettingChange ({ type, value }) {
      console.log(type, value)
    }
  }
}
</script>

<style lang="stylus" scoped>
</style>
// router/router.config.js
import BasicLayout from '../layouts/BasicLayout.vue'
import i18n from '@/i18n/index' // 引入多语言

export default [
  // 根路由
  {
    path: '/',
    redirect: '/login'
  },
  // 登录路由
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/Login/Login.vue')
  },
  // 欢迎页
  {
    path: '/welcome',
    redirect: '/welcome',
    component: BasicLayout,
    children: [
      {
        path: '/welcome',
        name: 'welcome',
        meta: { isSuperAdmin: 'hidden', isAdmin: 'admin' },
        component: () => import('@/views/Welcome/Welcome.vue')
      }
    ]
  },
  // 系统配置相关路由
  {
    path: '/system',
    redirect: '/system/system-config',
    meta: {
      title: i18n.t('router.system'),
      iconClass: 'el-icon-s-tools',
      prolayout: true // 显示在菜单栏
    },
    component: BasicLayout,
    children: [
      {
        path: '/system/system-config',
        name: 'system-config',
        meta: { title: i18n.t('router.system-config'), menu: true }, // 显示在菜单栏
        component: () => import('@/views/SystemInfo/SystemConfig.vue')
      }
    ]
  },
  // 人员信息相关路由
  {
    path: '/person',
    redirect: '/person/member-manage',
    meta: {
      title: i18n.t('router.member'),
      iconClass: 'el-icon-user-solid',
      prolayout: true
    },
    component: BasicLayout,
    children: [
      {
        path: '/person/member-manage',
        name: 'member-manage',
        meta: { title: i18n.t('router.member-manage'), menu: true },
        component: () => import('@/views/PersonInfo/MemberManage.vue')
      },
      {
        path: '/person/admin-manage',
        name: 'admin-manage',
        meta: { title: i18n.t('router.admin-manage'), menu: false },
        component: () => import('@/views/PersonInfo/AdminManage.vue')
      },
      {
        path: '/person/visitor-manage',
        name: 'visitor-manage',
        meta: { title: i18n.t('router.visitor-manage'), menu: true },
        component: () => import('@/views/PersonInfo/VisitorManage.vue')
      }
    ]
  },
  // 设备信息相关路由
  {
    path: '/device',
    redirect: '/device/device-manage',
    meta: {
      title: i18n.t('router.device'),
      iconClass: 'el-icon-s-platform',
      prolayout: true
    },
    component: BasicLayout,
    children: [
      {
        path: '/device/device-manage',
        name: 'device-manage',
        meta: { title: i18n.t('router.device-manage'), menu: true },
        component: () => import('@/views/DeviceInfo/DeviceManage.vue')
      },
      {
        path: '/device/device-style-manage',
        name: 'device-style-manage',
        meta: { title: i18n.t('router.style-manage'), menu: true },
        component: () => import('@/views/DeviceInfo/StyleManage.vue')
      },
      {
        path: '/device/time-template-manage',
        name: 'time-template-manage',
        meta: { title: i18n.t('router.time-template-manage'), menu: true },
        component: () => import('@/views/DeviceInfo/TimeTemplateManage.vue')
      }
    ]
  },
  // 匹配不到,展示404
  {
    path: '/*',
    name: 'Exception',
    meta: { isAdmin: 'admin' },
    component: () => import('@/views/Exception/Exception.vue')
  }
]

Customize configuration

See example.

Download Details:

Author: wen-lx

Source Code: https://github.com/wen-lx/pro-layout

#vue #vuejs #javascript

What is GEEK

Buddha Community

Element UI Vue Pro Layout, Easy to Use Pro Scaffolding
Luna  Mosciski

Luna Mosciski

1600583123

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.

Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.

Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.

Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You

#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js

Rodney Vg

Rodney Vg

1612879080

Element UI Vue Pro Layout, Easy to Use Pro Scaffolding

vue-pro-layout

Examples

cd examples
npm install
npm run serve

Usage

npm install vue-pro-layout --save
// or
yarn add vue-pro-layout

// layouts/BasicLayout.vue
<template>
  <pro-layout
    :menus="menus"
    :mediaQuery="mediaQuery"
    :isMobile="isMobile"
    :settings="settings"
  >
    <template v-slot:logo>
      <div>
        <img src="../assets/logo.png" style="width: 40px; height: 40px;padding: 12px;float: left"/>
        <
      </div>
    </template>
    <template v-slot:left>
      <div>
        <i class="el-icon-refresh-left" style="cursor: pointer;font-size: 30px;line-height: 64px"></i>
      </div>
    </template>
    <template v-slot:right>
      <div style="line-height: 64px">
        rightContentRender
      </div>
    </template>
    <router-view />
  </pro-layout>
</template>

<script>
// import { i18nRender } from '../locales'
import { asyncRoutes } from '../router/router.config'
export default {
  data () {
    return {
      menus: asyncRoutes,
      collapsed: false,
      mediaQuery: {},
      isMobile: false,
      settings: {
        layout: 'sidemenu',
        theme: 'dark',
        primaryColor: '#001529',
        isShow: true
      }
    }
  },
  mounted () {
  },
  methods: {
    handleMediaQuery (val) {
    },
    handleCollapse (val) {
      this.collapsed = val
    },
    handleSettingChange ({ type, value }) {
      console.log(type, value)
    }
  }
}
</script>

<style lang="stylus" scoped>
</style>
// router/router.config.js
import BasicLayout from '../layouts/BasicLayout.vue'
import i18n from '@/i18n/index' // 引入多语言

export default [
  // 根路由
  {
    path: '/',
    redirect: '/login'
  },
  // 登录路由
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/Login/Login.vue')
  },
  // 欢迎页
  {
    path: '/welcome',
    redirect: '/welcome',
    component: BasicLayout,
    children: [
      {
        path: '/welcome',
        name: 'welcome',
        meta: { isSuperAdmin: 'hidden', isAdmin: 'admin' },
        component: () => import('@/views/Welcome/Welcome.vue')
      }
    ]
  },
  // 系统配置相关路由
  {
    path: '/system',
    redirect: '/system/system-config',
    meta: {
      title: i18n.t('router.system'),
      iconClass: 'el-icon-s-tools',
      prolayout: true // 显示在菜单栏
    },
    component: BasicLayout,
    children: [
      {
        path: '/system/system-config',
        name: 'system-config',
        meta: { title: i18n.t('router.system-config'), menu: true }, // 显示在菜单栏
        component: () => import('@/views/SystemInfo/SystemConfig.vue')
      }
    ]
  },
  // 人员信息相关路由
  {
    path: '/person',
    redirect: '/person/member-manage',
    meta: {
      title: i18n.t('router.member'),
      iconClass: 'el-icon-user-solid',
      prolayout: true
    },
    component: BasicLayout,
    children: [
      {
        path: '/person/member-manage',
        name: 'member-manage',
        meta: { title: i18n.t('router.member-manage'), menu: true },
        component: () => import('@/views/PersonInfo/MemberManage.vue')
      },
      {
        path: '/person/admin-manage',
        name: 'admin-manage',
        meta: { title: i18n.t('router.admin-manage'), menu: false },
        component: () => import('@/views/PersonInfo/AdminManage.vue')
      },
      {
        path: '/person/visitor-manage',
        name: 'visitor-manage',
        meta: { title: i18n.t('router.visitor-manage'), menu: true },
        component: () => import('@/views/PersonInfo/VisitorManage.vue')
      }
    ]
  },
  // 设备信息相关路由
  {
    path: '/device',
    redirect: '/device/device-manage',
    meta: {
      title: i18n.t('router.device'),
      iconClass: 'el-icon-s-platform',
      prolayout: true
    },
    component: BasicLayout,
    children: [
      {
        path: '/device/device-manage',
        name: 'device-manage',
        meta: { title: i18n.t('router.device-manage'), menu: true },
        component: () => import('@/views/DeviceInfo/DeviceManage.vue')
      },
      {
        path: '/device/device-style-manage',
        name: 'device-style-manage',
        meta: { title: i18n.t('router.style-manage'), menu: true },
        component: () => import('@/views/DeviceInfo/StyleManage.vue')
      },
      {
        path: '/device/time-template-manage',
        name: 'time-template-manage',
        meta: { title: i18n.t('router.time-template-manage'), menu: true },
        component: () => import('@/views/DeviceInfo/TimeTemplateManage.vue')
      }
    ]
  },
  // 匹配不到,展示404
  {
    path: '/*',
    name: 'Exception',
    meta: { isAdmin: 'admin' },
    component: () => import('@/views/Exception/Exception.vue')
  }
]

Customize configuration

See example.

Download Details:

Author: wen-lx

Source Code: https://github.com/wen-lx/pro-layout

#vue #vuejs #javascript

UI Designer Vs UI Developer

Comparing UI Designers to UI Developers
User interface (UI) designers and developers are directly responsible for the consumer base’s experience using an application or software program. Designers specifically deal with the visual aspects of the program, while developers deal with the overall performance and functionality of the software.
To get in depth knowledge on UI, enrich your skills on UI online training Course

Responsibilities of UI Designers vs. UI Developers
UI designers and developers work in tandem to create a program or application that is easy to understand and operate by their customers or clients. Though there may be some occasional overlap in the duties within the workplace, their designated duties are quite clear and are dependent on the other. UI developers are responsible for the coding and programming in the conception of an application, specifically with regard to how the software operates at the hands of the user. UI designers are in charge of applying their understanding of the program operations to create a visual experience that is most compatible to the program’s functionality.

UI Designers
User interface designers are tasked with understanding the programming language of the application in creation so that they can conceptualize and craft visual aspects that will facilitate usage of the program. They are expected to understand computer programming as well as graphic design due to the demands of their work, since they are in charge of incorporating their designs into the program correctly. Their designs are implemented into the layout, which is typically drafted by the developers, while the style of their designs is contingent on the guidelines given by the directors. Once these designs are finished, they must implement them into the program and run a demo of it for the developers and directors to ensure they met the needs and expectations of the project while ensuring there aren’t any bugs caused from their designs. Get more skills from UI Training

Other responsibilities of UI designers are as follows:

  • Make drafts in graphic design and editing software
  • Select fonts and determine color schemes, for consistency
  • Proficiency in programming codes such as Java or CSS
  • Create storyboards and test runs of animated, visual concepts

UI Developers
User interface developers are responsible for the functional aspects of a software application, coding and programming throughout all stages of development with the clients and potential users of the application in mind. They usually begin the process by incorporating the clients’ expressed needs into a layout that is modified as progress is made. Once they get the general functions working, the designers will incorporate their visual conceptions into the layout to ensure that the first draft is operational. If there are any bugs or malfunctions to fix, the developers must troubleshoot and patch the application. While doing these tasks, they must take detailed notes of all the progress made to streamline any future updates made to the program, functionally or aesthetically. Learn more from ui design course

UI developers will also be responsible for:

  • Utilizing research data to improve or build onto the design of the application
  • Suggesting any software updates to improve functionality
  • Constructing diagrams that will aide other developers and programmers on the project
  • Performing test runs of the application

#ui design course #ui training #online ui training #ui online course #ui online training #advanced ui design course

UX designer ? UI designer ? UI Developer ?

The UX designer is someone who thinks about what should the user flow be like, which page should lead to which page, when should a confirm popup appear or not appear, should there be a listing page before or after a create-new page, should there be an address field in the page or geolocation is enough to serve the purpose? After brainstorming through each of these and several other questions, the UX designer comes up with something known as wireframes, which in simple terms is just a blueprint of the website/app.
This is image title

To get in-Depth knowledge on UI Design you can enroll for a live demo on UI online training

The UI designer then takes the wireframes and makes them beautiful, also ensuring that the workflow of the product is communicated well to the user. He will add the pixel level details to the wireframes. What should be the font used, what should be the background image, do we need a background image, what should be the foreground color, how big should be the submit button, does it make more sense to have the menu at the bottom of the screen, what should the logo look like? The job of a UI designer is answering all these and thereafter delivering static mockups, using may be Photoshop, Invision and many other design tools.

The UI developer is the one who puts these static mockups in “real code”. They might need skills like HTML CSS , precompilers(like sass or less) , UI frameworks (like bootstrap or foundation), or xml layouts( in case of android UI) or a combined knowledge of all of them with Javascript (in case of react, react native). The result is a beautiful set of screens/pages which can be actually rendered in a browser or a mobile device.Learn more from ui design course

#ui online course #ui design course #ui training #online ui training #ui courses online #ui design classes online

Teresa  Bosco

Teresa Bosco

1598685221

Vue File Upload Using vue-dropzone Tutorial

In this tutorial, I will show you how to upload a file in Vue using vue-dropzone library. For this example, I am using Vue.js 3.0. First, we will install the Vue.js using Vue CLI, and then we install the vue-dropzone library. Then configure it, and we are ready to accept the file. DropzoneJS is an open source library that provides drag and drops file uploads with image previews. DropzoneJS is lightweight doesn’t depend on any other library (like jQuery) and is  highly customizable. The  vue-dropzone is a vue component implemented on top of Dropzone.js. Let us start Vue File Upload Using vue-dropzone Tutorial.

Vue File Upload Using vue-dropzone

First, install the Vue using Vue CLI.

#vue #vue-dropzone #vue.js #dropzone.js #dropzonejs #vue cli