搭vue项目（初级版）

 这个项目只有 会员管理和直播管理两个模块。创建两个模块是为了验证一下路由跳转。

 下载项目： 可以到我的资源中下载压缩包 或者 

git clone 前端项目搭建: 前端搭建的项目，仅供学习使用

 1.安装vue-cli,全局只需要安装一次，如果安装过一次，就不用在安装了。

创建项目

vue create hello-world

1. 创建好项目之后我们就可以开始修改一些配置，修改的文件是 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中保存起来。

后边的内容需要看每个开发团队的开发习惯了，可以前往下载我的项目代码简单了解一下，自行消化一下。