脚手架配置

Vite

红色波浪线警告

• vue 框架项目，确定扩展插件是否与 vue 版本相对应
• 找不到模块“./App.vue”或其相应的类型声明

  declare module '*.vue' {
    import type { DefineComponent } from 'vue'
    const component: DefineComponent<{}, {}, any>
    export default component
  }
  

展示局域网地址

使用 Vite 创建 Vue3.x 项目时终端打印 Network: use --host to expose

// vite.config.ts 文件中添加 server.host
export default defineConfig({
  ...,
  server: {
    host: '0.0.0.0' // 显示局域网地址
  }
  ...
})

Create React App

CRA路径解析配置

1. 安装插件

npm i -D @craco/craco

2. 配置package.json

...,
"start": "craco start",
"build": "craco build",
"test": "craco test",
...

3. 根目录新建文件craco.config.js

const path = require('path')

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
}

联想路径配置

注：需要配合【CRA路径解析配置】
根目录新建文件jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

代码格式化

node版本：v20.12.2
脚手架：vite
包管理器：pnpm
前端框架：Vue

Eslint

搭配 vscode 扩展插件【ESLint】使用

1. 安装 eslint

pnpm add eslint@8.57.0 -D

2. 创建配置文件

npx eslint --init

vscode

推荐扩展插件

• Auto Close Tag【自动关闭标签】
• Auto Rename Tag【自动重命名标签】
• Chinese (Simplified)【中文简体语言包】
• ESLint【代码校验】
• GitLens【增强 Git】
• JavaScript (ES6) code snippets【JavaScript (ES6) 片段】
• One Dark Pro【vsode 颜色主题】
• open in browser【在浏览器中打开】
• Path Intellisense【路径智能感知】
• Prettier【代码格式化】
• vscode-icons【vscode 图标】
• Vue Language Features (Volar)【vue3 语言特性】
• Vetur【vue2 语言特性】
• Vue 3 Snippets 或 Vue VSCode Snippets 【代码片段】

环境变量

1. 定义

.env.development

# 开发环境配置
ENV = 'development'

# 开发环境
REACT_APP_BASE_URL = ''

.env.production

# 生产环境配置
ENV = 'production'

# 生产环境
REACT_APP_BASE_URL = ''

2. 使用：process.env.REACT_APP_BASE_URL

请求配置

axios基础配置

import axios from 'axios'
import { getToken } from '@/utils/storage'

const instance = axios.create({
  baseURL: process.env.REACT_APP_BASE_URL,
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json; charset=utf-8',
  },
})

// 添加请求拦截器
instance.interceptors.request.use(
  (config) => {
    const token = getToken()
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`
    }

    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

// 添加响应拦截器
instance.interceptors.response.use(
  (response) => {
    return response?.data || {}
  },
  (error) => {
    return Promise.reject(error)
  }
)

export default instance

数据模拟

RAP接口管理平台

链接: rap2

json-server

1. 安装插件

npm i -D json-server

2. 创建数据存储目录/server/db.json

{
  "list": []
}

3. 修改package.json脚本

"scripts": {
  ...
   "server": "json-server --watch ./server/db.json --port 9999"
  ...
},

4. 使用

• 启动脚本：npm run server
• 调用接口：http://localhost:9999/list

mockjs

1. 安装插件

npm i mockjs

2. 使用

import Mock from 'mockjs'

export const user_login = Mock.mock('/user/login', 'post', {
  code: 200,
  token: 'eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6InZpc2l0b3ItYXBwbGljYXRpb24tc2VydmVyLTIwMjEwMjIifQ'
});

3. 调用接口：/user/login