一 背景
基于vue+springboot 搭建一套通用管理后台
主要包括用户管理模块、权限模块、菜单模块,
项目代码 https://gitee.com/weiwei20180921/commonadmin-front
二 环境信息
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/
- Network: http://10.3.28.61:8080/
Note that the development build is not optimized.
To create a production build, run yarn build.
3.2 基础引入
3.2.1 引入element-ui
首先在项目目录下使用npm 安装element-ui ,然后在main.js 里引入
PS D:\front\commonadmin-front> npm i element-ui -S
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 7s
102 packages are looking for funding
run `npm fund` for details
PS D:\front\commonadmin-front>
配置文件修改
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
render: h => h(App),
}).$mount('#app')
3.2.2 引入路由
我这里引入的路由是3.5.1 版本
PS D:\front\commonadmin-front> npm install vue-router@3.5.1
added 1 package in 3s
102 packages are looking for funding
run `npm fund` for details
修改app.vue
关键要增加该行
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
main.js 添加路由配置
import Vue from 'vue'
import App from './App.vue'
//导入路由
import router from './router'
//导入element
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
el: '#app',
router,
render: h => h(App)
})
添加三个新页面 放到src/views 下面
添加路由src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login'
import Home from '@/views/Home'
import NotFound from '@/views/404'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/404',
name: 'notFound',
component: NotFound
}
]
})
3.2.3 引入sass
主要是引入npm install sass-loader node-sass
PS D:\front\commonadmin-front> npm install sass-loader node-sass
npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs
npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs
added 132 packages in 2m
100 packages are looking for funding
run `npm fund` for details
PS D:\front\commonadmin-front>
执行如上命令后package.json 文件会自动添加
"node-sass": "^8.0.0",
"sass-loader": "^13.2.0",
在页面里 style 处要添加lang=“scss”
<style lang="scss">
</style>
3.2.4 引入axios
安装
PS D:\front\commonadmin-front> npm install axios
added 6 packages in 3s
100 packages are looking for funding
run `npm fund` for details
PS D:\front\commonadmin-front>
安装后package.json
"dependencies": {
"axios": "^1.3.4",
"core-js": "^3.8.3",
"element-ui": "^2.15.13",
"node-sass": "^8.0.0",
"sass-loader": "^13.2.0",
"vue": "^2.6.14",
"vue-router": "^3.5.1"
},
测试
<template>
<div class="page">
<h2>Home Page</h2>
<el-button type="primary" @click="testAxios()">测试Axios调用</el-button>
</div>
</template>
<script >
import axios from 'axios'
export default{
name: 'Home',
methods:{
testAxios(){
axios.get('http://localhost:8080').then(res => {alert(res.data)})
}
}
}
</script>
注意:这里浏览器访问地址是http://localhost:8080/#/,而不是本地IP 地址,否则会出现跨域报错问题
3.2.5 引入mock
3.2.5.1安装
PS D:\front\commonadmin-front> npm install mockjs
added 1 package in 2s
100 packages are looking for funding
run `npm fund` for details
PS D:\front\commonadmin-front>
package.json
"dependencies": {
"axios": "^1.3.4",
"core-js": "^3.8.3",
"element-ui": "^2.15.13",
"mockjs": "^1.1.0",
"node-sass": "^8.0.0",
"sass-loader": "^13.2.0",
"vue": "^2.6.14",
"vue-router": "^3.5.1"
},
3.2.5.2验证
新建src/mock/mock.js
import Mock from 'mockjs'
Mock.mock('http://localhost:8080/user',{
'name': '@name', //随机生成用户名
'name': '@email', //随机生成邮箱
'age|1-10': 5, //年龄1-10 之间
})
Mock.mock('http://localhost:8080/menu',{
'id': '@increment', //id 自增
'name': 'menu', //名称为menu
'order|1-20': 5, //排序1-20 之间
})
修改home.vue 代码,验证结果如下图
3.3 工具封装
3.3.1 axios 封装
3.3.1.1 目的
减少代码冗余,复用axios
3.3.1.2 目录结构
在src 目录下 新建http 子目录,在该目录下新增如下文件
config.js : axios 默认配置,包含基础路径等信息。
axios.js : 二次封装axios 模块,包含拦截器等信息。
api.js : 请求接口汇总模块,聚合所有模块API.
index.js: 将axios封装成插件,按插件方式引入。
modules: 用户管理,菜单管理等子模块api
3.3.1.3 代码说明
3.3.1.4 验证
3.3.2 封装mock
3.3.2.1 目的
1.为了统一管理和集中控制数据模拟接口
2.方便定制模拟接口统一开关和个体开关
3.3.2.2 目录结构
3.3.2.3 代码说明
3.3.2.4 验证
3.4 引入第三方
3.4.1 引入fontawesome.com 图标库(失败)
3.4.1.1 安装依赖
我这边装的是4.7.0 ,更高版本怎么安装,待查
PS D:\front\commonadmin-front> npm install font-awesome
added 1 package in 4s
100 packages are looking for funding
run `npm fund` for details
PS D:\front\commonadmin-front>
package.json
"dependencies": {
"axios": "^1.3.4",
"core-js": "^3.8.3",
"element-ui": "^2.15.13",
"font-awesome": "^4.7.0",
"js-cookie": "^3.0.1",
"mockjs": "^1.1.0",
"node-sass": "^8.0.0",
"sass-loader": "^13.2.0",
"vue": "^2.6.14",
"vue-router": "^3.5.1"
},
3.4.2 多语言
3.4.2.1 安装依赖
PS D:\front\commonadmin-front> npm install vue-i18n@8.7.0
added 1 package in 3s
100 packages are looking for funding
run `npm fund` for details
PS D:\front\commonadmin-front>
"dependencies": {
"axios": "^1.3.4",
"core-js": "^3.8.3",
"element-ui": "^2.15.13",
"js-cookie": "^3.0.1",
"mockjs": "^1.1.0",
"node-sass": "^8.0.0",
"sass-loader": "^13.2.0",
"vue": "^2.6.14",
"vue-i18n": "^8.7.0",
"vue-router": "^3.5.1"
},
3.4.2.2 新增目录
3.4.2.3 新增关键代码
/src/i18n/index.js
代码如下,引入多语言
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
// 注册i18n实例并引入语言文件,文件格式等下解析
const i18n = new VueI18n({
locale: 'zh_cn',
messages: {
'zh_cn': require('@/assets/languages/zh_cn.json'),
'en_us': require('@/assets/languages/en_us.json')
}
})
export default i18n
/src/main.js
将多语言引入到项目里
import Vue from 'vue'
import App from './App.vue'
//导入路由
import router from './router'
import api from './http'
//导入国际化 多语言
import i18n from './i18n'
import global from '@/utils/global'
//导入element
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(api) //注册使用api 模块
Vue.use(ElementUI)
Vue.prototype.global = global // 挂载全局配置模块
new Vue({
el: '#app',
i18n,
router,
render: h => h(App)
})