这个项目只有 会员管理和直播管理两个模块。创建两个模块是为了验证一下路由跳转。
下载项目： 可以到我的资源中下载压缩包 或者
git clone 前端项目搭建: 前端搭建的项目，仅供学习使用
1.安装vue-cli,全局只需要安装一次，如果安装过一次，就不用在安装了。
创建项目
vue create hello-world1. 创建好项目之后我们就可以开始修改一些配置，修改的文件是 vue.config.js
修改配置的介绍可以到官网学习一下vue-cli配置参考
'use strict'
const path = require('path')
function resolve(dir) {
// 生成路径 `${__dirname/${dir}}`
return path.join(__dirname, dir)
}
process.env.VUE_APP_VERSION = require("./package.json").version;
module.exports = {
// 基本 url
publicPath: process.env.VUE_APP_BASE_URL || '/',
// 打包时生成的文件目录
outputDir: 'dist',
// 打包之后放置生成的静态资源(js、css、img、fonts)
assetsDir: 'static',
// 每次保存时，设置为 true 或 'warning' 时，eslint-loader 会将 lint 错误输出为编译警告。
// 默认情况下，警告仅仅会被输出到命令行，且不会使得编译失败。
// lintOnSave: process.env.NODE_ENV === 'development', // 在开发环境下只提示不会导致编译失败
// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
productionSourceMap: false,
// webpack-dev-server 相关配置
devServer: {
host: 'localhost', // 可以运行
port: '8023',
// 自动打开浏览器
open: true,
// 为接口前端自己加一个前缀，但不会传给后端
proxy: {
['/api']: {
target: process.env.VUE_APP_BASE_API,
// target: 'https://demo-api.apipost.cn/api',
pathRewrite: {
['^/api']: '', // 传给后端时 如果为 /api 则 重写为 空
}
}
},
// disableHostCheck: true, // 搭配host: '0.0.0.0',为了其他设备可以访问本地服务
historyApiFallback: true,
allowedHosts: 'all',
},
css: {
loaderOptions: {
sass: {
// 依次导入的公用的scss变量，公用的scss混入，共用的默认样式
// 别名配置
additionalData: `@import "./src/styles/variables.scss";`
}
}
},
// 该对象将会被 webpack-merge 合并入最终的 webpack 配置。
configureWebpack: {
resolve: {
// 别名配置
alias: {
'@': resolve('src') // 这里的resolve用的上边的函数
}
}
},
// 定义具名的 loader 规则和具名插件
chainWebpack(config) {
// 修复HMR
config.resolve.symlinks(true)
// 设置loader
// https://blog.csdn.net/cai_niao5623/article/details/126424871
},
}
cconst path = require('path')
path模块是nodejs官方提供的，用来处理路径的模块。
path.join()：将多个路径片段拼接成一个完整的路径字符串。
process.env.VUE_APP_VERSION
process.env.VUE_APP_BASE_URL
这些数据来自
这些配置的使用请去官网学习一下，模式和环境变量 | Vue CLI
2. 安装router，安装store，安装组件element-ui。开始写页面，路由跳转。
安装store: 安装 | Vuex
安装router: 安装 | Vue Router
安装组件：Element - The world's most popular Vue UI framework
安装好后开始在入口文件main.js中引用
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import './styles/element-variables.scss'
import router from "./router"
import store from './store'
import './permission' // permission control
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
el: '#app',
router,
store,
render: h => h(App),
})在开发中，每个项目有自己的基本页面框架，这个项目中基本页面框架写在了layout文件夹中。就是第一张图的布局
3. 安装axios，调用接口
安装：axios中文文档|axios中文网 | axios
使用axios
import axios from 'axios';
import errorCode from '@/utils/errorCode';
import { Message } from 'element-ui'
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建实例
const service = axios.create({
baseURL: process.env.NODE_ENV === 'development' ? 'api' : process.env.VUE_APP_BASE_API,
timeout: 20000,
})
// service.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// 添加请求拦截器
service.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
// 是否需要设置 token
// const isToken = (config.headers || {}).isToken === false
// if (getToken() && !isToken) {
// config.headers = window.CONFIG.headers // 让每个请求携带自定义token 请根据实际情况自行修改
// }
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
})
// 添加响应拦截器
service.interceptors.response.use(function (res) {
// 对响应数据做点什么
// console.log("请求接口--success", res);
const code = res.data.code || 200;
const msg = errorCode[code] || res.data.msg || errorCode['default'];
if (code === 200) {
return res.data;
} else {
Message({
message: msg,
type: 'error'
})
return Promise.reject(res.data)
}
}, function (error) {
// console.log("请求接口--error");
let { message: msg, response, config } = error
if (msg === 'Network Error') {
msg = '后端接口连接异常'
} else if (msg.includes('timeout')) {
msg = '系统接口请求超时'
} else if (response) {
let status = response.status
msg = '系统接口:' + status + '异常'
}
Message({
message: `${msg}:${config.url}`,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error);
})
export default service在api文件夹中引入使用
import request from '@/utils/request';
export function getRouters(params) {
return request({
url: 'https://console-mock.apipost.cn/app/mock/project/d098023d-15c4-49cd-a1d6-d4e1124f3e56//api/demo/getRouters',
method: 'get',
params
})
}到这一步，简易版的项目需要安装的内容已经安装结束了。
接下来，开始画页面，调用接口获取菜单配置
省略画页面的过程......
画好了面包屑，需要将调用接口获取的菜单配置在store中保存起来。
后边的内容需要看每个开发团队的开发习惯了，可以前往下载我的项目代码简单了解一下，自行消化一下。
