通用后台管理系统a版本-前端搭建

一 背景

基于vue+springboot 搭建一套通用管理后台
主要包括用户管理模块、权限模块、菜单模块,
项目代码 https://gitee.com/weiwei20180921/commonadmin-front-a

二 环境信息

2.1 前端工具版本

2.1.1 npm 版本

PS D:\front> npm -v
8.5.0

PS D:\front> npm config get 'registry'
https://registry.npm.taobao.org/
PS D:\front>

2.1.2 vue 版本

PS D:\front\commonadmin-front> vue -V
@vue/cli 5.0.8
PS D:\front\commonadmin-front>

2.1.3 nodejs 版本

PS D:\front\commonadmin-front> node -v
v16.14.2
PS D:\front\commonadmin-front>

三 前端搭建

3.1 初始搭建

3.1.1 新建vue 项目

使用vue cli 在你想要创建的目录创建项目

PS D:\front> vue create commonadmin-front


Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 2] babel, eslint)

3.1.2 上传gitee

在gitee 上新建项目，然后按着命令 push即可。

注意1. 要过滤掉node_modules 目录，该目录无需推送到gitee 上。
我是直接删除的。

3.1.3 启动项目

PS D:\front\commonadmin-front> npm install

added 947 packages in 49s

102 packages are looking for funding
  run `npm fund` for details
PS D:\front\commonadmin-front> npm run serve

> commonadmin-front@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...


 DONE  Compiled successfully in 5604ms                                                                                                                       15:01:17


  App running at:
  - Local:   http://localhost:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

3.2 引入element-ui

3.2.1 安装

PS D:\front\commonadmin-front-a> npm install element-ui@2.15.13
npm WARN deprecated core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.

added 9 packages in 9s

102 packages are looking for funding
  run `npm fund` for details
PS D:\front\commonadmin-front-a>

3.2.2 配置文件引入

我这里使用全局引入
可参考element-ui 官网 https://element.eleme.cn/#/zh-CN/component/quickstart

修改main.js 引入element-ui

import Vue from 'vue'
import ElementUI from 'element-ui';  //全局引入element-ui
import 'element-ui/lib/theme-chalk/index.css'; //全局引入element-ui
import App from './App.vue'

Vue.use(ElementUI); //全局引入element-ui
Vue.config.productionTip = false

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

3.2.3 验证

在app.vue 里加一段代码验证下

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <el-button type="primary">成功引入element-ui</el-button>  //验证element-ui 引入是否成功
  </div>
</template>

3.3 引入vue-router

3.3.1 安装

注意我这里用的是vue2 ,所以安装vue-router@3 版本

PS D:\front\commonadmin-front-a> npm install  vue-router@3

added 1 package in 3s

102 packages are looking for funding
  run `npm fund` for details
PS D:\front\commonadmin-front-a>

3.3.2 配置

参考官方文档
https://v3.router.vuejs.org/zh/installation.html

可以直接在main.js 里配置，我这里是单独写个router.js ，在该文件里配置，然后把router.js 引入到main.js

router.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

main.js

import Vue from 'vue'
import ElementUI from 'element-ui';  //全局引入element-ui
import 'element-ui/lib/theme-chalk/index.css'; //全局引入element-ui
import App from './App.vue'
import router  from './router'  //引入 vue-router

Vue.use(ElementUI); //全局引入element-ui
Vue.config.productionTip = false

new Vue({
  router, //引入 vue-router
  render: h => h(App),
}).$mount('#app')

3.3.3 验证

四 功能模块

五 其他问题

5.1 eslint 相关

5.1.1 eslint 配置文件

有的项目有单独.eslintrc.js 配置文件，有的没有，
没有的项目大概率在package.json 文件里

  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {
     "vue/multi-word-component-names":"off"
    }
  },

5.2 报错

5.2.1 报 multi-word-component-names

should always be multi-word.eslintvue/multi-word-component-names

5.2.2 解决办法

加如下配置

    "rules": {
     "vue/multi-word-component-names":"off"
    }