最近发现职场前端用的框架大多为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 httpInstance3、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 httpInstance4、测试
在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 router5、在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 router4、在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:#cf44442、修改配置文件
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
运行结果
