vue3项目（一）项目前的准备

1. src目录

 

2. 配置别名路径联想提示

步骤：

1）在项目的根目录下新增jsconfig.json文件

2）添加json格式的配置项 

3. 引入 elementPlus

步骤：

1）安装elementPlus和自动导入插件

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

 2）配置自动按需导入

// 引入插件
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'


export default defineConfig({
  plugins: [
    // 配置插件
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ]
})

3）测试组件

在App.vue中测试

<template>
  <el-button type="primary">i am button</el-button>
</template>

4.elementPlus主题定制

步骤：

1）安装sass

基于vite的项目默认不支持css预处理器，需要开发者单独安装

npm i sass -D

2）准备定制化的样式文件

在styles文件夹里创建element文件，里面创建index.scss文件，里面引入如下的样式

/* 只需要重写你需要的即可 */
@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,
    ),
  )
)

3）通知Element采用scss语言，然后导入定制的scss文件覆盖

 5. axios基础配置

步骤：

1）安装axios

npm i axios

2）配置基础实例（统一接口配置）

包含接口的基地址，接口超时时间，请求拦截器和响应拦截器

在utils文件夹下创建http.js

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

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

3）封装请求函数并测试

在apis文件夹下创建textAPI.js

import httpInstance from '@/utils/http'

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

6. 项目的路由设计

路由设计原则：找页面的切换方式，如果是整体切换，则为一级路由，如果是在一级路由的内部进行的内容切换，则为二级路由。

第一步：先设计一级路由（首页Layout和登录页Login）

步骤：

1）在views文件夹下创建各页面

//src/views/Layout
<template>
    <div>Layout</div>
</template>

//src/views/Login
<template>
    <div>Login</div>
</template>

2）在router文件夹下进行路由配置

//src/router/index.js

// createRouter:创建router实例对象
// createWebHistory:创建history模式的路由

import { createRouter, createWebHistory } from 'vue-router'
// 因为使用vite，所以最好把路径写全
import Login from '@/views/Login/index.vue'
import Layout from '@/views/Layout/index.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path:'/',
      component:Layout,
    },
    {
      path:'/login',
      component:Login
    }
  ]
})
export default router

3）书写一级路由出口

//App.vue
<template>
  <!-- 一级路由出口组件 -->
  <RouterView></RouterView>
</template>

第二步：设计二级路由（分类页Category和默认Home页）

分类页和Home都是首页中进行切换，所以是首页的子路由

步骤：

1）和前面一样先创建组件

//src/views/Home
<template>
    <div>Home</div>
</template>

//src/views/Category
<template>
    <div>Category</div>
</template>

2）配置路由

//src/router/index.js
import Home from '@/views/Home/index.vue'
import Category from '@/views/Category/index.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path:'/',
      component:Layout,
      children:[
        {
          path:'',//表示默认页
          component:Home
        },
        {
          path:'category',
          component:Category
        }
      ]
    },
    {
      path:'/login',
      component:Login
    }
  ]
})

export default router

3）在首页Layout里面书写二级路由出口

//src/views/Layout

<template>
    <RouterView />
</template>

7. scss文件的自动导入

在项目里一些组件共享的色值会以scss变量的方式统一放到一个名为 var.scss 的文件中。

正常组件中使用，需要 先导 入scss文件，再使用内部的变量 ，比较繁琐。

自动导入 可以免去手动导入的步骤，直接使用内部的变量。

步骤：

1）创建var.scss

//src/styles/var.scss
$xtxColor: #27ba9b;
$helpColor: #e26237;
$sucColor: #1dc779;
$warnColor: #ffb302;
$priceColor: #cf4444;

2）在vite.config.js中配置自动导入