小兔鲜电商项目实战--Vue3实战--黑马--项目起步①-CSDN博客

本文链接：https://blog.csdn.net/2301_78301373/article/details/146342597

免责声明(doge)：

这是本人学习前端vue3，跟着B站黑马程序员的配套课程，vue3小兔鲜电商项目，跟着做的课堂笔记（其实就是对其配套课程中的md文档，进行的修改完善，及个人学习体会和心得。想观看完整视频，可以去B站看黑马程序员的课程：黑马程序员前端Vue3小兔鲜电商项目实战）

黑马配套源码和笔记资料：小兔鲜项目资料

本人才疏学浅，本只是想拿这里当笔记用，移动端、电脑端都能同步，复习起来也方便，也欢迎各位大佬共同交流学习。

这是①-项目起步，对应的配套资料中的“笔记”的3-项目起步，点我主页还有。

接口文档：

接口文档，奉上：必须先读 - 黑马前端

创建项目并整理目录

npm init vue@latest

npm要求包名必须全小写且不含特殊字符允许连字符（-）和下划线（_）。当使用npm init vue@latest创建项目时，若输入的项目名含大写字母（如MyApp），脚手架会检测到不符合npm命名规范，需通过二次询问获取合法包名（如my-app）。全小写命名（如myapp）直接通过验证，故不再询问。

src目录调整

新建5个文件夹（都要加s）

apis ----- API接口文件夹
composables ----- 组合函数文件夹
directives ----- 全局指令文件夹
styles ----- 全局样式文件夹
utils ----- 工具函数文件夹

git提交

基于 create-vue 创建出来的项目默认没有初始化git仓库，需要我们手动初始化

执行命令并完成首次提交

git init（仅第一次）
git add .
git commit -m “init”

（备注：已经有终端在运行项目，npm run dev，这时，不要结束其运行，再新建一个终端就好了）

jsconfig.json配置别名路径

（尽量不要看此笔记，知道要干什么，去element官网思考怎么做）

配置别名路径可以在写代码时联想提示路径

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

去App.vue中，把./ 换成 @/ 就可以看到，有联想路径功能（如果没有，重启VScode试试）

git提交

elementPlus引入

（去官网，不要复制下面的走捷径，去element官网）

1. 安装elementPlus和自动导入插件

npm i elementPlus
npm install -D unplugin-vue-components unplugin-auto-import

（备注：可以在package.json看到新增的行(在最左边，绿色代表该行是新增的行)新增的行，说明elementPlus和插件安装成功）

2. 配置自动按需导入

在根目录下的vite.config.js，添加修改如下代码：

// 引入插件
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'


export default defineConfig({
  plugins: [
    // 配置插件
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ]
})

3. 测试组件

可以在App.vue中，添加以下代码（原来一大串代码可删除，因为这只是为了测试组件是否生效，测试完毕，再Ctrl Z即可）

<template>
  <el-button type="primary">i am button</el-button>
</template>

git提交

定制elementPlus主题

1. 安装sass

基于vite的项目默认不支持css预处理器，需要开发者单独安装

npm i sass -D

2. 准备定制化的样式文件

写入路径为： @/styles/element/index.scss（这里都是UI设计师提供的颜色）（是scss，不是css）

/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      // 主色
      'base': #27ba9b,
    ),
    'success': (
      // 成功色
      'base': #1dc779,
    ),
    'warning': (
      // 警告色
      'base': #ffb302,
    ),
    'danger': (
      // 危险色
      'base': #e26237,
    ),
    'error': (
      // 错误色
      'base': #cf4444,
    ),
  )
)

3. 自动导入配置

这里自动导入需要深入到elementPlus的组件中，按照官方的配置文档来

自动导入定制化样式文件进行样式覆盖,

按需定制主题配置（需要安装 unplugin-element-plus）

路径：@/vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// elementPlus按需导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [
        // 1. 配置elementPlus采用sass样式配色系统
        ElementPlusResolver({ importStyle: "sass" }),
      ],
    }),
  ],
  resolve: {
    // 实际的路径转换  @  -> src
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 2. 自动导入定制化样式文件进行样式覆盖
        additionalData: `
          @use "@/styles/element/index.scss" as *;
        `,
      }
    }
  }
})

git提交

axios安装并简单封装

前言：为什么要配置？（理论）

减少重复代码: 通过配置 baseURL 和拦截器，可以避免在每个请求中重复编写相同的代码。
统一管理: 拦截器可以帮助你统一处理请求和响应，例如统一添加认证信息、统一处理错误等。
提高可维护性: 封装请求函数后，API 请求的逻辑集中在一个地方，便于维护和修改。
增强可读性: 通过合理的配置和封装，代码结构更加清晰，易于理解和阅读。

timeout: 设置请求的超时时间。如果请求在指定的时间内没有得到响应，Axios 会自动终止请求并抛出一个错误。这可以防止请求长时间挂起，影响用户体验

请求拦截器是“请求前”的逻辑，用于修改请求配置。（请求前要干的事）

响应拦截器是“请求后”的逻辑，用于处理响应数据或错误。（请求后要干的事）

1. 安装axios（实践开始）

npm i axios

2. 基础配置

官方文档地址：起步 | Axios Docs 基础配置通常包括：

实例化 - baseURL + timeout

拦截器 - 携带token 401拦截等

路径：@/utils/http.js

import axios from 'axios'

// 创建axios实例
const httpInstance = axios.create({
  baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
  timeout: 5000
})

// axios请求拦截器
httpInstance.interceptors.request.use(config => {
  return config
}, e => Promise.reject(e))

// axios响应拦截器
httpInstance.interceptors.response.use(res => res.data, e => {
  return Promise.reject(e)
})

export default httpInstance

3. 封装请求函数并测试

路径：@/apis/testAPI.js（新建）（为了测试axios 请求是否正常工作）

import httpInstance from "@/utils/http"

export function getCategory() {
  // 这里的getCategory方法，得和main.js中的方法名一致
  return httpInstance({
    // 完整的URL是 http://pcapi-xiaotuxian-front-devtest.itheima.net/home/category/head
    // 这里的url是相对路径，会自动拼接到baseURL后面
    url: 'home/category/head'
  })
}

再转到main.js，去调用接口函数（添加如下代码）

// 测试接口函数
import { getCategory } from '@/apis/testAPI'
getCategory().then(res => {
  console.log(res)
})

如果项目里面不同的业务模块需要的接口基地址不同，该如何来做？

axios.create() 方法可以执行多次，每次执行就会生成一个新的实例，比如：

const http1 = axios.create({ baseURL: 'url1'})
const http2 = axios.create({ baseURL: 'url2'})

测试完之后，没有问题，把测试接口函数删除。

git提交

路由整体设计

路由设计原则：找页面的切换方式，如果是整体切换，则为一级路由，如果是在一级路由的内部进行的内容切换，则为二级路由

本节创建俩一级路由，俩二级路由。下面是俩一级路由：（.vue文件，写如下代码）

<template>
  我是登录页
</template>

<template>
  我是首页
</template>

下面是俩二级路由：（.vue文件，写如下代码）

<template>
  我是home
</template>

<template>
  我是分类
</template>

创建新文件夹和新文件：(如果原本views文件夹里有初始化时的vue文件，删除)

@/views/Layout/index.vue

@/views/Login/index.vue

@/views/Home/index.vue

@/views/Category/index.vue

ESLint命名规则报错

在命名的时候，会遇到这种情况：Component name "index" should always be multi-word.这个错误是 Vue 的 ESLint 规则提示的，意思是：组件名（Component name）应该是多单词的。Vue 官方推荐组件名使用多个单词组合，而不是单个单词（如 index），以避免与现有的或未来的 HTML 元素冲突。

解决方案（1、修改组件名；2、禁用该规则（不推荐））（下面是第二种，这里我们采用第二种）

打开eslint.config.js配置文件，添加如下代码：

import js from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'

module.exports = {
  rules: {
    // 不再强制要求组件命名
    // 'vue/multi-word-component-names': 'off'  // 亦可
    'vue/multi-word-component-names': 0
  }
}

配置路由

在 Vue Router 4.x 中：

✅ <RouterView />（PascalCase）是官方推荐写法
✅ <router-view />（kebab-case）兼容旧版但可能逐步弃用

@/router/index.js

// createRouter：创建router实例对象
// createWebHistory：创建history模式的路由

import { createRouter, createWebHistory } from 'vue-router'
import Login from '@/views/Login/index.vue'
import Layout from '@/views/Layout/index.vue'
import Home from '@/views/Home/index.vue'
import Category from '@/views/Category/index.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  // path和component对应关系的位置
  routes: [
    {
      path: '/',
      component: Layout,
      children: [
        {
          path: '',
          component: Home
        },
        {
          path: 'category',
          component: Category
        }
      ]
    },
    {
      path: '/login',
      component: Login
    }
  ]
})

export default router

git提交

静态资源引入和Error Lens安装

（so so so so easy）

资源说明

实际工作中的图片资源通常由 UI设计师 提供，常见的图片格式有png,svg等都是由UI切图交给前端

样式资源通常是指项目初始化的时候进行样式重置，常见的比如开源的 normalize.css 或者手写

1. 静态资源引入

图片资源 - 把 images 文件夹放到 assets 目录下（图片和样式资源均在“素材”里）
样式资源 - 把 common.scss 文件放到 styles 目录下

2. Error Lens插件安装

git提交

scss变量自动导入

为什么要设置“自动”导入呢？

PDF解释：在项目里一些组件共享的色值会以scss变量的方式统一放到一个名为 var.scss 的文件中，正常组件中使用，需要先导入scss文件，再使用内部的变量，比较繁琐，自动导入可以免去手动导入的步骤，直接使用内部的变量。

首先，要明白，什么是手动导入。手动导入是，比如说在App.vue中，要用到@/styles/var.scss中的样式，就需要在App.vue中导入该scss文件，import '@/styles/var.scss'。但是，App.vue只是整个项目的一个组件，一个项目可能有几百个组件，总不能一个个组件，都要写import '@/styles/var.scss'吧？给你累死。

所以需要设置自动导入，设置完之后，组件里要用到var.scss，就不用再手动导入了（解放双手啦）

新建文件：@/styles/var.scss

$xtxColor: #27ba9b; 
$helpColor: #e26237;
$sucColor: #1dc779;
$warnColor: #ffb302;
$priceColor: #cf4444;

修改vite.config.js文件：如下

css: {
    preprocessorOptions: {
      scss: {
        // 2. 自动导入定制化样式文件进行样式覆盖
        additionalData: `
          @use "@/styles/element/index.scss" as *;
          @use "@/styles/var.scss" as *;
        `,
      }
    }
}

在App.vue中，测试一下，看看var.scss的颜色能否生效。

<template>
  <!-- 一级路由出口组件 -->
   <RouterView />
   <div class="test">
    test scss(look at me now!!!)
   </div>
</template>

<style scoped lang="scss">
.test {
  color: $priceColor;
}

git提交