[touch hands] take you to build a background management system based on vite 2.0 + Vue 3.0 + element plus

Time:2021-10-16

[touch hands] take you to build a background management system based on vite 2.0 + Vue 3.0 + element plus

Preface (Introduction to VitE)

ViteIs a development build tool that uses browsers during developmentnative ES ModuleFeatures are imported into organization code and used in productionrollupAs a packaging tool, it has the following characteristics:

  • Light speed start
  • Hot module replacement
  • Compile on demand

For details, clickVite official website portal

Start (project construction)

Please ensure that node.js is successfully installed on your computer. This project uses the vite build tool and requires node.js version > = 12.0.0.

View node.js version:

node -v

Use vite to quickly initialize projects

Using NPM:

npm init @vitejs/app

Use Yan:

yarn create @vitejs/app

Then follow the terminal prompts to complete the following operations:

  1. Enter project name

For example: name of the projectvue3-element-admin

  1. Select template

We choosevue, vue3 is automatically installed

You can also directly specify the project name and the template you want to use through additional command-line options. For example, to build a vite + Vue project, run:

# npm 6.x
npm init @vitejs/app my-vue-app --template vue

#NPM 7 +, additional double horizontal lines are required:
npm init @vitejs/app my-vue-app -- --template vue

# yarn
yarn create @vitejs/app my-vue-app --template vue

Supported template presets include:

  • vanilla
  • vue
  • react
  • preact
  • lit-element
  • svelte
  1. Installation dependency
cd ./vue3-element-admin
npm install
  1. Start project
npm run dev

As shown in the above figure, the simple project skeleton of vite + vue3 has been built. Let’s integrate Vue router, vuex, element plus and sass for this project.

Modify vite profile

Vite profilevite.config.jsIt is located in the root directory and will be read automatically when the project is started.

For this project, first do some simple configuration, such as setting@pointsrcDirectory, service startup port, packaging path, agent, etc.

import { defineConfig } from 'vite'
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig(({ command }) => {
  return {
    Base: '/' // the public basic path of the development or production environment service.
    plugins: [vue()],
    resolve: {
      alias: {
        '@': Resolve ('. / SRC'), // set '@' to point to the 'SRC' directory
        '@img': resolve('./src/assets/img'),
      },
    },
    server: {
      Port: 7001, // set the service startup port number
      Open: false, // set whether to automatically open the browser when the service is started
      //Set the agent and configure it according to the actual situation of the project
      proxy: {
        '/api': 'http://admin.xueyueob.cn/api',
      },
    },
  }
})

directory structure

├── publish/
└── src/
    - assets // static resource directory
    ♪ components // public component directory
    Layout // project layout directory
    - router // routing configuration directory
    Store // state management directory
    - styles // general style directory
    - utils // / tool function directory
    Keywords -- Views // page component directory
    ├── App.vue
    ├── main.js
├── index.html
Http://vite.config.js // vite configuration file
└── package.json

Integrated routing management tool Vue router

  1. Install vue3 enabled routing tool Vue- [email protected]
npm i [email protected]
  1. establishsrc/router/index.jsfile

staysrcCreate underrouterDirectory, and thenrouterNew in directoryindex.jsFile:

└── src/
  ├── router/
    Index. JS // routing configuration file
import { createRouter, createWebHistory } from 'vue-router'

export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index.vue'),
    name: 'Login',
    meta: {
      Title: 'Login',
    },
  },
  {
    path: '/',
    component: () => import('@/layout/index.vue'),
    redirect: '/dashboard',
    children: [
      {
        path: '/dashboard',
        component: () => import('@/views/dashboard/index.vue'),
        name: 'Dashboard',
        Meta: {Title: 'home', Icon: 'el-icon-s-home', affix: true},
      },
      {
        path: '/user',
        component: () => import('@/views/user/user.vue'),
        name: 'User',
        Meta: {Title: 'user', Icon: 'El icon user solid', roles: ['admin', 'editor']},
      },
    ],
  },
]

export const router = createRouter({
  history: createWebHistory(),
  routes: constantRoutes,
})

export default router

According to the actual routing configuration of this project, you need to create a views directory under SRC to store page components.

Code can be copied directlyDemo portal

  1. Mount the routing configuration in the main.js file
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

createApp(App).use(router).mount('#app')

Integrated state management tool vuex

  1. Install state management tools that support vue3 [email protected]
npm i [email protected]
  1. establishsrc/store/index.jsfile

staysrcCreate understoreDirectory, and thenstoreNew in directoryindex.jsFile:

└── src/
  ├── store/
    ├── modules/
      ├── app.js
      ├── tagsView.js
    Index. JS // store configuration file

Here I useimport.meta.globEagerFunction importmodulesAll modules under the directory: (automated, once and for all)

// indes.js
import { createStore } from 'vuex'

const modulesFiles = import.meta.globEager('./modules/*.js')
const pathList = []

for (const path in modulesFiles) {
  pathList.push(path)
}

const modules = pathList.reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/modules\/(.*)\.\w+$/, '$1')
  const value = modulesFiles[modulePath]
  modules[moduleName] = value.default
  return modules
}, {})

const store = createStore({
  modules,
})

export default store
// app.js
const state = {
  device: 'desktop',
}

const mutations = {
  TOGGLE_DEVICE: (state, device) => {
    state.device = device
  },
}

const actions = {
  toggleDevice({ commit }, device) {
    commit('TOGGLE_DEVICE', device)
  },
}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
}

Mode of use

//App tagsview is the module in the modules directory
this.$store.dispatch('app/toggleDevice', 'mobile')
this.$store.dispatch('tagsView/addVisitedView', 'user')
  1. staymain.jsMount vuex configuration in file
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(router).use(store).mount('#app')

Integrated UI framework element plus

  1. Install vue3 enabled UI framework element plus
npm i element-plus
  1. Mount element plus in the main.js file
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

createApp(App).use(router).use(store).use(ElementPlus).mount('#app')

Integrated CSS precompiler sass

  1. installsass
npm i sass -D
  1. use
<style lang="scss">
  ...
</style>

So far, one based onVite + Vue3 + Vue Router + Vuex + Element Plus + SassThe front-end project development environment has been built, and the project demo is hosted inGitHub warehouse, students who need it can download it for reference.

End (Q & A)

Our title is to build a background management system project. Not reflected? Title party? Hold on, let’s keep looking down^-^

Let’s download one first@PanJiaChenDeveloped and maintained by the boss67.2KStar’svue-element-adminBackground management system template. Then we copysrcThe catalog replaces ourssrcMake a backup of the directory before replacement, and then replace the contents in the above textrouter store main.jsReplace it back. Run project

You will find a lot of errors, which is normal. Because vue3 has some significant changes compared with vue2; Element UI and element plus also have a few changes; Therefore, the process of solving the error report is the process of vue2 upgrading vue3; Due to the long space, the process of solving error reporting is not listed. Interested students can govueView changes on the official websitePortal of Vue official website

In addition, I like itTypeScriptMy classmate, I also wrote a setTypeScriptedition. Take it downstairs^\_^

Postscript (ES6 Series)

With modern browsersES6With our strong support, we can use itES6Write more concise and elegant code. In the next article, I’ll list a lot of usesES6Best practices