vue项目,代码提交至码云,iconfont的用法说明


Posted in Javascript onJuly 30, 2020

一、前期准备

首先得有一个码云账号,账号名最好是英文,用于线上仓库

其次下载一个git到电脑,因为很多git命令,cmd命令行识别不了

最好再有一个Iconfont账号,很多前端用到的图标就不用再自己画了,直接添加到项目下载下来就可以用了

还需要用到的有node

二、建立项目

1、首先在码云上新建一个私有的项目(如果项目是共有的,那么所有人都能看见,一般设为私有,然后将项目组的人拉进来就可以了),使用READERME文件初始化这个项目,语言选择javascript,克隆到本地

其中需要完成线上仓库与本地的连接

2、接下来就可以在本地进行代码的编写了。

3、需要用到图标时直接在iconfont中找到,加入购物车,添加进项目之后下载到本地,在组件中引用就行了。其中下载的文件只有部分是我们需要的,如下图所示:

vue项目,代码提交至码云,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 中文件的内容。如截图所示:

vue项目,代码提交至码云,iconfont的用法说明

第二步:

登录码云,找到要预览的代码仓库,操作如以下截图所示,获取部署后的网站地址,第三步的时候需要

vue项目,代码提交至码云,iconfont的用法说明

第三步:

在vscode中,修改该项目下的config/index.js文件下的build部分的内容,如截图所示:

vue项目,代码提交至码云,iconfont的用法说明

修改完之后,重新执行npm run build命令,并且进行push

第四步:

在浏览器中输入第二步时获取到的网站地址,后面加上 /dist/index.html,即可进行网页的预览

大功告成!

以上这篇vue项目,代码提交至码云,iconfont的用法说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Jun 05 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
May 17 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
vue watch自动检测数据变化实时渲染的方法
Jan 16 Javascript
尝试自己动手用react来写一个分页组件(小结)
Feb 09 Javascript
JavaScript数组去重算法实例小结
May 07 Javascript
vue router+vuex实现首页登录验证判断逻辑
May 17 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
Feb 02 Javascript
vue项目初始化到登录login页面的示例
Oct 31 Javascript
vue如何使用外部特殊字体的操作
Jul 30 #Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 #Javascript
JavaScript JSON使用原理及注意事项
Jul 30 #Javascript
解决vue cli4升级sass-loader(v8)后报错问题
Jul 30 #Javascript
基于JavaScript实现猜数字游戏代码实例
Jul 30 #Javascript
如何用JS模拟实现数组的map方法
Jul 30 #Javascript
Vue性能优化的方法
Jul 30 #Javascript
You might like
支持oicq头像的留言簿(二)
2006/10/09 PHP
PHP性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
vue填坑之webpack run build 静态资源找不到的解决方法
2018/09/03 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
js实现简单掷骰子效果
2019/10/24 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
[04:16]完美世界DOTA2联赛PWL S2 集锦第一期
2020/11/23 DOTA
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
Python logging设置和logger解析
2019/08/28 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
python opencv实现图像配准与比较
2021/02/09 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
行政助理岗位职责范文
2013/12/03 职场文书
办公室经理岗位职责
2014/01/01 职场文书
学生励志演讲稿
2014/01/06 职场文书
旅游专业职业生涯规划范文
2014/01/13 职场文书
工作保证书范文
2014/04/29 职场文书
单位绩效考核方案
2014/05/11 职场文书
环保口号大全
2014/06/12 职场文书
教师节学生演讲稿
2014/09/03 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫