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

运行结果