创建项目并精细化配置【Vue3】

news2024/9/29 3:19:58

创建项目并精细化配置

在这里插入图片描述

git管理项目

基于 create-vue 创建出来的项目默认没有初始化git仓库，需要我们手动初始化
执行命令并完成首次提交

git init
git add
git commit -m “init”

什么是别名路径联想提示

在编写代码的过程中，一旦输入 @/，VSCode会立刻联想出src下的所有子目录和文件，统一文件路径访问不容易出错
如何进行配置

在项目的根目录下新增jsconfig.json文件
添加json格式的配置项，如下：

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

axios基础配置

安装axios npm i axios
配置基础实例（统一接口配置）

// axios基础的封装
import axios from '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

封装请求函数并测试

import httpInstance from "@/utils/http";

export function getCategory(){
    return httpInstance({
        url: 'home/category/head'
    })
}

问：如果项目里面不同的业务模块需要的接口基地址不同，该如何来做？
axios.create()方法可以执行多次，每次执行就会生成一个新的实例，比如：

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

项目路由设计

路由设计原则：找页面的切换方式，如果是整体切换，则为一级路由，如果是在一级路由的内部进行的内容切换，则为二级路由
如果在命名时报错，在.eslintrc.cjs中添加如下代码即可：

rules: {
    'vue/multi-word-component-names': 0, //不再强制要求组件命名
  }

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

<template>
  我是首页
</template>

<template>
  我是home
</template>

<template>
  我是分类
</template>

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

问：1. 路由设计的依据是什么？
内容切换的方式
2. 默认二级路由如何进行设置？
path配置项置空

静态资源初始化

图片资源和样式资源

资源操作

图片资源 - 把 images 文件夹放到 assets 目录下
样式资源 - 把 common.scss 文件放到 styles 目录下

error lens安装

error lens是一个实时提供错误警告信息的VScode插件，方便开发

scss文件自动导入

为什么要自动导入

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

自动导入配置

新增一个 var.scss 文件，存入色值变量
通过 vite.config.js 配置自动导入文件

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