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 相关文章推荐
javascript Array.remove() 数组删除
Aug 06 Javascript
JS模拟面向对象全解(一、类型及传递)
Jul 13 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
JavaScript获取对象在页面中位置坐标的方法
Feb 03 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
jquery实现自定义图片裁剪功能【推荐】
Mar 08 Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 Javascript
JS常见构造模式实例对比分析
Aug 27 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
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
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
js常用数组操作方法简明总结
2014/06/20 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
vue样式穿透 ::v-deep的具体使用
2020/06/04 Javascript
Python MD5文件生成码
2009/01/12 Python
将python代码和注释分离的方法
2018/04/21 Python
对Python random模块打乱数组顺序的实例讲解
2018/11/08 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
python计算导数并绘图的实例
2020/02/29 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
python基于opencv实现人脸识别
2021/01/04 Python
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
英国二手物品交易网站:Preloved
2017/10/06 全球购物
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
Vans(范斯)新西兰官方网站:美国原创极限运动品牌
2020/09/19 全球购物
工商企业管理应届生求职信
2013/11/03 职场文书
材料成型及控制工程专业求职信
2014/06/19 职场文书
2016年少先队活动总结
2016/04/06 职场文书