vue3学习日记5 - 项目起步

 最近发现职场前端用的框架大多为vue，所以最近也跟着黑马程序员vue3的课程进行学习，以下是我的学习记录

视频网址：

Day2-11.项目起步-静态资源引入和ErrorLen安装_哔哩哔哩_bilibili

学习日记：

vue3学习日记1 - 环境搭建-CSDN博客

vue3学习日记2 - 组合式API基础学习-CSDN博客

vue3学习日记3 - 组合式API练习小案例-CSDN博客

vue3学习日记4 - Pinia-CSDN博客

一、项目初始化

1、创建一个vue项目

2、安装相关依赖

3、运行项目

4、创建文件夹

二、git管理

1、概述

Git 是一个功能强大的工具，特别适合需要团队协作、版本控制以及高效管理代码历史的场景。由于它的分布式特性和高效的操作，Git 已经成为现代软件开发中最常用的版本控制系统之一。

基于create-vue创建出来的项目默认没有初始化git仓库，需要我们手动初始化

2、执行命令并完成提交

1、git init

初始化一个新的git仓库

2、git add .

将文件修改为待提交的状态，git add 只是将修改暂时记录在暂存区，真正将改动永久保存到 Git 仓库中，还需要执行 git commit 命令。

注意：后面要加" . "

3、git commit -m "init"

提交文件的更改到 Git 仓库，并附上提交信息。

三、别名路径联想设置

1、什么是别名路径联想提示？

在编写代码的工程中，一旦输入@/，VSCode会立刻联想出src下的所有目录和子文件，同一文件路径访问不容易出错

2、配置别名联想设置

1、正常情况下输入“@/”没有任何反应

2、在项目根目录下新增jsconfig.json文件

新增后，可能会自动到vite.config.js下

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

3、配置完成

4、总结

在这只是做联想提示，并没有转换路径

实际路径转换是在文件vite.config.js下

四、elementPlus按需导入

官网：

安装 | Element Plus (element-plus.org)

1、安装包管理器

根据官网API可知输入他给的命令进行安装

输入命令运行结果

2、安装配套的插件

安装成功后，可以在以下文件中找到

3、修改配置文件

根据官网提示编写vite.config.ts相关配置

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

4、重新运行一下项目

5、检测elementPlue是否导入成功

<script setup>
</script>

<template>
  <el-button type="success">Success</el-button>
</template>

运行结果

五、elementPlus主题色修改

1、安装scss

输入命令

npm install sass

2、准备定制样式文件

在文件夹style下，新建文件夹element，在此文件夹下新建文件index.scss

index.scss内容

// 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语言

4、自动导入样式化进行覆盖

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [
        // 配置elementPlus采用sass样式配色系统
        ElementPlusResolver({ importStyle:"sass"})
      ],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  css:{
    preprocessorOptions:{
      scss:{
        // 自动导入定制化样式文件进行样式覆盖
        additionalData:`
        @use "@/styles/element/index.scss" as *;
        `
      }
    }
  }
})

5、测试

重新运行项目，按钮颜色改变，修改成功

六、axios相关配置

1、安装axios

命令行中输入" npm install axios "

2、axios基础封装

在utils文件夹下新建文件http.js

// axios基础封装

// 导入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、API

在api文件夹下testAPI.js

// axios基础封装

// 导入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

4、测试

在main.js中调用方法

// 测试接口函数
import { getCategory } from '@/apis/testAPI'
getCategory().then( res => {
    console.log(res)
})

5、运行结果

6、问题小结

如果项目里面不同的业务模块需要的接口地址不同，该如何来做？

axios.create() 方法可以执行多次，每次执行都会生成一个新的实例，比如：
const http1 = axios.create({ baseURL: 'url1' })
const http2 = axios.create({ baseURL: 'url2' })

七、项目整体路由设计

1、一级路由

设计首页和登录页的路由（一级路由）

1、路由设计原则

找内容切换的区域，如果是页面整体切换，则为一级路由

2、删除文件夹views下面所有的文件

3、在views文件夹下建立文件夹Layout和Login，并且分别在底下建立文件index.vue

Layout下index.vue内容
<template>
    <div>我是首页</div>
</template>
Login下index.vue内容
<template>
    <div>我是登录页</div>
</template>

你会发现一直报错，将鼠标放上去报错信息如下

原因是，vue3规定命名必须有两个单词组成，index不符合规范，要解决此问题，只需要让其不强制要求组件命名即可

4、修改router文件夹下index.js

import { createRouter, createWebHistory } from 'vue-router'
import Login from '@/views/Login/index.vue'
import Layout from '@/views/Layout/index.vue'

/**
 *  createRouter : 创建router实例对象
 *  createWebHistory ：创建history模式的路由
 */
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      component: Layout,
    },
    {
      path: '/login',
      component:Login
    },
  ],
})

export default router

5、在App.vue使用

<script setup>
</script>

<template>
  <!-- 引入路由 -->
  <router-view/>
</template>

6、运行结果

2、二级路由

1、路由设计原则

找内容切换的区域，如果是在一级路由页的内部切换，则为二级路由

2、在views文件夹下建立文件夹Home和Categorize，并且分别在底下建立文件index.vue

3、在routes文件夹下的index.js添加二级路由

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 Categorize from '@/views/Categorize/index.vue'

/**
 *  createRouter : 创建router实例对象
 *  createWebHistory ：创建history模式的路由
 */
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      component: Layout,
      children:[
        {
          // 当默认显示时，直接滞空就好
          path:'',
          component:Home
        },
        {
          path:'categorize',
          component:Categorize
        }
      ]
    },
    {
      path: '/login',
      component:Login
    },
  ],
})

export default router

4、在Layout文件夹下index.js中添加二级路由入口

<template>
    <div>我是首页</div>
    <router-view/>
</template>

5、运行结果

3、问题小结

1、路由设计的依据是什么

内容切换的方式

2、默认二级路由如何进行设置

path配置置空

八、静态资源存放

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

可以安装以下插件，编写代码时显示报错信息

九、scss文件的自动导入

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

1、在style文件夹下新建文件var.scss

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

2、修改配置文件

3、测试(App.vue)

<script setup>
</script>

<template>
  <!-- 引入路由 -->
  <router-view/>
  <div class="sc">
    哈哈哈哈哈
  </div>
</template>

<style lang="scss" scoped>
.sc{
  color: $warnColor;
}
</style>

4、运行结果

问题小结

1、git初始化提交报错

原因

git没有配置用户名和邮箱地址

解决

设置邮箱和用户名

运行以下命令可查看设置是否正确

git config --global user.name git config --global user.email

运行结果

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

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

相关文章

【Linux系统】—— vim 的使用

【Linux系统】—— vim 的使用

【Linux系统】—— vim 的使用 1 vim 的基本概念2 vim 的多模式3 命令模式下的命令集3.1 进入/退出其他模式3.2 光标移动命令集3.3 复制/剪切/粘贴/删除命令集3.4 撤销命令集3.5 查找命令集3.6 替换命令集3.7 进入与退出替换模式 4 批量化编译5 底行模式6 vim 小技巧7 vim简单配…
阅读更多...
JAVA实战开源项目：课程智能组卷系统(Vue+SpringBoot) 附源码

JAVA实战开源项目：课程智能组卷系统(Vue+SpringBoot) 附源码

本文项目编号 T 009 &#xff0c;文末自助获取源码 \color{red}{T009&#xff0c;文末自助获取源码} T009&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析 六、核心代码6.1 老…
阅读更多...
了解 Ansys Mechanical 中的网格方法：综合指南

了解 Ansys Mechanical 中的网格方法：综合指南

网格是每个有限元分析 &#xff08;FEA&#xff09; 仿真的支柱。它将几何图形划分为离散单元&#xff0c;使 Ansys Mechanical 能够近似模型在各种条件下的行为。结构良好的网格可确保准确、可靠和计算高效的结果&#xff0c;而结构不佳的网格可能会导致错误、收敛问题或不必要…
阅读更多...
【Linux】深刻理解软硬链接

【Linux】深刻理解软硬链接

一.软硬链接操作 1.软连接 touch 创建一个文件file.txt &#xff0c;对该文件创建对应的软链接改怎么做呢&#xff1f; ln -s file.txt file-soft.link .给对应文件创建软连接。 软连接本质就是一个独立的文件&#xff0c;因为我们对应的软连接有独立的inode&#xff0c;他…
阅读更多...
施耐德M241与MR30-FBS-MT 在Machine Expert V2.0的组态过程

施耐德M241与MR30-FBS-MT 在Machine Expert V2.0的组态过程

一、系统概述 MR30分布式IO是一个高度灵活的可扩展分布式 I/O 系统&#xff0c;MR30-FBC-MT用于通过 Modbus TCP 总线将过程信号连接到上一级控制器。 具有以下特点&#xff1a; 结构紧凑 PUSH IN端子&#xff0c;易于安装&#xff0c;布线简单 灵活性高&#xff1a;开关量模…
阅读更多...
大数据技术在服饰行业的应用

大数据技术在服饰行业的应用

大数据技术的快速发展为各行各业带来了深刻的变革&#xff0c;本文将详细探讨大数据技术的发展脉络&#xff0c;大数据技术推动服饰企业的数字化转型&#xff0c;旨在为相关领域的研究和实践提供参考。 什么是大数据大数据技术的发展历程大数据在服饰行业的应用总结 1&#xff…
阅读更多...
Vue2+OpenLayers添加/删除点、点击事件功能实现（提供Gitee源码）

Vue2+OpenLayers添加/删除点、点击事件功能实现（提供Gitee源码）

目录 一、案例截图 二、安装OpenLayers库 三、安装Element-UI 四、代码实现 4.1、添加一个点 4.2、删除所有点 4.3、根据经纬度删除点 4.4、给点添加点击事件 4.5、完整代码 五、Gitee源码 一、案例截图 可以新增/删除标记点&#xff0c;点击标记点可以获取到当前标…
阅读更多...
Windows 10 ARM工控主板连接I2S音频芯片

Windows 10 ARM工控主板连接I2S音频芯片

在Windows工控主板应用中&#xff0c;音频功能是一项基本的需求&#xff0c;USB声卡在x86/x64 Windows系统上就可直接免驱使用&#xff0c;但这些USB声卡通常不提供ARM上的Windows系统驱动。本文将介绍如何利用安装在ARM上的Windows工控主板——ESM8400的I2S接口、连接WM8960音…
阅读更多...
【Rust】错误处理机制

【Rust】错误处理机制

目录 思维导图 引言 一、错误处理的重要性 1.1 软件中的错误普遍存在 1.2 编译时错误处理要求 二、错误的分类 2.1 可恢复错误&#xff08;Recoverable Errors&#xff09; 2.2 不可恢复错误&#xff08;Unrecoverable Errors&#xff09; 三、Rust 的错误处理机制 3…
阅读更多...
提升租赁效率的租赁小程序全解析

提升租赁效率的租赁小程序全解析

内容概要 在如今快节奏的生活中&#xff0c;租赁小程序俨然成为了提升租赁效率的一把利器。无论是个人还是企业&#xff0c;都会因其便捷的功能而受益。简单来说&#xff0c;租赁小程序能让繁琐的租赁流程变得轻松、高效。在这里&#xff0c;我们将带您畅游租赁小程序的海洋&a…
阅读更多...
SSM商城设计与实现

SSM商城设计与实现

摘 要 本文的主要工作是对基于B/S模式及JSP技术的基于智能推荐的b2c销售网站进行了研究与设计。本文首先介绍了基于智能推荐的b2c销售网站的背景&#xff0c;分析比较了国内外相关基于智能推荐的b2c销售网站的运行模式、系统特点与开发技术。然后分析了目前热点的各种Web应用开…
阅读更多...
drawDB docker部属

drawDB docker部属

docker pull xinsodev/drawdb docker run --name some-drawdb -p 3000:80 -d xinsodev/drawdb浏览器访问&#xff1a;http://192.168.31.135:3000/
阅读更多...
CentOS7下Hadoop集群分布式安装详细图文教程

CentOS7下Hadoop集群分布式安装详细图文教程

1、集群规划 主机 角色 DSS20 NameNode DataNode ResourceManager NodeManager DSS21 SecondaryNameNode NameNode NodeManager DSS22 DataNode NodeManager 1.1、环境准备 1.1.1 关闭防火墙 #查看防火墙状态 firewall-cmd --state #停止…
阅读更多...
计算机网络——网络层-IPV4相关技术

计算机网络——网络层-IPV4相关技术

一、网络地址转换NAT • 网络地址转换 NAT 方法于1994年提出。 • 需要在专用网连接到因特网的路由器上安装 NAT 软件。装有 NAT 软件的路由器叫做 NAT路由器&#xff0c;它至少有一个有效的外部全球地址 IPG。 • 所有使用本地地址的主机在和外界通信时都要在 NAT 路由器上将…
阅读更多...
postgresql|数据库|利用sqlparse和psycopg2库批量按顺序执行SQL语句（psyconpg2新优化版本）

postgresql|数据库|利用sqlparse和psycopg2库批量按顺序执行SQL语句（psyconpg2新优化版本）

一、 旧版批量执行SQL脚本的python文件缺点&#xff0c;优点&#xff0c;以及更新内容 书接上回&#xff0c;postgresql|数据库开发|python的psycopg2库按指定顺序批量执行SQL文件(可离线化部署)_python sql psycopg2-CSDN博客 这个python脚本写了很久了&#xff0c;最近开始…
阅读更多...
Node.js——http 模块（二）

Node.js——http 模块（二）

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1f4c3;个人状态&#xff1a; 研发工程师&#xff0c;现效力于中国工业软件事业 &#x1f680;人生格言&#xff1a; 积跬步…
阅读更多...
基于element UI el-dropdown打造表格操作列的“更多⌵”上下文关联菜单

基于element UI el-dropdown打造表格操作列的“更多⌵”上下文关联菜单

<template><div :class"$options.name"><el-table :data"tableData"><el-table-column type"index" label"序号" width"60" /><!-- 主要列 BEGIN---------------------------------------- --&g…
阅读更多...
javascrip基础语法

javascrip基础语法

为什么学习 JavaScript? JavaScript 是 web 开发人员必须学习的 3 门语言中的一门&#xff1a; HTML 定义了网页的内容CSS 描述了网页的布局JavaScript 控制了网页的行为 1. JavaScript 输出 1.1 console.log()&#xff1a;用于将信息输出到浏览器控制台&#xff0c;例如con…
阅读更多...
大语言模型预训练、微调、RLHF

大语言模型预训练、微调、RLHF

转发&#xff0c;如有侵权&#xff0c;请联系删除&#xff1a; 1.【LLM】3&#xff1a;从零开始训练大语言模型&#xff08;预训练、微调、RLHF&#xff09; 2.老婆饼里没有老婆&#xff0c;RLHF里也没有真正的RL 3.【大模型微调】一文掌握7种大模型微调的方法 4.基于 Qwen2.…
阅读更多...
django基于Python的校园个人闲置物品换购平台

django基于Python的校园个人闲置物品换购平台

Django 基于 Python 的校园个人闲置物品换购平台 一、平台概述 Django 基于 Python 的校园个人闲置物品换购平台是专为校园师生打造的一个便捷、环保且充满活力的线上交易场所。它借助 Django 这一强大的 Python Web 开发框架&#xff0c;整合了校园内丰富的闲置物品资源&…
阅读更多...
最新文章

Copyright @ 2022~2023