1.Vue3项目初始化

1.1 创建vue项目

npm init vue@latest

1.2 vue 初始化

npm install

1.3 git 项目管理

git init

 git add .

git commit -m "init"

1.4 配置iconfig.json

vite-config.json中配置

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

1.5 element 按需引入

elementUI官网

npm install element-plus --save

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

1.6 element 主题色的定制

npm i sass -D

@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,
        )
    )
)

配置vite.config.json
切换Components，并且加入css配置项

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

import { defineConfig } from 'vite'
//按需引入elementUI
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver({importStyle:"sass"})],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css:{
    preprocessorOptions:{
      scss:{
        additionalData:`
        @use "@/styles/element/index.scss" as *;
        `,
      }
    }
  }
})

1.7 axios的基础配置

axios官网

导入axios

npm i axios

axios的封装

//axios的基础封装

import axios from 'axios'

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


//拦截器

// 添加请求拦截器
http.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
http.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });
export default http

接口的测试

import http from "@/utils/htttp";

 export function getdata(){
   return http({
        url:"/home/category/head"
    })
}

请求结果

1.8 router路由的配置

//createRouter 创建路由实例，
//createWebHistory 创建history路由实例
 
import { createRouter, createWebHistory } from 'vue-router'

import Login from '@/views/login/index.vue'
import Layout from '@/views/layout/index.vue'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  //配置path和commpontes
  routes: [
    {
      path:'/',
      component:Layout
    },
    {
      path:'/Login',
      component:Login
    }
  ]
})

export default router

添加一级路由出口