【vue】0到1的常规vue3项目起步

创建项目并整理目录

npm init vue@latest

image.png

jsconfig.json配置别名路径

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

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

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. 测试组件

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

定制elementPlus主题

1. 安装sass

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

npm i sass -D

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

/* 只需要重写你需要的即可 */
@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)
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: [ElementPlusResolver()],
    }),
    // 按需定制主题配置
    ElementPlus({
      useSource: true,
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 自动导入定制化样式文件进行样式覆盖
        additionalData: `
          @use "@/styles/element/index.scss" as *;
        `,
      }
    }
  }
})

axios安装并简单封装

1. 安装axios

npm i axios

2. 基础配置

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

  1. 实例化 - baseURL + timeout
  2. 拦截器 - 携带token 401拦截等
import axios from 'axios'

// 创建axios实例
const http = axios.create({
  baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
  timeout: 5000
})

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

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


export default http

3. 封装请求函数并测试

import http from '@/utils/http'

export function getCategoryAPI () {
  return http({
    url: 'home/category/head'
  })
}

路由整体设计

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

<template>
  我是登录页
</template>
<template>
  我是首页
</template>
<template>
  我是home
</template>
<template>
  我是分类
</template>
// 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

静态资源引入和Error Lens安装

1. 静态资源引入

  1. 图片资源 - 把 images 文件夹放到 assets 目录下
  2. 样式资源 - 把 common.scss 文件放到 styles 目录下

2. Error Lens插件安装

image.png

scss变量自动导入

$xtxColor: #27ba9b;
$helpColor: #e26237;
$sucColor: #1dc779;
$warnColor: #ffb302;
$priceColor: #cf4444;
css: {
    preprocessorOptions: {
      scss: {
        // 自动导入scss文件
        additionalData: `
          @use "@/styles/element/index.scss" as *;
          @use "@/styles/var.scss" as *;
        `,
      }
    }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/141729.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

openGauss学习笔记-122 openGauss 数据库管理-设置密态等值查询-密态支持函数/存储过程

文章目录 openGauss学习笔记-122 openGauss 数据库管理-设置密态等值查询-密态支持函数/存储过程122.1 创建并执行涉及加密列的函数/存储过程 openGauss学习笔记-122 openGauss 数据库管理-设置密态等值查询-密态支持函数/存储过程 密态支持函数/存储过程当前版本只支持sql和P…

【工程实践】Docker使用记录

前言 服务上线经常需要将服务搬到指定的服务器上&#xff0c;经常需要用到docker&#xff0c;记录工作中使用过dcoker指令。 1.写Dockerfile 1.1 全新镜像 FROM nvidia/cuda:11.7.1-devel-ubuntu22.04ENV WORKDIR/data/Qwen-14B-Chat WORKDIR $WORKDIR ADD . $WORKDIR/RUN ap…

【数组方法reduce】reduce细讲以及模拟重写其他数组扩展方法

学习关键语句: Array.reduce Array.prototype.reduce reduce方法 重写 reduce 方法 1. 写在前面 很多同学 ( 指我自己 ) 在学习其他数组扩展方法时都没那么困难 , 但是到了 reduce 方法时就会显得蠢蠢的 , 所以今天就赶紧将这个方法讲个明白 其实所有的数组扩展方法本质上都…

数据结构 顺序表和链表

1.线性表 线性表&#xff08;linear list&#xff09;是n个具有相同特性的数据元素的有限序列 线性表是一种在实际中广泛使用的数据结构&#xff0c;常见的线性表&#xff1a;顺序表、链表、栈、队列、字符串.. 线性表在逻辑上是线性结构&#xff0c;也就说是连续的一条直线…

2023年【汽车驾驶员(高级)】证考试及汽车驾驶员(高级)实操考试视频

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 汽车驾驶员&#xff08;高级&#xff09;证考试考前必练&#xff01;安全生产模拟考试一点通每个月更新汽车驾驶员&#xff08;高级&#xff09;实操考试视频题目及答案&#xff01;多做几遍&#xff0c;其实通过汽车…

【备忘】在Nginx服务器安装SSL证书

您可以在Nginx或Tengine服务器上安装SSL证书&#xff0c;实现通过HTTPS安全访问Web服务器。本文介绍如何为Nginx或Tengine服务器安装SSL证书。 重要 本文以CentOS 8.0 64位操作系统、Nginx 1.14.2为例介绍。不同版本的操作系统或Web服务器&#xff0c;部署操作可能有所差异&a…

2020年12月 Scratch(一级)真题解析#中国电子学会#全国青少年软件编程等级考试

一、单选题(共25题,每题2分,共50分) 第1题 下面哪个区域是“舞台区”? A:A B:B C:C D:D 答案:B 第2题 下面哪段程序可以随机切换三个背景? A: B: C: D:

私域电商:构建商业新模式的必要性

随着互联网的快速发展&#xff0c;传统的电子商务模式已经无法满足企业对于个性化、精准化服务的需求。在这样的背景下&#xff0c;私域电商应运而生&#xff0c;为企业提供了新的商业机会和增长点。本文将探讨私域电商的必要性及其构建商业新模式的影响。 一、私域电商的概念 …

Python 邮件发送(163为例)

代码 import smtplib import socket from email.mime.text import MIMEText from email.header import Headerdef send_mail():# 设置发件人、收件人、主题、内容from_address 18847097110163.comto_address 963268595qq.comsubject test emailbody hahahhahaha# SMTP邮件…

若依框架下载文件

若依下载的逻辑是指定文件存储的路径&#xff0c;在ruoyi-admin模块下的application.yml中配置路径结尾必须要加/或者\结尾。 他使用的是虚拟路径映射&#xff0c;所以文件名必须是配置路径下真实的文件名。 若依采用的是流的方式&#xff0c;前端必须要用bolb的方式去接收&am…

八大技术架构-演进之路

单机架构 1、简介 应用服务和数据库服务共用一台服务器 2、出现原因 出现在互联网早期&#xff0c;访问量比较小&#xff0c;单机足以满足需求 3、架构工作原理 单机架构通过应用&#xff08;划分了多个模块&#xff09;和数据库在单个服务器上协作完成业务运行&#xff0…

双十一网络电视盒子哪个品牌好?内行分享权威电视盒子排行榜

双十一大促正如火如荼进行中&#xff0c;因为我从事的工作和电视盒子有关&#xff0c;身边的朋友们在选购电视盒子时不知道从何下手就会问我的意见&#xff0c;本期将盘点业内公认的电视盒子排行榜&#xff0c;给双十一想买电视盒子的朋友们做个参考。 排行一&#xff1a;泰捷W…

解决 Django 开发中的环境配置问题:Windows 系统下的实战指南20231113

简介&#xff1a; 在本文中&#xff0c;我想分享一下我最近在 Windows 环境下进行 Django 开发时遇到的一系列环境配置问题&#xff0c;以及我是如何一步步解决这些问题的。我的目标是为那些可能遇到类似困难的 Django 开发者提供一些指导和帮助。 问题描述&#xff1a; 最近…

美颜与性能的平衡:视频直播美颜SDK集成与性能优化指南

目前美颜SDK所遇到的挑战是如何在追求美颜效果的同时保持系统性能的稳定。本文将深入探讨视频直播美颜SDK的集成以及性能优化的关键指南&#xff0c;以帮助开发者找到合适的平衡点。 一、美颜SDK的集成 1.选择适用于直播的美颜SDK 在美颜SDK的众多选择中&#xff0c;要考虑…

文献分享 C-C 模体化学因子受体2的抑制通过恢复免疫细胞格局减轻肝纤维化

C-C 模体化学因子受体2的抑制通过恢复免疫细胞格局减轻肝纤维化 C-C motif chemokine receptor 2 inhibition reduces liver fibrosis by restoring the immune cell landscape 发表于 International Journal of Biological Sciences IF 9.2 摘要 在肝脏中&#xff0c;细胞外…

【从零开始学习Linux】一文带你了解Shell外壳及用户权限(二)

&#x1f6a9;纸上得来终觉浅&#xff0c; 绝知此事要躬行。 &#x1f31f;主页&#xff1a;June-Frost &#x1f680;专栏&#xff1a;Linux入门 &#x1f52d;【从零开始学习Linux】系列均属于Linux入门&#xff0c;主要包含Linux操作系统下的指令、操作、权限以及开发工具&a…

抖音自动发评论之论人工智能AI的应用和发展趋势

人工智能&#xff08;Artificial Intelligence&#xff0c;AI&#xff09;是目前国际上热门的科技话题之一。它是计算机科学中的一个分支&#xff0c;旨在创造能够智能地工作、学习、感知、理解和决策的机器。人工智能的应用范围十分广泛&#xff0c;包括语音识别、自然语言处理…

冰点还原精灵_Deep Freeze Standard v8.60.020.5592中文版

eep Freeze&#xff08;又被成为冰点还原精灵&#xff09;是Faronics公司出品的一款简单易用的系统还原软件&#xff0c;使用能够帮助用户轻松将系统还原到安装该款软件之后状态&#xff0c;避免因为病毒的入侵以及人为的对系统无意或无意的破坏&#xff0c;让你的系统始终完美…

【LeetCode】每日一题 2023_11_12 每日一题 Range 模块(线段树)

文章目录 刷题前唠嗑题目&#xff1a;Range 模块题目描述代码与解题思路 刷题前唠嗑 LeetCode? 启动&#xff01;&#xff01;&#xff01; 嗯&#xff1f;怎么是 hard&#xff0c;好长&#xff0c;可恶&#xff0c;看不懂&#xff0c;怎么办 题目&#xff1a;Range 模块 题…

全国平均风速数据,有图有数据!

全国平均风速数据是一份重要的气象数据&#xff0c;它反映了全国各地的风速情况&#xff0c;对于气象预测、能源开发、环境保护等方面都有重要的意义。 本文将详细介绍全国平均风速数据的来源、统计方法和应用场景&#xff0c;并分析其变化趋势和影响因素。 数据基本信息&#…