Vue3小兔仙电商项目实战

npm install element-plus --save

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

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'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: [ElementPlusResolver()],}),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

<script setup>
defineProps({msg: {type: String,required: true}
})
</script><template><div ><el-button>Default</el-button></div>
</template><style scoped></style>

npm i sass -D

// styles/element/index.scss
/* 修改elementPlus 的主题色 */
@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,),),
);

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// element-plus 按需引入
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({// 1、配置elementplus 采用sass 样式配色系统resolvers: [ElementPlusResolver({importStyle:'sass'})],}),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},css: {preprocessorOptions: {scss: {// 2、自动导入定制化样式文件进行样式覆盖additionalData: `@use "@/styles/element/index.scss" as *;`,},},},
})

npm i axios

import axios from 'axios';// 网络请求基础封装
const http = axios.create({baseURL:'http://pcapi-xiaotuxian-front-devtest.itheima.net',timeout:5000
})// 请求拦截器
http.interceptors.request.use(config => {return config
},error => Promise.reject(error))// 响应拦截器
http.interceptors.response.use(res => {console.log("response",res)return res.data;
},error => {console.log("response",error)return  Promise.reject(error)
})export default http

import http from "@/utils/http";/*** 获取分类* @returns {*}*/
export function getCategory() {return http({url:"home/category/head"})}

// 测试接口是否可以获取到数据
import { getCategory } from '@/apis/index'getCategory().then(res => {console.log("getCategory-res",res)
}).catch(err => {console.log("getCategory-err",err)
})

// 网络请求基础封装
const http = axios.create({baseURL:'http://pcapi-xiaotuxian-front-devtest.itheima.net',timeout:5000
})// 基础地址2
const http2 = axios.create({baseURL:'http//xxx.xxx.com',timeout:5000
})

path:''

@use "@/styles/var.scss" as *;

<i class="iconfont icon-kefu"></i>

<script setup>
import { ref,onMounted } from "vue"
import { getCategoryAPI } from '@/apis/layout'import { useScroll } from "@vueuse/core"const categoryData = ref([])const requestGetCategory = async () => {const res = await getCategoryAPI()console.log("requestGetCategory",res)categoryData.value = res.result;
}onMounted(() => {requestGetCategory()
})// 因为是基于window 滚动，所以传入的是window对象
const { y } = useScroll(window)</script><template><div class="app-header-sticky" :class="{ show: y > 78 }"><div class="container"><RouterLink class="logo" to="/" /><!-- 导航区域 --><ul class="app-header-nav"><li class="home"><RouterLink to="/">首页</RouterLink></li><liclass="home"v-for="item in categoryData":key="item.id"><RouterLink active-class="active" :to="`/category/${item.id}`">{{item.name}}</RouterLink></li></ul><div class="right"><RouterLink to="/">品牌</RouterLink><RouterLink to="/">专题</RouterLink></div></div></div>
</template><style scoped lang="scss">
.app-header-sticky {width: 100%;height: 80px;position: fixed;left: 0;top: 0;z-index: 999;background-color: #fff;border-bottom: 1px solid #e4e4e4;// 此处为关键样式!!!// 状态一：往上平移自身高度 + 完全透明transform: translateY(-100%);opacity: 0;// 状态二：移除平移 + 完全不透明&.show {transition: all 0.3s linear;transform: none;opacity: 1;}.container {display: flex;align-items: center;}.logo {width: 200px;height: 80px;background: url("@/assets/images/logo.png") no-repeat right 2px;background-size: 160px auto;}.right {width: 220px;display: flex;text-align: center;padding-left: 40px;border-left: 2px solid $xtxColor;a {width: 38px;margin-right: 40px;font-size: 16px;line-height: 1;&:hover {color: $xtxColor;}}}
}.app-header-nav {width: 820px;display: flex;padding-left: 40px;position: relative;z-index: 998;li {margin-right: 40px;width: 38px;text-align: center;a {font-size: 16px;line-height: 32px;height: 32px;display: inline-block;&:hover {color: $xtxColor;border-bottom: 1px solid $xtxColor;}}.active {color: $xtxColor;border-bottom: 1px solid $xtxColor;}}
}
</style>

import { defineStore } from "pinia"
import { getCategoryAPI } from "@/apis/layout"
import { ref } from "vue"/*** 导航分类的数据管理* @type*/
export const useCategoryStore = defineStore("category", () => {// 导航列表的逻辑const categoryList = ref()const getCategory = async () => {const res = await getCategoryAPI()categoryList.value = res.result}return {categoryList,getCategory,}
})