代码开发相关操作

使用Vue项目管理器创建项目:(vue脚手架安装一次就可以全局使用)

window+R打开命令窗口,输入vue ui,进入GUI页面,点击创建->

设置项目名称 ,在初始化git下面输入:init project ,点击下一步之后,进入预设,选择手动配置项目 ,点击下一步,进入功能,选择bable、router、liner/Formatter(代码格式校验)、使用配置文件 ,之后进入配置面板(需设置三个地方)。1.关闭 -使用history模式的路由(关闭,哈希兼容性更好)2.pick a liner 选择**ESLint + Standard config,3.lint on save 打开。**之后创建项目(提示是否保存预设,可以保存一下,以便下次使用)。

之后就可以在插件中看到已安装的插件了,

如果需要安装插件,点击右上方"添加插件",搜索所需要的插件,进行安装即可,例如:vue-cli-plugin-element,点击安装之后,进入配置插件选项,选择import on demand(按需引入)

安装依赖:依赖-> 安装依赖->axios->安装

gitee中上传项目仓库

一、gitee添加公钥:

点击头像->设置->SSH公钥->怎样生成公钥(查看文档,SSH 公钥设置 | Gitee 帮助中心,按步骤操作即可),这里贴出主要步骤:

打开Windows PowerShell

输入:

ssh-keygen -t ed25519 -C "Gitee SSH Key"

三次回车之后,查看生成的SSH公钥(id_ed25519.pub)和私钥 (id_ed25519)

ls ~/.ssh/

读取公钥文件:

cat ~/.ssh/id_ed25519.pub

复制终端输出的公钥。

测试:输入;

ssh -T [email protected]
如果出现, Hi Anonymous! You've successfully authenticated, but GITEE.COM does not provide shell access.说明添加公钥成功

二、添加项目

头像旁边的加号,点击->新建仓库:

命令行中输入:

复制代码
git config --global user.name "yanmengying"
git config --global user.email "[email protected]"

【 如果提示git不是命令,说明没有安装git,或者配置环境不对,可以进入git官网(https://git-scm.com/downloads/win)下载(安装说明可参考git的安装与配置教程-超详细版_git安装及配置教程-CSDN博客),下载完之后命令窗口输入git --version查看是否安装成功】

在命令行中输出两行代码,进行git全局配置,之后,如果有现成的项目就执行"已有仓库",否则执行"创建git仓库"

将本地的项目上传到git中:

步骤一:根据上述步骤创建出的vue_shop项目,打开所在文件夹,右键选择在终端中打开,进入windows PowerShell,输入git status查看项目状态,有一些文件没有添加,输入"git add ."(add和.之间有空格),输入"git commit -m "add files"",之后输入git status查看项目状态,可以看到正处于主分支,工作区干净的提示。

步骤二:上面是在本地做一些设置,之后通过"已有仓库"中的提示,完成上传

在vue_shop的windows PowerShell中输入:

复制代码
git remote add origin https://gitee.com/yanmengyingyanmengchen/vue_shop.git
复制代码
git push -u origin "master"

通过上述两个命令行(注意第二行命令输入回车后会提交用户名和密码,用户名是一个邮箱,如果不记得,可以去个人设置->邮箱管理->我的邮箱地址中查看,密码就是登录密码), 将本地仓库上传到码云(gitee)中,刷新项目仓库地址,就可以看到新上传的仓库了

安装vite:

在命令行中输入npm install -g vite

提示错误,大概意思是没有操作权限,通过以管理员身份打开命令行,输入此命令,安装成功,输入vite --version查看版本

安装vue3的开发者工具:

插件下载:通过极简插件官方搜索:devtools

复制代码
https://chrome.zzzmh.cn/#/index

选择推荐下载,下载的压缩包解压后包含两个文件,插件 CRX文件和安装说明txt文件,按照安装说明安装即可(将CRX文件拖拽到chrome浏览器中的拓展程序页面,记住关掉vue2开发工具)

相关推荐
腾讯TNTWeb前端团队4 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰8 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪8 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪8 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy9 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom9 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom10 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom10 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom10 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试