.Vue3 project initialization

1.Vue3 project initialization

1.1 Create vue project

npm init vue@latest

1.2 vue initialization

npm install

1.3 git project management

git init

 git add .

git commit -m "init"

1.4 Configure iconfig.json

Configuration in vite-config.json

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

1.5 element introduced on demand

elementUI official website

npm install element-plus --save

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

1.6 Element theme color customization

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

Configure vite.config.json
to switch Components and add css configuration items

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 Basic configuration of axios

axios official website

Import axios

npm i axios

axios package

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

Interface testing

import http from "@/utils/htttp";

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

Request result

1.8 Router routing configuration

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

Add a first-level routing exit