参考文档--快速上手 | Vue.js (vuejs.org)

一、创建vue3

1、在你需要创建的文件名下右键打开终端--输入npm create vue@latest

2、点击--y

3、输入创建文件夹的名称  --vue3_wyy

4、根据项目的要求来选择内置状态

 5、打开项目运行--运行不起来

6、解决办法 

1、首先npm i  安装配置  注意！！每次创建一个项目都要npm i

2、npm run dev  运行项目就行了

二、删除vue3中的基础配置 

1、基础介绍

2、删除--修改

修改views文件夹的AboutView.vue

修改views文件夹的HomeView.vue 

修改App.vue(根目录) 

main.js删除顶部代码

再次重新运行就可以直接写自己的配置了

三、vue3如何跳转

1、在vue3中vue和vue-router分开了

2、vue-router有属于自己的文档--安装 | Vue Router (vuejs.org)

3、route--表示当前路由，每一个路由都有一个route对象、可以获取name、params、query等属性

4、router相当于一个全局的路由器对象、任何页面都可以调用push()、replace()、go()

5、新建一个登录页面

6、在router中配置路由--路由懒加载

7、点击跳转到登陆页面--通过router.push()来实现

四、如何引入lass或者sass 

1、这边引入less--参考文档--Less 快速入门 | Less.js 中文文档 - Less 中文网 (bootcss.com)

2、在终端输出这串代码--重启项目即可生效

npm install -g less

 3、如果报错--就在终端输出下载这段代码

npm install -D less

4、在assets中创建一个main.css(公共css) 各个页面的less也写在里面

5、公共main.css

导入main.css

6、引入less方法

 五、引入vant组件

参考文档--Vant 4 - 轻量、可定制的移动端组件库 (vant-ui.github.io)

1、下载  vue3安装命令

npm i vant

2、引入组件和样式--在main,js里面引入

import { createApp } from 'vue';
// 1. 引入你需要的组件
import { Button } from 'vant';
// 2. 引入组件样式
import 'vant/lib/index.css';

const app = createApp();

// 3. 注册你需要的组件
app.use(Button);

 实例图片--举例引入

1、第一步首先在main.js注册

注册图片

2、复制vant提供的代码

图片实例

3、展示效果

六、封装fetch请求 

1、封装fetch请求的好处可以代码复用、直接导入即可、不用再一遍一遍的写fetch请求

2、用法、首先创建一个utlis文件夹、里面写一个http.js文件

效果图片

3、在http.js中封装请求

七、使用网易云官方API

1、安装--网易云音乐 NodeJS 版 API (neteasecloudmusicapi.js.org)

总结声明--在2024年10月8日晚10点-2024年10月9日凌晨4个小时中、经历下载git、gitee、了解git命令、注册gitHub、最后得出网易云音乐API不可用---欲哭无泪~

八、git下载安装

1、安装git--下载链接--CNPM Binaries Mirror (npmmirror.com)

2、找到你需要的版本进行安装

3、到这一步可以换安装路径

4、按照我这样开始勾选

 

5、按照下面图片开始勾选

 

6、点击下一步

7、项目仓库名称--选项一git给我们起名 选项二 我们自己起仓库名

8、选择第二种开始安装

9、选择第一个

10、继续选择第一个

11、第一

12、第一

13、第一

14、还是第一

15、安装成功

16、注意从第九步开始都是选择第一个 

17、详情介绍安装请看--Git 详细安装教程（详解 Git 安装过程的每一个步骤）_git安装-CSDN博客

九、gitee使用方式

1、创建项目  注册登录gitee--点击新建仓库

 2、新建一个wyy的仓库 

3、git命令

1、克隆命令  git clone  https://gitee.com/huang-xile/wyy.git 

2、返回上一步 cd ..(cd和..有空格)

3、进入文件夹 cd （文件名）成功进入远程仓库

4、查看仓库状态 git status

5、本地git仓库新建一个文件--  再次使用git status查看仓库状态

6、发现有新的文件可以提交 

7、准备追踪此文件添加到远程仓库  git add . 

8、git commit -m 添加首页文本  （进行本次提交注释）

 

9、git push  向远程仓库提交

就可以在gitee上面查看提交的文本

十、下载安装小乌龟更方便使用git

1、下载小乌龟安装包和中文包

 2、安装、在使用小乌龟的时候、必须要有gie、否则用不了

git地址--https://git-scm.com/downloads/win

小乌龟地址--https://tortoisegit.org/download/

3、安装小乌龟教程

1、在安装安装包之后、按照上述步骤点击之后--下一步安装中文包

2、勾上设置小乌龟使用中文包

3、在任意一个文件夹打开、设置

需要跑一下--点击next 

到这一步需要输入邮箱密码

选择openSSH--点击完场之后确定

4、配置gitee公钥

 1、当你设置gitee仓库的时候--在任意文件夹中打开git Bash

2、查看命令-先登录

 3、根据上述1的提升分别输入 输入名字 邮箱

4、生成密钥

输入命令生成密钥--需要敲击三次回车密码生成

ssh-keygen -t rsa

5、查看密钥--公钥

cat ~/.ssh/id_rsa.pub

6、根据的到的密钥复制-- ssh开始复制

7、在gitee中配置公钥 

 5、如何使用小乌龟

开发流程

一、克隆项目

1、点击克隆

2、复制仓库地址--粘贴（仓库地址是你需要克隆项目的地址）

二、如何知道选择的分支是不是最新的

1、需要拉取--

2、显示up to date  就是最新的代码 

 三、创建分支

 

查看分支--已经处于login分支下了

 

 四、提交--提交后面的就是你现在处于那一个分支

（现在处于master主分支）

（但是我们开发的时候是没有直接修改主分支的权限的、是需要创建一个分支来书写我们的代码）

3、扩展（如何提交）

1、点击提交--看是不是你需要提交的分支（提交到login分支）

2、提交成功-- 这个时候已经提交到本地 

 3、如何提交到gitee服务器上

4、点击确定--就推送到服务器上了

五、合并内容 （修改的内容合并到主分支上）

1、点击Pull Requests

2、步骤二

3、步骤三

 4、步骤4、审核通过-扁平化合并  

5、接受之后就是最新的了

6、上传到服务器之后、master分支就是最新的了、但是本地上的maste的分支就是老代码 

所以我们需要切换master分支上、重新拉去最新的代码 

就是最新的了、只需要重复步骤就行了