vue3项目实战-shopping-第一章-项目起步与基础配置

1、项目初始化和git管理

git init

git add .

git commit -m "***"

2、别名路径联想设置

根目录下新增jsconfig.json,添加如下配置项

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

3、element-plus自动按需导入

首先，安装element组件库
npm install element-plus --save

然后，安装两个插件

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

配置：

// vite.config.ts
import { defineConfig } from 'vite'
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()],
    }),
  ],
})

4、element-plus主题色定制

1）安装scss：npm i sass -D

2)准备样式定制文件

styles/element/index.scss

插入如下内容：

@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样式进行管理

更改components目录：(vite.config.js)

Components({
      resolvers: [
        // 1. 配置elementPlus采用sass样式配色系统
        ElementPlusResolver({ importStyle: "sass" }),
      ],
    }),

4)添加css配置：(vite.config.js)

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

5)测试：

保存之后，重启项目：可以看到按钮的颜色发生了变化，已经不再是原来的蓝色

5、axios基础配置：

1)安装axios

npm install axios

2)配置基础实例（新建utils/http.js)

1.import axios from 'axios'

2接口基地址和超时时间

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

3拦截器：

// 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

4测试接口是否被调用（apis/testAPI)

import { getCategory } from '@/apis/testAPI'
getCategory().then(res => {
  console.log(res)
})

（1）控制台返回：

（2）Network/fetch/xhr返回：

可见，接口被成功调用

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

Axios.create()方法可以被执行很多次，每次执行都会生成一个新的实例