本文发表于 784 天前，其中的信息可能已经事过境迁
文章摘要
加载中...|
此内容根据文章生成，并经过人工审核，仅用于文章内容的解释与总结 投诉

创建项目并整理目录 ​

bash
npm init vue@latest

jsconfig.json配置别名路径 ​

配置别名路径可以在写代码时联想提示路径

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

elementPlus引入 ​

1. 安装elementPlus和自动导入插件 ​

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

2. 配置自动按需导入 ​

javascript
// 引入插件
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. 测试组件 ​

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

定制elementPlus主题 ​

1. 安装sass ​

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

bash
npm i sass -D

2. 准备定制化的样式文件 ​

javascript
/* 只需要重写你需要的即可 */
@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. 自动导入配置 ​

这里自动导入需要深入到elementPlus的组件中，按照官方的配置文档来

  1. 自动导入定制化样式文件进行样式覆盖
  2. 按需定制主题配置 （需要安装 unplugin-element-plus）
javascript
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";
// 导入对应包
import ElementPlus from "unplugin-element-plus/vite";
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [
        // 1. 配置elementPlus采用sass样式配色系统
        ElementPlusResolver({ importStyle: "sass" }),
      ],
    }),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 自动导入定制化样式文件进行样式覆盖
        additionalData: `
          @use "@/styles/element/index.scss" as *;
        `,
      },
    },
  },
});

axios安装并简单封装 ​

1. 安装axios ​

bash
npm i axios

2. 基础配置 ​

官方文档地址：https://axios-http.com/zh/docs/intro 基础配置通常包括：

  1. 实例化 - baseURL + timeout
  2. 拦截器 - 携带token 401拦截等
javascript
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. 封装请求函数并测试 ​

javascript
import http from "@/utils/http";

export function getCategoryAPI() {
  return http({
    url: "home/category/head",
  });
}

路由整体设计 ​

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

html
<template> 我是登录页 </template>
html
<template> 我是首页 </template>
html
<template> 我是home </template>
html
<template> 我是分类 </template>
javascript
// 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和component对应关系的位置
  routes: [
    {
      path: "/",
      component: Layout,
      children: [
        {
          path: "",
          component: Home,
        },
        {
          path: "category",
          component: Category,
        },
      ],
    },
    {
      path: "/login",
      component: Login,
    },
  ],
});

export default router;

scss变量自动导入 ​

css
$xtxColor: #27ba9b;
$helpColor: #e26237;
$sucColor: #1dc779;
$warnColor: #ffb302;
$priceColor: #cf4444;
json
css: {
    preprocessorOptions: {
      scss: {
        // 自动导入scss文件
        additionalData: `
          @use "@/styles/element/index.scss" as *;
          @use "@/styles/var.scss" as *;
        `,
      }
    }
}
路径别名 ElementPlus Sass配置https://indulgeback.github.io/posts/%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/1%E3%80%81%E8%B7%AF%E5%BE%84%E5%88%AB%E5%90%8D%20ElementPlus%20Sass%E9%85%8D%E7%BD%AE
作者LeviLiu
发布于2023/5/30
更新于6/26
许可协议 CC BY-NC-SA 4.0
署名-非商业性使用-相同方式共享 4.0 国际
VueElementPlusSass
反馈与投诉
赞赏博主
评论 隐私政策