vueCLi项目实践

宇宙无敌臀臀
136 阅读7分钟

一、项目创建

1、创建基础文件和路由设置和依赖安装

  • 对于刚安装好的vue，开始需要添加几个文件夹
    • api / 用于单独管理路由组件当中的所有请求，内部需要定义多个js文件，名称最好和views中的每个组件名一致
    • utils / 项目中多次使用的文件，例如ajax请求
    • .env.development / 自定义环境变量（开发） / 如果使用三目运算辨别是生产还是开发可以不创建该文件（详见5）
    • .env.production / 自定义环境变量 （生产）
  • 脚手架初安装默认文件解释 / 点击这里移到文章最后
  • 安装依赖：
  • 在这里插入图片描述

2、二次封装axios

注意：这里拦截器可以找到官方文档内的interceptor下面的代码直接拷贝过来

axios官方文档 / 点击进入

// 该文件是二次封装axios
import axios from 'axios'
// 定义axios默认配置
const request = axios.create({
  /*
    1、开发环境是跨域环境，上线不会出现跨域问题，baseURL要区分开发和生产
    2、开发环境下，baseURL应该为反向代理请求的前缀，但是请求前缀不能直接在request.js赋值
      应存储在环境变量中
   */
  // proess.env是环境变量，可以在任意位置直接获取,用于判断环境是生产环境还是开发环境
  // 下面有一个属性就是NODE_ENV，可以看到是开发还是生产环境
  // baseURL: '/api'  ⇒ 这样写的话容易固定前缀，无法辨别是开发环境还是生产环境
  // 此处使用的是自定义环境变量
  baseURL: process.env.VUE_APP_BASE_URL
})

// 添加拦截器
axios.interceptors.request.use(function (config) {
  // 获取token 添加到请求头中，发送后端进行接口校验
  return config
}, function (error) {
  return Promise.reject(error)
})

axios.interceptors.response.use(function (response) {
  /*
    后端检验token失败返回错误的code，401：token过期，403：未登录
    在响应拦截器当中需要判断code，如果token过期或者未登录，弹出错误的提示，
    清除本地所有登录相关缓存并重新去登录页
    如果不清除不跳转的话token可以在network当中直接进行修改，跳过验证不安全
  */
  return response
}, function (error) {
  return Promise.reject(error)
})
// 到处request
export default request

3、配置反向代理

  • 找到vue.config.js文件 注意：反向配置代理中的target目标源是fastmock中的地址，待会会讲如何创建fastmock的在线文件
// 该文件是vue的配置管理
const { defineConfig } = require('@vue/cli-service')
// node内定义path方法
const path = require('path')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    host: 'localhost',
    // 端口号尽量9000以上，防止电脑其他地方占用，或者直接重新修改
    port: 9898,
    open: true,
    /*
      配置服务器反向代理解决开发环境，ajax请求跨域问题
      反向代理，是由服务器替我们请求目标源
      服务器请求target里面的目标源+请求前缀重写后的值+请求中后面的path
      /api/a/b
      http://api.it120.cc/api/a/b
    */
    proxy: {
      // 所有的请求path必须以当前前缀开头
      '/api': {
        // 代理的源
        // 这里请求的是fastmock中的地址
        target: 'https://www.fastmock.site/mock/27f9ed4811870d97ecf603d848a86ec4/api',
        // 是否切换源
        changeOrigin: true,
        // 前缀路径重写
        pathRewrite: {
          '^/api': '/api'
        }
      }
    }
  },
  /*
    关闭eslint 保存就检查代码的格式
    关闭后，vscode需要安装 eslint 插件，用于检查代码
   */
  lintOnSave: false,
  // 重新定义快捷键来定位到指定路径，防止层级过深找不到该文件
  chainWebpack: config => {
    config.resolve.alias
      .set('@', path.join(__dirname, 'src'))
      .set('@a', path.join(__dirname, 'src/api'))
      .set('@c', path.join(__dirname, 'src/components'))
      .set('@r', path.join(__dirname, 'src/router'))
      .set('@s', path.join(__dirname, 'src/store'))
      .set('@u', path.join(__dirname, 'src/utils'))
      .set('@v', path.join(__dirname, 'src/views'))
  }
})

4、将所有路由组件接口单独放到api文件夹中进行单独管理

注意：建议这里文件命名跟views当中对应的请求文件名字相同，方便后期代码维护

  • 此处文件名在api文件夹下叫HomePage
  • 请求在线的fastmock
// 单独管理 HomePage这个路由组件中所有请求
import request from '@u/request'
const fetchCates = (params = {}) => {
  return request.get('请求路径', { params })
}
// 导出fetchCates这个函数，函数方便复用，而且可以携带参数
export {
  fetchCates
}

5、配置环境变量

  • 环境变量在不同环境下值不同，可以通过访问process.env这个对象来查看处于什么环境
  • process.env 该对象可以直接访问，内部有一个内置的属性是NODE_ENV
  • 使用NODE_ENV判断是处于开发环境还是生产环境，需要定义baseURL，在axios内使用
    • 容易跟axios二次封装混淆，注意辨别
    • const request = axios.create({
  baseURL: process.env.NODE_ENV === 'development' ? '/conner' : '生产源'
})
  • 自定义环境变量

    • .env.development和.env.production两个文件夹内定义环境变量

    • 以VUE_APP_环境变量名开头

    • 在这里插入图片描述

    • 在这里插入图片描述

    • 注意要进行重启项目

    • 注意：现在我们还是在fastmock中请求

6、mock的基础使用方法

  • 一般项目刚开始启动前后端联动，同时开发，在后端接口还未搭建完成之前前端需要用一些虚拟的接口来模拟后端接口来发送请求，从而更快的搭建项目
  • 安装mockjs依赖，主要用于拦截ajax的请求，产出随机的数据
  •   npm i mockjs -D
  • 引入mock（使用rquire引入mock）因为该依赖在后面要换成后端接口 ，不用import容易混淆，方便后期删除
  • mock产生随机数的语法
    • 量词用于修饰数组、字符串、number等数据长度或大小
    • 用在字段名中（ ''字段名|量词'':初始值 ）
      • 固定："arr|10":[] ==> 数组长度为0
      • 范围值："arr|10-20":[] ==> 数组长度为10-20
      • 注意number一定要给一个范围，用于修饰number大小，不然用该语法就毫无意义，可以直接赋值
    • 不同数据类型的随机数
      • mockjs 提供了不同数据类型的占位符用于产生随机的值，语法“@占位符”
    • 以下是 
      - 基础类型
boolean, natural, integer, float, character, string, range
日期相关
date, time, datetime, now
图片
img, dataImage
颜色
color, hex, rgb, rgba, hsl
随机文本
paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
名字
first, last, name, cfirst, clast, cname
web地址相关
url, domain, protocol, tld, email, ip
地址相关
region, province, city, county, zip
其他
capitalize, upper, lower, pick, shuffle
  • 用法 
    // 引入mockjs
const Mock = require('mockjs')
// 第一个参数：拦截接口的path
// 第二个参数：请求方式
// 第三个参数：对象，写入接口返回的数据
Mock.mock('/api/getItemLists', 'get', {
  code: 200,
  msg: 'success',
  data: {
    'total|100-200': 100,
    'lists|10': [
      {
        'id|+1': 1,		//id自增1
        itemName: '@ctitle',	//随机生成商品名
        'price|0-1000': 0,		//随机生成价格，可以用随机@natural，但是不建议，会生成非常大的数，有点离谱
        'sale|0-1000': 0,		//随机生成售卖价格
        desc: '@cparagraph',	//随机生成一段商品描述
        onsale: '@boolean',		//是否售卖，随机生成布尔值判断是不是在售
        thumb: "@img('500x500','@color', '宇宙无敌臀臀')",//随机生成一张图片，随机颜色，固定名称
        createAt: '@date'		//随机日期
      }
    ]
  }
})

7、fastmock 在线mock平台

  • 可以真实的发出请求，产生随机数据也可以使用mockjs依赖，但是缺点是network中没有任何请求
  • 官网（点击这里）
  • 需要注册账号
  • 创建请求在这里插入图片描述

    • 1、点击加号进入创建 在这里插入图片描述 项目基础路径就是我们在vue.config.js中配置代理当中设置的前缀，最好保持一致，方便后期上线

    • 2、点击进入该项目 在这里插入图片描述

    • 3、点击进入该项目然后点击新增接口 在这里插入图片描述

    • 4、填写以下数据 在这里插入图片描述

      注意这里右侧的只能是json格式且不能有注释，左侧接口名就是设置不同的请求接口名称，请求方式，url就是前缀带接口名

8、OK！npm run serve 运行项目，就可以请求到数据啦！

在这里插入图片描述

avatar
文章
阅读
粉丝