Vue3案例-小兔鲜

一.项目起步

1.项目创建

git init //交给git管理
git add .  //将内容从工作目录添加到暂存区
git commit -m "init"  //首次提交

2.项目目录结构

3.配置路径联想

(1).在项目的根目录下新增jsconfig.json文件,添加json格式的配置项,如下:

(2).效果

4.整合Element-Plus

Element-Plus文档入口

(1).安装

npm install element-plus --save

(2).自动导入(为了性能考虑,选择按需导入),需要安装俩插件

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

(3).ElementPlus主题色定制

安装scss

npm install sass -D

准备定制样式文件:在styles目录下新建element文件夹,编写index.scss自定义样式

/*index.scss*/

/*自定义element主题色*/
@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,
        ),
    )
)

对ElementPlus样式进行覆盖:在vite.config.js里配置,添加如下代码

 plugins: [
    Components({
      resolvers: [
        //1.配置elementPlus采用sass样式配色系统
        ElementPlusResolver({importStyle:"sass"}),
      ],
    }),
  ],
  css:{
    preprocessorOptions:{
      scss:{
        //2.自动导入定制化样式文件进行覆盖
        additionalData: `
        @use "@/styles/element/index.scss" as *;
        `,
      }
    }
  }

(4).测试Element-Plus是否整合成功,自定义样式(ElementPlus主题色定制)是否生效

5.整合axios

(1).安装axios

npm install axios

(2).配置基础实例(统一接口配置)

在utils目录下新建一个http.js文件进行配置

//axios基础的封装
import axios from 'axios'

const httpInstance = axios.create({
    baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net', //1.接口基地址
    timeout: 5000 //2.接口超时时间
})

/*拦截器*/

//3.axios请求拦截器
httpInstance.interceptors.request.use(config=>{
    return config
},e => Promise.reject(e))

//4.axios响应式拦截器
httpInstance.interceptors.response.use(res => res.data,e => {
   return Promise.reject(e)
})

export default httpInstance

(3).测试

在apis目录下新建一个测试文件testAPI.js

/*testAPI.js*/

import httpInstance from "@/utils/http";

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

在main.js中进行测试

访问成功

6.项目整体路由设计

(1).一级路由

/views/Login/index.vue

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

/views/Layout/index.vue

<template>
    <div>我是首页</div>
    <!--二级路由出口-->
    <RouterView />
</template>

(2).二级路由

/views/Home/index.vue

<template>
    <div>我是home页面</div>
</template>

/views/Category/index.vue

<template>
    <div>我是分类页</div>
</template>

(3).路由绑定

/*/router/index.js*/
// 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和commponent对应关系的位置
  routes: [
    {
      //一级路由
      path: '/',
      component: Layout,
      children:[
        //二级路由在children里面配置
        {
          path: '',
          component: Home
        },
        {
          path: 'category',
          component: Category
        }

      ]
    },
    {
      path: '/login',
      component: Login
    }
  ]
})

export default router

(4).测试

7.配置scss文件的自动导入

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

(1).新增一个var.scss文件,存入色值变量

/* /styles/var.scss */

$xtxColor: #27ba9b;
$helpColor: #e26237;
$sucColor: #1dc779;
$warnColor: #ffb302;
$priceColor: #cf4444;

(2).通过vite.config.js配置自动导入文件

Vue3案例-小兔鲜

一.项目起步

评论区