vue项目,代码提交至码云,iconfont的用法说明
一、前期准备
首先得有一个码云账号,账号名最好是英文,用于线上仓库
其次下载一个git到电脑,因为很多git命令,cmd命令行识别不了
最好再有一个Iconfont账号,很多前端用到的图标就不用再自己画了,直接添加到项目下载下来就可以用了
还需要用到的有node
二、建立项目
1、首先在码云上新建一个私有的项目(如果项目是共有的,那么所有人都能看见,一般设为私有,然后将项目组的人拉进来就可以了),使用READERME文件初始化这个项目,语言选择javascript,克隆到本地
其中需要完成线上仓库与本地的连接
2、接下来就可以在本地进行代码的编写了。
3、需要用到图标时直接在iconfont中找到,加入购物车,添加进项目之后下载到本地,在组件中引用就行了。其中下载的文件只有部分是我们需要的,如下图所示:
再将iconfont.css也复制进css文件夹即可
别忘记还要修改iconfont.css的路径
三、提交代码到码云
主要想记载一下本地代码的提交的一些命令
要提交代码就得完成本地与线上仓库的连接,这里是通过公钥私钥来进行连接的
1、生成公钥私钥
在项目文件夹下执行git命令(引号中为注册码云的邮箱地址)
`ssh-keygen -t rsa -C "xxxxx@xxxxx.com"`
2、一路Enter下去,然后将生成的公钥填在码云(设置-ssh公钥)上
接下来输入
cat ~/.ssh/id_rsa.pub
3、初始化git仓库
在项目文件夹下执行git命令
git init
4 、将项目文件添加到缓冲区中
git add .
5 、将add的文件commit到仓库
git commit -m 'project init'
6、连接码云
这一步有可能会报错,需要输入命令
git config --global user.name 用户名;
git config --global user.email 邮箱名;
7、上传代码到码云仓库
git push
四、远端有项目的情况和码云建立连接:
1.在本地创建一个文件夹 或 命令 mkdir + 文件名
2.命令cd + 文件目录 进到文件名下
3.git clone + 码云仓库地址(码云上新建项目点进去克隆或复制的链接)
五、一些git命令
查看所有分支 :git branch -a
切换到某一分支:git checkout 分支名称
合并分支:git merge 原分支 目标分支
提交命令有两个,git push origin master(正常提交)和git push origin master -f(强制提交,强制提交可能会把之前的commit注释信息,不会改变修改的代码,慎用),都是提交到master分支
查看远程分支 git branch -a或git branch -r
创建本地分支 git branch demo_fenzhi
切换到本地分支 git checkout demo_fenzhi
删除本地分支 git branch -d demo_fenzhi
查看本地分支状态 git branch
创建远程的分支,并且把本地分支推送到远程分支上 git push origin demo_fenzhi:demo_fenzhi 本地分支名称:远程分支名称
删除远程分支 git push origin :demo_fenzhi
或 git push origin --delete demo_fenzhi
本地分支与远程分支比较 git diff demo_dev origin/demo_fenzhi
//demo_dev为本地分支,demo_fenzhi为远程分支
新分支并切换到分支 git checkout -b bende_fenzhi
创建+切换分支:git checkout -b <name>
合并某分支到当前分支:git merge <name>
恢复删除后未git add的文件 git checkout -f或git clean -df
可以把远程某各分支拉去到本地的branchname下,如果没有branchname,则会在本地新建branchname git fetch origin branchname:branchname
获取远程分支remoteName到本地新分支localName,并跳到localName分支 git checkout origin/remoteName -b localName
补充知识:vue项目在码云预览步骤
第一步:
需要将vue项目进行打包,即npm run build,打包完将dist文件夹push到码云上,
但是注意将文件上传到 GitHub的时候默认是忽略到dist文件夹的,所以需要修改.gitignore 中文件的内容。如截图所示:
第二步:
登录码云,找到要预览的代码仓库,操作如以下截图所示,获取部署后的网站地址,第三步的时候需要
第三步:
在vscode中,修改该项目下的config/index.js文件下的build部分的内容,如截图所示:
修改完之后,重新执行npm run build命令,并且进行push
第四步:
在浏览器中输入第二步时获取到的网站地址,后面加上 /dist/index.html,即可进行网页的预览
大功告成!
以上这篇vue项目,代码提交至码云,iconfont的用法说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持猪先飞。
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 有一种方法,可以不打开网站而直接查看到这个网站的源代码.. 这样可以有效地防止误入恶意网站... 在浏览器地址栏输入: view-source:http://...2016-09-20
- <?php require('path.inc.php'); header('content-Type: text/html; charset=utf-8'); $borough_id = intval($_GET['id']); if(!$borough_id){ echo ' ...2016-11-25
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 本文实例讲述了JS基于Mootools实现的个性菜单效果代码。分享给大家供大家参考,具体如下:这里演示基于Mootools做的带动画的垂直型菜单,是一个初学者写的,用来学习Mootools的使用有帮助,下载时请注意要将外部引用的mootools...2015-10-23
- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 本文实例讲述了JS+CSS实现分类动态选择及移动功能效果代码。分享给大家供大家参考,具体如下:这是一个类似选项卡功能的选择插件,与普通的TAb区别是加入了动画效果,多用于商品类网站,用作商品分类功能,不过其它网站也可以用,...2015-10-21
- 本文实例讲述了JS实现自定义简单网页软键盘效果。分享给大家供大家参考,具体如下:这是一款自定义的简单点的网页软键盘,没有使用任何控件,仅是为了练习JavaScript编写水平,安全性方面没有过多考虑,有顾虑的可以不用,目的是学...2015-11-08
- php 取除连续空格与换行代码,这些我们都用到str_replace与正则函数 第一种: $content=str_replace("n","",$content); echo $content; 第二种: $content=preg_replac...2016-11-25
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20