vue3学习日记5 - 项目起步
最近发现职场前端用的框架大多为vue，所以最近也跟着黑马程序员vue3的课程进行学习，以下是我的学习记录
视频网址：
Day2-11.项目起步-静态资源引入和ErrorLen安装_哔哩哔哩_bilibili
学习日记：
vue3学习日记3 - 组合式API练习小案例-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
运行结果
原文地址：https://blog.csdn.net/weixin_53468073/article/details/145124534
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！